• <th id="d3k9k"></th>
      1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

        如何在網頁設計中定義列表樣式

        • 2019-09-03 15:57:24
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.shabnamafrand.com

        設置項目符號

        網站建設中,使用list-style-type屬性來定義列表的項目符號。具體用法如下:

        list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none |armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |lower-latin | upper-latin

        該屬性的參數值說明如表所示。

        d59212edea11698a7e8ab312a3804c3f.jpg

        【示例1】啟動Dreamweaver,新建一個網頁,保存為test.html,在<body>標簽內輸入如下代碼:

        <h2>北京最吸引人的地方</h2><ul>    

        <li>什剎海</li>    

        <li>故宮</li>    

        <li>音樂會古鋼琴咖啡廳</li>    

        <li>北海公園泛舟</li>    

        <li>秋天的香山公園賞紅葉</li></ul>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義網頁屬性和列表樣式。

        body {                                  /*頁面基本屬性*/    

        background-color: #CCCCCC;          /*設置頁面背景顏色*/}ul {                                    /*列表樣式*/    color: #CC0000;    

        list-style-type: square;            /*項目符號*/}

        網頁背景顏色為#CCCCCC,list-style-type:square語句設置了項目符號為正方形。

        在CSS中,無論是<ol>還是<ul>都可以使用相同的屬性值,而且效果是完全相同的。例如,本示例中修改<ul>標簽的樣式為項目編號。

        ul{                            /*列表樣式*/   color:#CC0000;  

        list-style-type:decimal;     /*項目編號*/

        可以看到,項目列表按阿拉伯數字顯示編號,這本身是有序列表<ol>的屬性參數,但是由于在CSS中<ul>和<ol>的分界并不十分嚴格,只要利用list-style-type屬性,二者就可以通用。

        【示例2】在網站建設中,當給<ul>或<ol>標簽設置list-style-type屬性時,在它們中間的所有<li>標簽也都默認設置為該屬性,而如果單獨為某個<li>標簽設置list-style-type屬性時,則僅僅作用在該條項目上。啟動Dreamweaver,新建一個網頁,保存為test2.html,在<body>標簽內輸入如下代碼:

        <h2>北京最吸引人的地方</h2><ul>    

        <li>什剎海</li>    

        <li>故宮</li>    

        <li class="special">音樂會古鋼琴咖啡廳</li>    

        <li>北海公園泛舟</li>    

        <li>秋天的香山公園賞紅葉</li>

        </ul>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義網頁屬性和列表樣式。

        body{                                        /*頁面基本屬性*/        

        background-color:#CCCCCC;            /*設置頁面背景顏色*/    }ul{                                          /*列表樣式*/   

        color:#CC0000;      list-style-type:disc;                 /*項目符號為實心圓*/}

        .special{      

        list-style-type:square;               /*單獨設置項目符號為正方形*/}

        可以看到,單獨設置的<li>標簽和其他標簽的符號是不同的。

        提示:在網頁設計中,list-style-type屬性在<ul>標簽中默認的參數是實心圓,如果在沒有設置list-style-type屬性時,列表的項目符號將顯示為實心圓,在<ol>標簽中默認的項目編號是阿拉伯數字,如果希望列表不顯示任何符號或編號,需要添加聲明語句:list-style-type:none。

        當前文章標題:如何在網頁設計中定義列表樣式

        當前URL:http://www.shabnamafrand.com/news/wzzz/3088.html

        上一篇:設計網頁中的自定義列表

        下一篇:在網頁設計中自定義項目符號

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
      2. <th id="d3k9k"></th>
          1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

            国产一区二区精品人妖系列,国产成人无码AV麻豆,国产真人一级a爱做片高潮,免费A黄片视屏