您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

浮动的4个案例详解：网易云音乐列表/导航，淘宝banner区，文字环绕

时间：02-02来源：作者：点击数：23

前言

了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。

这篇文，主要来写 4 个浮动布局的实例。为了让你更容易了解，我们这次只主要说大体布局，先不聊太多内部填充细节。

那就开始吧。

一、等宽布局（网易云音乐列表）

比如，这块内容就是一个 3 列， 4 列，5 列布局。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 父容器样式 */
      .parent-box {
        width: 1200px; /* 设置父容器宽度为 1200 像素 */
        margin: 20px auto; /* 设置父容器上下边距为 20px，左右自动居中 */
      }

      /* 子元素样式 */
      .parent-box div {
        width: 288.75px; /* 设置子元素宽度为 288.75 像素 */
        padding: 0px 20px;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率  */
        height: 200px; /* 设置子元素高度为 200 像素 */
        margin: 0px 15px 15px 0px; /* 设置子元素外边距为 0px 上边距，15px 右边距和下边距，0px 左边距 */
        background-color: #0f0; /* 设置子元素背景颜色为绿色 */
        float: left; /* 设置子元素左浮动 */
        line-height: 200px; /* 设置行高为 200px */
        text-align: center; /* 设置文本居中对齐 */
        font-size: 50px; /* 设置字体大小为 50px */
        color: #0000ff; /* 设置文字颜色为蓝色 */
      }

      /* 每隔 4 个子元素清除浮动 */
      .parent-box div:nth-child(4n) {
        margin-right: 0px; /* 清除每隔 4 个子元素的右外边距 */
      }

      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="parent-box clearfix">
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
    </div>
  </body>
</html>

效果如下：

重要的，我想说一下，这里面的几个数值的计算过程，如下：

我们给定方程为 3x（每个块中间的 margin） + 4y(元素的宽度，每行 4 块) = 1200px（每行的总宽度），假设 x（右侧的间距）= 15px，我们可以将 x 的值代入方程来求解 y 的值：

3 * 15 + 4y = 1200

45 + 4y = 1200

4y = 1200 - 45

4y = 1155

y = 1155 / 4

y = 288.75

因此，如果 x 是 15 的话，根据这个方程，y 大约是 288.75px，等宽布局大多就是如此算的。

以后你布局的时候，也要经常做这样的计算，所以，看懂这个，以后布局对于块之间的大体间距和宽高就心里有数了。

这种布局极其常见，比如淘宝商品列表的，京东的，都是。

二、等高布局（淘宝功能/banner区）

等高布局，就是这三块的高度是一样的，解决方法就是这 3 块的高度要计算好，然后给父级加超出隐藏overflow: hidden;。

比如，这块，

代码如下，图片我就直接从淘宝截图过来直接使用做粗略演示了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 以上为CSS重置部分 */
      .wrapper {
        width: 1000px;
        margin: 20px auto;
        background-color: #fff;
        height: 421px;
        overflow: hidden;
      }

      /* 左侧导航栏样式 */
      .left {
        float: left; /* 左浮动 */
        width: 25%;
        background-color: #f0f0f0;
      }

      /* 右侧侧边栏样式 */
      .right {
        float: right; /* 右浮动 */
        width: 25%;
      }

      /* 中间内容区域样式 */
      .middle {
        width: 500px;
        float: left; /* 左浮动 */
        padding: 33px 10px 10px 10px;
      }
    </style>
  </head>

  <body>
    <div class="wrapper clearfix">
      <div class="left">
        <img src="img/taobao-img1.png" alt="" />
      </div>
      <div class="middle">
        <img src="img/taobao-img2.png" alt="" />
      </div>
      <div class="right">
        <img src="img/taobao-img3.png" alt="" />
      </div>
    </div>
  </body>
</html>

效果如下：

京东的首屏也有这种布局。

三、横向导航菜单（网易云音乐导航）

我们把顶部的这些，可以叫做导航，因为是水平的，所以叫横向导航。现在我们就来写一下，并加上hover交互。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 以上为CSS重置部分 */
      .nav {
        background-color: #242424;
        border-bottom: 5px solid #c20c0c;
      }

      .nav li {
        float: left;
        background: #242424;
      }
      .nav li a {
        display: block;
        padding: 0px 20px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
      }
      .nav li.current a {
        color: #fff; /* 当前选中项的文字颜色 */
        background: #000 url(img/icon-top-arrow.png) no-repeat bottom -1px center; /* 背景图片上三角，背景图片的位置：底部-1像素 居中 */
      }
      .nav li:hover a {
        color: #fff;
        background-color: #000;
        transition: all 0.5s ease-in; /* css3属性，设置过渡效果，使元素在鼠标放上后，变化时更加平滑 */
      }
    </style>
  </head>
  <body>
    <div class="nav clearfix">
      <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>
      <li><a href="#">下载客户端</a></li>
    </div>
  </body>
</html>

效果如下：

四、word 中的文字环绕效果

比如，类似这样。

ok，那我们一起来看看这个效果的代码吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Floating Text around Image</title>
    <style>
      .container {
        width: 600px;
        margin: 10px auto;
      }
      .image {
        float: left; /* 让图片左浮动，文字不用任何设置 */
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="img/header1.png" alt="Image" class="image" />
      <p>周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。 2000 年，发行个人首张音乐专辑《Jay》 [26]。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002 年，举行“The One”世界巡回演唱会 [1]。2003 年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004 年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到 300 万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005 年，主演个人首部电影《头文字 D》 [314]，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖 [3] [315]。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。。。。。。再把前文复制一次。</p>
    </div>
  </body>
</html>