黑马程序员技术交流社区

标题: ul嵌套li，通过浮动实现盒子布局 [打印本页]
作者: ys1231    时间: 2019-7-24 01:05
标题: ul嵌套li，通过浮动实现盒子布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
/* 清除浮动 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }
/* 版心 */
        .w {
            width: 1200px;
            margin: 0 auto;
        }
/* 装三个大盒子的背景 */
        .recommend_bg {
            height: 532px;
            background: url(img/bg.jpg);
            /* 不让h3和背景一起下来 */
            overflow: hidden;
        }
/* 装三个大盒子的盒子，已经调用了版心.w */
        .recommend {
            height: 532px;
            /* 把h3撑下来 */
            margin-top: 50px;
            text-align: center;
        }
/* 设置第一个盒子h3 */
        .recommend h3 {
            font-size: 30px;
            text-align: center;
            color: #333333;
            background-color: red;
        }
/* 设置中间第二个盒子 */
        .recommmend_list {
            height: 80px;
            line-height: 80px;
            background-color: yellow;
        }
/* 把ul放到中间 */
        .recommmend_list ul {
            margin-left: 310px;
        }
/* 让中间的每一个li向左浮动 */
        .recommmend_list li {
            float: left;
        }
/* 设置li里面链接a的字体 */
        .recommmend_list li a {
            /* padding是挤开li之间的距离 */
            padding: 0 25px;
            font-size: 16px;
            color: #343434;
        }
/* 让鼠标经过li时，链接a颜色变成绿色 */
        .recommmend_list li a:hover {
            color: #31c27d;
        }
/* 让导航里第一个“为你推荐”变成绿色 */
        .recommmend_list .current a {
            color: #31c27d;
        }
/* 这是第三个盒子，设置装图片文字的盒子 */
        .type_pic {
            height: 330px;
            overflow: hidden;
            background-color: blue;
        }
/* 让盒子完整的放下5个装图片文字的li盒子，这个要是不懂就问我 */
        .recommend .type_pic ul{
            width: 1220px;
        }
/* 设置装图片和下面文字的li盒子的宽高 */
        .recommend .type_pic ul li {
            float: left;
            width: 224px;
            height: 300px;
            /* 让li盒子间有距离 */
            margin-right: 20px;
            background-color: pink;
        }
/* 设置图片下面链接a的字体 */
        .type_pic li a {
            font-size: 14px;
            color: #010101;
        }
/* 设置li里面装文字的p的文字 */
        .type_pic li p {
            font-size: 14PX;
            color: #9a9a9a;
        }
    </style>
</head>

<body>
    <div class="recommend_bg">
        <!-- 装三个盒子的大盒子 -->
        <div class="recommend w">
            <!-- 第一个盒子用h3装 -->
            <h3>歌单推荐</h3>
            <!-- 第二个盒子用无序列表ul嵌套li，li里面装链接a -->
            <div class="recommmend_list">
                <ul>
                    <!-- 这里面的current是让当前文字显示绿色 -->
                    <li class="current"><a href="#">为你推荐</a></li>
                    <li><a href="#">网络歌曲</a></li>
                    <li><a href="#">经典</a></li>
                    <li><a href="#">治愈</a></li>
                    <li><a href="#">官方歌单</a></li>
                    <li><a href="#">情歌</a></li>
                </ul>
            </div>
            <!-- 这是第三个盒子是用ul嵌套li，li里面装了一个图片，一个a链接，和一个文字p -->
            <div class="type_pic">
                <ul>
                    <li>
                        <!-- 插入图片 -->
                        <img src="img/01.png" alt="">
                        <!-- a链接 -->
                        <a href="#">我们来谈一场，不分手的恋爱</a>
                        <!-- 文字用p标签 -->
                        <p>播放量:7.3万</p>
                    </li>
                    <li>
                        <img src="img/02.png" alt="">
                        <a href="#">我们来谈一场，不分手的恋爱</a>
                        <p>播放量:7.3万</p>
                    </li>
                    <li>
                        <img src="img/03.png" alt="">
                        <a href="#">我们来谈一场，不分手的恋爱</a>
                        <p>播放量:7.3万</p>
                    </li>
                    <li>
                        <img src="img/04.png" alt="">
                        <a href="#">我们来谈一场，不分手的恋爱</a>
                        <p>播放量:7.3万</p>
                    </li>
                    <li>
                        <img src="img/05.png" alt="">
                        <a href="#">我们来谈一场，不分手的恋爱</a>
                        <p>播放量:7.3万</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2