DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> ul和li 基本用法分析
ul和li 基本用法分析
編輯:HTML和Xhtml     
導航,少量數據表格,居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ul和li應用</title>
<style type="text/css">
#menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;}
#ul li{list-style-type:none; clear:both;width:100px;display:inline; font-size: larger;}
#myul li{float:left;width:100px;}
</style>
</head>
<body>
<div id="menu">
<ul id="ul">
<li><a title="" href="http://localhost:1435/BookShop/index.aspx">首頁 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">行業圖書 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">服飾潮流 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">美容會所 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">媽咪寶貝 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">禮品書籍 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">新聞資訊 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">用戶留言 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">聯系我們 </a></li>
</ul>
</div>
<div>默認是豎排,並且帶圓點
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div>
<ul>
<li style="list-style-type:none;">去掉圓點</li>
<li style="display:inline;">hello</li>
<li>hello</li>
<li style="display:inline;">hello</li>
</ul>
</div>
<!--橫向的方法,如果要居中,需要設置寬度才可以,這個寬度要和裡面的li總長度一樣。-->
<div style="text-align:center;background:#def">
<ul style="width:150px;background:#eee;">
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
</ul>
</div>
<!--制作表格的原理,ul寬度為300px,li寬度為100px,則成三列-->
<div style="text-align:center;background:#eef">
<ul id="myul" style="width:300px;background:#eee">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved