ul嵌套li，通过浮动实现盒子布局【黑马web前端】

更新时间:2019年07月26日 10时54分53秒来源:黑马程序员论坛

<!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>
         
         <div class="recommmend_list">
            <ul>
                  
                  <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>
         
         <div class="type_pic">
            <ul>
                  <li>
                     
                     <img src="img/01.png" alt="">
                     
                     <a href="#">我们来谈一场，不分手的恋爱</a>
                     
                     <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>

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

ul嵌套li，通过浮动实现盒子布局【黑马web前端】

相关阅读