ul和li的基本用法

最新推荐文章于 2024-08-29 19:45:09 发布

greatverve

最新推荐文章于 2024-08-29 19:45:09 发布

阅读量1.2k

点赞数

分类专栏： HTML学习文章标签： float menu 资讯

本文链接：https://blog.csdn.net/greatverve/article/details/3547611

版权

HTML学习专栏收录该内容

6 篇文章 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>
    <!--横向的方法,如果要居中，需要设置宽度才可以，这个宽度要和里面的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>
 