目前分類：CSS (5)

瀏覽方式： 標題列表 簡短摘要


★<head>與</head>之間★

<style type="text/css">
<!--
.pic { width: 420px;}
.pic p { float: left; padding: 4px; border: 1px solid #ddd; background: #fff; margin: 5px; }
-->
</style>



★<body>之間★

<div class="pic">
<p><img src="01.jpg" border="0" alt="" /></p>
<p><img src="02.jpg" border="0" alt="" /></p>
<p><img src="03.jpg" border="0" alt="" /></p>
<p><img src="04.jpg" border="0" alt="" /></p>
<p><img src="05.jpg" border="0" alt="" /></p>
<p><img src="06.jpg" border="0" alt="" /></p>
<p><img src="07.jpg" border="0" alt="" /></p>
<p><img src="08.jpg" border="0" alt="" /></p>
</div>
  • 第3行 : 圖片區塊寬度,自行調整可改變圖片排列的行數
  • 第4.5行 : 
            float: left; 圖片橫向排列
            padding: 4px; 圖片邊框空白大小
            border: 1px solid #ddd; 圖片框線大小與色彩
            margin: 5px; 圖片之間的距離

    摘自於：    http://www.hsiu28.net/style/article_detail.php?id=21

    • (繼續閱讀...)

    g7g1g3 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：CSS
    ▲top



    這是滑鼠跑到flash teaching那個按鈕時，會出現下面的"flash技巧運用教學文件"的說明

    ★放在head與</head>之間★

    <style type="text/css">
    <!--
    .info {
    position:relative;
    margin:2px;
    padding:5px;
    text-decoration:none;
    color:#000;
    border:1px solid #ccc;
    background: url(img/z1.gif) #fff;
    }
    .info:hover {
    background: url(img/z2.gif) #ccc;
    color:#333;
    }
    .info span {
    display: none;
    }
    .info:hover span {
    background: url(img/z3.gif) #fff;
    display:block;
    position:absolute;
    top:30px;
    left:30px;
    width:130px;
    padding:5px;
    border:1px solid #ccc;
    text-align:left;
    color:#000;
    }
    -->
    </style>



    ★放在body之間★

    <a class="info" href="#">One<span>Explain</span></a>
    <a class="info" href="#">Two<span>Explain</span></a>
    <a class="info" href="#">Three<span>Explain</span></a>
    <a class="info" href="#">Four<span>Explain</span></a>
    • 第4-10行 : 設定連結文字樣式
    • 第13-14行 : 滑鼠移至連結
    • 第17行 : 隱藏說明
    • 第20-29行 : 說明區塊樣式,自行調整


    摘自於：http://www.hsiu28.net/style/article_detail.php?id=23


    (繼續閱讀...)

    g7g1g3 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：CSS
    ▲top

    當文章中我們使用了 HTML 語法中的"列表(Lists)"時，呆板的符號總是缺乏一些可變性，如果說我們把項目符號換上一個自己畫的小圖示，那整個項目清單看來將會更活潑些!!
    　
    這裡我們是要以 CSS 來自訂項目的小圖示，所以在 HTML 中的"列表(Lists)" 語法，我們只以<li>標籤為開始，以</li>標籤為結束來說明，如下:
    <li>正常列表符號</li>
    <li>正常列表符號</li>
    <li>正常列表符號</li>
    得到的結果是這樣的:
    • 正常列表符號
    • 正常列表符號
    • 正常列表符號

    接下來我們就是要將那列表前的黑點點換成小圖示，CSS語法如下:
    LI {list-style: url(小圖示的圖檔路徑);}
    例如: LI {list-style: url(list_icon.gif);}

    可以看到這裡使用的CSS標籤直接為 LI，也就是全站的任何文章中，只要有使用<li>的地方，將全部換成此自訂樣式!!
    將此 CSS 語法寫入您的樣式表中，得到的結果會是如下的樣子....
    (繼續閱讀...)

    g7g1g3 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：CSS
    ▲top



    語法如下:

    <div style="width:232px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;float:right;"><img src="圖片路徑" style="border:1px solid #999999" /><p style="margin:4px 0; font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>photo by ???</b></p></div>
    分別修改紅字部份的width:為圖片的寬度並+20，加入圖片路徑及照片描述/日期/名稱後即可!

    　
    密密麻麻的是吧! 我們拆開來看囉!
    拿掉CSS的樣式描述後，是這樣的....
    <div style=""><img src="" style=""><p style=""></p></div>
    藍色部份為圖片的語法加樣式...
    紅色的部份為文字描述的區塊語法...
    而最外層的 DIV 區塊就是描述大體樣式的關鍵囉!
    　
    最外層的 DIV 區塊的 CSS 描述分解(也就是""內的語法):
    width:212px; <------DIV 區塊的寬度!
    padding:10px 10px 20px 10px; <-----DIV 區塊的內距!
    border-width:1px 2px 2px 1px; <-----DIV 區塊的邊框粗細!
    border-style:solid; <-----DIV 區塊的邊框風格樣式!
    border-color:black; <-----DIV 區塊的邊框顏色!
    background:white; <-----DIV 區塊的背景顏色!
    float:right; <-----DIV 區塊的位置!
    　
    藍色部份的 img 圖片語法中，
    Style="" 的 CSS 描述分解(也就是""內的語法):
    border:1px solid #999999; <-----邊框的 粗細 風格樣式 顏色!
    　
    紅色的部份的 p 文字描述區塊中，
    Style="" 的 CSS 描述分解(也就是""內的語法):
    margin:4px 0; <-----p 文字區塊的外距!
    font:7pt/180% verdana; <-----p 文字區塊內的文字 字級/行距 字型!
    letter-spacing:1px; <-----p 文字區塊內的單字間距!
    color:#999999; <-----p 文字區塊內的文字顏色!
    text-align:right; <-----p 文字區塊內的文字位置!


    摘自於：http://roy.nicetypo.com/contentbypermalink/8c74133eb6343faa48256ea100516ecc

    (繼續閱讀...)

    g7g1g3 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：CSS
    ▲top
    目前最常使用的 CSS 語法，就是控制超連結的顏色與底線，
    　你可以依樣畫葫蘆，將下列虛線中的語法貼在 html 語法中
    　<head> ..... </head> 之間：
    　[語法]
    　---------------------------------------------------------------------------
    　<style type="text/css">
    　<!--　　　　
                    A:link {text-decoration: none ; color: 0000ff }
    　　　　A:visited {text-decoration: none ; color: 0099ff }
    　　　　A:active {text-decoration: none ; color: 0099ff }
    　　　　A:hover {text-decoration: underline ; color: cc0066}
    　-->
    　</style>
    　--------------------------------------------------------------------------

    　[說明]

    　1. 你可以自己更改色碼 (#xxxxxx)，換上你喜歡的顏色，
    　　若需要加底線，就將 none 改成 underline 即可，試試看。

    　2. 為了避免有些瀏覽器將 <style> ..... </style> 標記間的敘述
    　　當成普通字，而顯現在網頁上，因此建議將敘述文字放在
    　　html 註釋語句 <!-- ..... --> 中。
    (繼續閱讀...)

    g7g1g3 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：CSS
    ▲top