世界地圖(無接縫)
爛爛的網站,不過都是我們的心血... 這裡專門介紹跟繪圖有關的東西! 跟BJBLOG有關的東西...
BOLG裡的文章是從各網站摘錄(轉貼)下來的,因為都是轉貼的文章居多,如有侵權請來信告知! 我的信箱!
徵求合作夥伴,您是ASP.NET的高手(寫的出像樣的東西就可),有興趣請與我們連絡!MSN:hanher@hotmail.com
預覽模式: 普通 | 列表

CSS圓角 - 圓角化圖片  

我們將一張上下漸變的的圖片作為標題的背景,並將它應用了圓角效果。是不是這種圓角框只能用於比較單調的圖片呢?我們還能將一些顏色比較豐富的圖片也進行透明圓角化嗎?

答案是肯定的,下面看看它的終極功夫。

還是先看最終效果圖吧:



看到了吧,這就是用純CSS實現的圓角化圖片,為了能看到透明化的效果,我特意應用了一個背景圖片,你可以下載本模型到你的電腦中,隨意伸縮窗口的大小,看看外圓角是否是透明的。

有了這種效果,你再也不愁給每一張圖片作圓角的工作,這種效果在一些圖片類的演示頁面中經常見到,特別適用那些圖片比較多的列表中。怎麼樣,效果還可以吧!

查看更多...

Tags: 圓角

分類:CSS Design | 固定鏈接 | 評論: 0 | 引用: 0 | 查看次數: 361

CSS3+HTML5 實現未來Web設計



CSS3 + HTML5是未來的Web,它們都還沒有正式到來,雖然不少瀏覽器已經開始對它們提供部分支持。本文介紹了5個CSS3技巧,可以幫你實現未來的Web,不過,這些技術不應該用在正式的客戶項目,它們更適合你的個人博客站點,Web 設計社區,或者不會有客戶向你投訴的場合。

1. 圓角效果


CSS3 新功能中最常用的一項是圓角效果,標準 HTML 方塊對象是90度方角的,CSS3 可以幫你實現圓角。
程序代碼 程序代碼
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

甚至單個角也可以實現圓角,不過 Mozilla 和 Webkit 的語法稍有不同:
程序代碼 程序代碼
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;

所支持的瀏覽器:Firefox, Safari , Chrome
用例:Twitter
請參閱:
W3C Working Draft
Border-radius on CSS3.info
The Art of Web

查看更多...

Tags: CSS3HTML5

分類:WEB Design | 固定鏈接 | 評論: 2 | 引用: 0 | 查看次數: 316

跑馬燈語法

文字框跑馬燈

程序代碼 程序代碼
<div align="center">
<table style="color:white; font-size:10pt" border="1" style="color:white; font-size:10pt" bordercolor="#FF9900">
<td background="圖檔網址.gif">
<p>
<font color="#FFFF00" face="新細明體" size="2">
<marquee scrollamount='2' scrolldelay='150' direction= 'up' width='105' id=xiaoqing height='120' onmouseover=xiaoqing.stop()
onmouseout=xiaoqing.start() style="color: #0000FF; font-size: 10pt; font-weight: bold; font-family:新細明體">文字跑馬燈公告欄<br>在這輸入文字內容<br></marquee>
</font></td></table>


div align="center">→文字公告欄置中
center=居中;left=靠左;right=靠右

查看更多...

Tags: 跑馬燈

分類:WEB Design | 固定鏈接 | 評論: 0 | 引用: 0 | 查看次數: 540

用jQuery來做個頁框的版型!



jQuery UI.Layout Plug-in

jQuery UI.Layout Plug-in對於前端網頁的操作非常有幫助,對於不是很懂CSS的人,很適合用來做後端的操作介面!

查看更多...

Tags: jQuery 頁框

分類:JAVASCRIPT | 固定鏈接 | 評論: 2 | 引用: 0 | 查看次數: 1719

驢子P2P病毒 瓦解電腦主機

