html列表-Web標準(div+css)教程

 二維碼 241
發表時間:2016-03-06 16:15作者:敖游來源:遨游建站網址:http://m.oudifangfumu.com

  今天我們開始學習《十天學會web標準(div+css)》的html列表,包含以下內容和知識點:

  一、ul無序和ol有序列表

  二、改變項目符號樣式或用圖片定義項目符號

  三、橫向圖文列表

  四、浮動后父容器高度自適應

  五、IE6的雙倍邊距bug

  一、ul無序和ol有序列表

  無序列表是web標準布局中最常用的樣式,代碼如下:

  <div id="layout">

  <ul>

  <li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>

  <li><a title="第四天 縱向導航菜單" href="/div_css/905.shtml" target="_blank">第四天 縱向導航菜單</a></li>

  <li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>

  <li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>

  <li><a title="第一天 XHTML CSS基礎知識" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基礎知識</a></li>

  </ul>

  </div>

  


  這就是有無序列表,是以ul包含li的形式,默認每行前的符號是圓點,可以通過樣式表改為無、方塊,空心圓等。有序列表是以ol包含li的形式,是以數字為項目符號的,無序列表也可以用css定義顯示成有序列表,代碼及顯示效果如下:

  <div id="layout">

  <ol>

  <li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>

  <li><a title="第四天 縱向導航菜單" href="/div_css/905.shtml" target="_blank">第四天 縱向導航菜單</a></li>

  <li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>

  <li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>

  <li><a title="第一天 XHTML CSS基礎知識" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基礎知識</a></li>

  </ol>

  </div>

  


  二、改變項目符號樣式或用圖片定義項目符號

  剛才說了項目符號默認是圓點,可以通過樣式表改為其它形式,下面實際操作一下:

  


  從樣式表編輯器中可以看到,有好多種形式,包括改為ol默認那樣以數字有序列表顯示。另外項目符號還可以以圖像形式,如下圖:

  


  


  這種形式對圖像控制不是很靈活,所以實際應用當中一般用背景圖片來實現,在上例基礎上將項目符號設置為 list-style: none;,然后

  


  


  


上一頁 1 2 3 下一頁
廣告投放問題
網站建設問題
小程序設計問題

以信載商,良心建站。遨游始終秉承“一次建站、終身維護”的宗旨,竭誠為客戶提供最優質的互聯網服務。遨游建站率先植入seo優化理念,讓你的網頁更利于搜索引擎抓取,關鍵詞排名更靠前。可仿站、可定制。無論是傳統型企業官網、集團型品牌官網,還是營銷型網站、電商型網站、定制型網站、特殊行業網站(醫療、教育),全部搞定。

公司:網站建設_小程序設計_競價托管代運營公司;郵箱:1013601535@qq.com

手機:17073547034;QQ: 1013601535

在線留言咨詢,24小時內回復
我想咨詢
*
企業名稱
手機號碼
*
您的姓名
所在城市
提交
最新發布
我們是中小企業可信賴的合作伙伴!始終專注一件事,一站式互聯網信息技術服務商
19240102767
全國統一服務熱線
遨游建站是全國高端網站建設公司,提供廣州企業網站建設/小程序開發/購物網站設計制作與競價托管代運營服務;秉承“一次建站,終身維護”的宗旨,有償提供互聯網技術支持。
本站部分圖片、音頻、視頻來源于網絡,版權歸原作者,如有侵權請聯系我們刪除。
主站蜘蛛池模板: 色天天综合色天天看| 天天色天天操综合网| 色综合网天天综合色中文男男| 激情综合色五月丁香六月亚洲| 国产成人综合亚洲亚洲国产第一页| 亚洲综合国产一区二区三区| 婷婷综合久久中文字幕蜜桃三电影| 亚洲av综合av一区二区三区| 伊人亚洲综合青草青草久热| 亚洲综合久久成人69| 亚洲国产精品成人AV无码久久综合影院 | 亚洲国产成人久久综合野外| 五月天激激婷婷大综合丁香| HEYZO无码综合国产精品| 狠狠色成人综合网图片区| 青青草原综合久久| 国产成人综合精品一区| 伊人久久成人成综合网222| 97久久久精品综合88久久| 久久―日本道色综合久久| 亚洲综合伊人久久大杳蕉| 国产成人综合久久精品免费| 麻豆久久婷婷五月综合国产| 亚洲AV日韩综合一区| 亚洲熟女综合一区二区三区| 国产精品亚洲综合久久| 狠狠色伊人亚洲综合网站色| 亚洲综合成人婷婷五月网址| 亚洲国产综合精品| 91探花国产综合在线精品| 亚洲国产品综合人成综合网站| 色欲久久久天天天综合网| 91精品国产综合久久四虎久久无码一级| 久久青青草原综合伊人| 色综合天天做天天爱| 色老头综合免费视频| 99久久国产综合精品麻豆| 综合人妻久久一区二区精品| 亚洲综合激情视频| 日本一道综合久久aⅴ免费| 狠狠久久综合伊人不卡|