<output id="jbxdv"></output>

      1. 在網頁設計中自定義項目符號

        • 2019-09-04 16:40:54
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        網頁設計中,CSS使用list-style-image屬性來定義項目的圖片符號樣式。

        用法如下:

        list-style-image : none | url ( url )

        網站建設時,其作用是給列表添加項目圖片,其中url是圖片的路徑,可以是絕對路徑,也可以是相對路徑。

        【示例】啟動Dreamweaver,新建一個網頁,保存為test.html,輸入以下內容:

        <h2>京郊采摘好去處</h2>

        <ul>    

        <li>順義大胡子采摘園</li>    

        <li>靜逸清農業生態觀光園</li>    

        <li>英龍果園</li>    

        <li>永新源生態農業有限公司</li>    

        <li>金海湖觀光采摘園</li>

        </ul>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義列表項目圖片樣式。

        ul{                                       /*列表樣式*/   

        color:#CC0000;      

        list-style-image:url(icon.jpg);     /*項目符號圖片*/}

        以上代碼中,定義了項目圖片。

        提示:在設計網頁時,為了添加定制的列表符號,可以使用list-style(-?)image屬性。但是,這種方法對符號圖像的位置的控制能力不強。更常用的方法是關閉列表符號,并且將定制的符號作為背景添加在列表元素上。然后可以使用背景圖像的定位屬性精確地控制定制符號的對準方式。

        IE和Opera使用左空白邊控制列表的縮進,而Safari和Firefox選擇使用左填充。因此,首先需要將列表的空白邊(margin)和填充(padding)設置為零,從而去掉這個縮進。要去掉默認的符號,只需將列表樣式類型設置為none。

        ul {    

        margin:0;    

        padding:0;    

        list-style-type:none;}

        添加定制的符號非常簡單。在列表項左邊添加填充,為符號留出所需的空間。然后將符號圖像作為背景圖像應用于列表項。如果列表項跨越多行,你可能希望將符號放在接近列表項頂部的位置。但是,如果知道列表項的內容不會跨越多行,那么可以將垂直位置設置為middle或50%,從而讓符號垂直居中。

        li{

        background: url(icon.jpg) no-repeat 0 50%;    padding-left:30px;}

        當前文章標題:在網頁設計中自定義項目符號

        當前URL:http://www.freenetsites.com/news/wzzz/3089.html

        上一篇:如何在網頁設計中定義列表樣式

        下一篇:在網頁設計中定義列表橫豎顯示

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>