ul和li 基本用法分析
发布时间：2020-03-21 22:32:47 所属栏目：MsSql教程 来源：站长网
导读：导航，少量数据表格，居中 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html xmlns= head titleul和li应用/title style type=text/css #menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;} #u
|
导航，少量数据表格，居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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://www.jb51.net/web/"http:/localhost:1435/BookShop/index.aspx">首页 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/hybooks.aspx">行业图书 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/Clothing.aspx">服饰潮流 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/">美容会所 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/">妈咪宝贝 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/">礼品书籍 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/">新闻资讯 </a></li> <li><a title="" href=http://www.jb51.net/web/"http:/localhost:1435/BookShop/">用户留言 </a></li> <li><a title="" href=http://www.jb51.net/web/"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> （编辑：开发网_商丘站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
相关内容
- sql-server – 在SQL Server 2005中创建一个新的db用户
- sql-server-2008 – SQL 2008每10分钟执行一次CHECKDB,任何
- Hyper-V 和 VMware 虚拟机软件共存的设置方法
- 至关心现代数码产品的朋友们一封信
- SQL Server误区：即时文件初始化特性可以在SQL Server中 a)
- 加密 – 如何在命令行上解密加密的sqlcipher数据库文件？
- 瑞星截获恶性病毒“别惹我”传染破坏力极强
- 如何为下面给出的查询编写等效的SQL case语句？
- sql-server – SSD(Raid 1)vs SAS(Raid 10)Sql Server硬件推
- HTML教程:收集的常用的HTML标签(4)
站长推荐
热点阅读