ul和li 基本用法分析
ul和li 基本用法分析
发布时间:2016-12-27 来源:查字典编辑
摘要:导航,少量数据表格,居中ul和li应用#menu{width:1000px;height:35px;float:right;margin:0...

导航,少量数据表格,居中

<!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>

<>

<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>

<>

<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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新XHTML学习
热门XHTML学习
网页设计子分类