标题 | ul和li 基本用法分析 |
内容 | 代码如下: 导航,少量数据表格,居中 <!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 href="http://localhost:1435/BookShop/index.aspx">首页 </a></li> <li><a href="http://localhost:1435/BookShop/hybooks.aspx">行业图书 </a></li> <li><a href="http://localhost:1435/BookShop/Clothing.aspx">服饰潮流 </a></li> <li><a href="http://localhost:1435/BookShop/">美容会所 </a></li> <li><a href="http://localhost:1435/BookShop/">妈咪宝贝 </a></li> <li><a href="http://localhost:1435/BookShop/">礼品书籍 </a></li> <li><a href="http://localhost:1435/BookShop/">新闻资讯 </a></li> <li><a href="http://localhost:1435/BookShop/">用户留言 </a></li> <li><a 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>去掉圆点</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </div> <!--横向的方法,如果要居中,需要设置宽度才可以,这个宽度要和里面的li总长度一样。--> <div> <ul> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </div> <!--制作表格的原理,ul宽度为300px,li宽度为100px,则成三列--> <div> <ul id="myul"> <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> |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。