HTML-div+ul+li经典布局案例

最新推荐文章于 2024-04-23 19:20:46 发布

StevenAC

最新推荐文章于 2024-04-23 19:20:46 发布

阅读量1.4w

点赞数 5

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/StevenAC/article/details/77095064

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用div+ul+li可以实现非常美观的布局，而且控制CSS样式的时候非常的方便；

简单案例1

先上效果图：
简单案例1

实现的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>div-ul-li经典布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            /*去掉所有元素的边距*/
            /*可以去掉ul 中 li 的左边距，使之美观*/
            margin:0;
            padding:0;
        }
        #div-box1{
            width: 500px;
            height: 600px;
            border:1px solid silver;
            margin:20px auto 0 auto;
        }
        #div-box1 .faceul{
            width: 400px;   
            height: 550px;
            /*使 ul 自动水平居中*/
            margin:20px auto 0 auto;
            border:1px solid green;
        }
        #div-box1 li{
            /*去掉 li 前边的样式*/
            list-style-type:none;
            width: 100px;
            height: 120px;          
            border:1px solid red;
            /*为了让 li 放一排，使用左左浮动*/
            float:left; 
            margin:10px 0 0 10px;       
        }
        .faceul img{
            width: 80px;
            margin: 10px 0 0 10px;
        }
        .faceul span{
            margin-left: 35px;
            display: block;         
        }
        .faceul a:link{
            color:black;
            text-decoration:none;
        }
        .faceul a:hover{
            color:red;
            text-decoration:underline;
        }
    </style>
</head>
<body>
<div id="div-box1">
    <ul class="faceul">
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
        <li><img src="union.jpg"><span><a href="#">宇宙</a></span></li>
    </ul>
</div>
</body>
</html>