【台灣醒報記者林永富報導】使用P2P分享平台軟體「驢子」(eMule)的電腦族要小心,一種專門透過「驢子」平台傳播的蠕蟲病毒,正在逐步肆虐,受感染後將會瓦解使用者主機,主動刪除一些檔案,嚴重者甚至電腦無法作用。防毒專家建議,電腦族盡量不要使用P2P軟體及平台,並隨時更新防毒碼及掃毒。

防毒軟體公司賽門鐵克指出,這種透過「驢子」軟體及平台傳播的蠕蟲病毒,名為「W32.Noobert」,就是利用P2P分享平台趁機傳播病毒,能感染受害電腦主機磁片上的.exe和.scr文件。

當受感染電腦運作時,此一病毒會被解壓縮到暫存檔目錄下繼續傳播,嚴重的是,它還會隨機刪除以*.avi,*.xls,*.jpg ,*.doc為尾碼名的檔案,並且會透過修改登錄表 (registry key)以及修改系統檔sfc_os.dll來關閉Windows的檔案保護功能,讓使用者遭受嚴重損失。

查看更多...

Tags: eMule

分類:網際網路 | 固定鏈接 | 評論: 0 | 引用: 0 | 查看次數: 391

日本人有兩點最厲害 -- 開發新技術。遊戲開發商 TEATIME(應該沒弄錯吧)稱為「tech48」的技術,將 Webcam 定位人臉的技術,結合自家的 H game(應該是色情遊戲),讓你可以靠移動頭的位置,來改變畫面上看到的視角。這麼做能達成什麼呢?依照 Demo 影片,它讓你可以將頭低到比裙子還要低的位置,然後...

有影片喔!

查看更多...

分類:科技與新知 | 固定鏈接 | 評論: 1 | 引用: 0 | 查看次數: 1002

重新發現HTML表格

根據最近的一些實踐以及在和一些讀者進行關於HTML表格的使用問題溝通之後,決定寫這篇文章。總的來說,注意到由於誤導性信息,他們對於table的使用有種先入為主的厭惡。事實上很多人會說」看到永遠不應該使用表格」的說法,但是這絕對是錯誤的!這個建議只是針對使用HTML表格來定義網頁的佈局,但是表格在方便的排列數據信息行和列方面非常完美,而且如果你一定要在一個頁面上顯示表列數據,你就不得不使用它們!為什麼不呢?然而,在這種情況下,一些人無視了用於table的某些HTML標籤的存在並且不知道該如何正確的使用它們。

一個基本的表格結構如下:

查看更多...

Tags: 表格

分類:WEB Design | 固定鏈接 | 評論: 1 | 引用: 0 | 查看次數: 1082

微軟或明年3月公佈IE9如何支持HTML 5



微軟在上月的專業開發者大會(PDC09)上介紹了關於IE9的一些內容,並且表示,IE9才剛剛開始開發,將支持GPU加速並且放棄IE現有的JavaScript引擎等。雖然微軟目前還無法給出更多關於IE9的技術資料,但是根據慣例,明年3月15日至17日於拉斯維加斯舉辦的MIX 10大會IE9將閃亮登場。

查看更多...

Tags: IE9 HTML 5

分類:網際網路 | 固定鏈接 | 評論: 0 | 引用: 0 | 查看次數: 531

極簡主義網站設計:寓豐富於簡單  

譯自:Minimalist Web Design: When Less is More
原作者:Kayla Knight

作為設計師,我們都知道,一個極簡的設計可以實現漂亮的效果。

然而,很多設計師在實現上有些麻煩:要麼是沒有時間讓使用如此少的元素製作的頁面看起來漂亮,要麼就是最終的結果只是看起來「不完美」。

網上有很多關於極簡主義設計的文章,而本文的目的是幫你實現一個漂亮而不空洞的極簡網站設計

最重要的是,我們將展示一個小的極簡網站設計畫廊,這樣你就可以分析為什麼一些設計可以而其它的則不可以。

這是一個大膽的技術,但本身仍然是一個趨勢。尋找保持獨特的同時讓排版增強設計的方法。

查看更多...

Tags: 極簡主義

分類:WEB Design | 固定鏈接 | 評論: 0 | 引用: 0 | 查看次數: 1171