網頁程式設計
基礎入門教學

用CSS製作特殊圖形[三](十字架、放大鏡、Facebook 圖示、月亮、提示對話框等等)

使用純CSS製作一些特殊的圖案語法,HTML 語法簡單結構如下使用:

<!doctype html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<head>
<style>
這裡加入 CSS代碼

</style>

</head>
<body>
這裡加入 顯示 CSS之 div 語法
</body>
</html>

有些CSS語法是CSS3,因此請多加入
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
這行,此行是為 IE 所增加,如此火狐、Chrome、IE三大瀏覽器皆可正常瀏覽囉!

菱形:

<div id="diamond-narrow"></div>

正菱形:

<div id="diamond"></div>

十字架:

<div id="cross"></div>

放大鏡:

<div id="magnifying-glass"></div>

Facebook 圖示:

<div id="facebook-icon"></div>

月亮:

<div id="moon"></div>

旗幟:

<div id="flag"></div>

錐形:

<div id="cone"></div>

房屋:

<div id="base"></div>

指標:

<div id="pointer"></div>

愛心:

<div id="heart"></div>

無限大符號:

<div id="infinity"></div>

雞蛋:

<div id="egg"></div>

小精靈:

<div id="pacman"></div>

提示對話框:

<div id="talkbubble"></div>

讚(0)

評論 搶沙發

  • 暱稱 (必填)
  • Email (必填)
  • 網址