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

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

281篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

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

这篇文,主要来写 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>

文字环绕效果通常在新闻、博客、文章类网站中比较常见,特别是在展示文章内容或者配图时。这种效果能够增加页面的视觉吸引力,使得页面内容更加丰富和生动。但在一些简洁、清爽风格的网站中,可能更偏向于简单的排版方式,不会过多使用文字环绕效果。

总结

其实呢,网页做多了,很多同类网站的布局都是比较相似的。比如,上述我举例的几个大网站。

最后,这里只是提供了一个布局小框架,很多内部细节需要多多练习,布局就是一个框嵌套一个框,认识到这点,网站布局就入门了。

熟能生巧,多多练习是王道。 OK,本文完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/565241.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在Windows10中管理自动维护?这里有详细步骤

为了使你的Windows操作系统和应用程序保持最新状态并保持良好的健康&#xff0c;有必要定期进行Windows维护。 ​快速的方法是启动自动维护&#xff0c;这样Windows就可以每天自动运行维护任务&#xff0c;包括软件更新、安全扫描和系统诊断。本文介绍了一个在Windows10中管理…

Arthas介绍及使用技巧

文章目录 简介能做什么&#xff1f; 使用下载并启动arthas选择应用 java 进程退出 arthas 常用查看命令帮助查看 dashboard通过 thread 命令来获取到线程的栈通过 jad 来反编译 Classwatch 查看方法出入参、sc 搜索类: 查看已加载类所在的包monitor 方法执行监控trace 方法内调…

HTML 如何实现一个带间隙的圆环

实际效果&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e634cedded9424d96fbe6d46f34f61a.png#pic_center 代码实现&#xff1a; HTML部分&#xff1a; <svg width"500" height"500" viewBox"0 0 100 100">&…

VideoComposer: Compositional Video Synthesis with Motion Controllability

decompose videos into three distinct types of conditions: textual conditions, spatial conditions, temperal conditions 条件的内容&#xff1a; a. textual condition: coarse grained visual content and motions, 使用openclip vit-H/14的text encoder b. spatial co…

Gradle的Tasks显示不全

前言&#xff1a; 在修改了app级别的build.gradle或者project的buid.gradle之后&#xff0c;在androidstudio的gradle中没有看到配置的task。原因是需要打开gradle的配置项 1.修改位置&#xff1a; 2.将划红线的这项配置的对勾去掉&#xff0c;然后点击”大象“同步

世界读书日:探索阅读的多样性样性——漫画、图解、图形化立体图书

在当今信息爆炸的时代&#xff0c;阅读已经不再局限于传统的书籍形式。随着科技的发展和文化的多样化&#xff0c;人们可以通过多种形式来获取知识和享受阅读的乐趣。从漫画、图解到图形化立体图书&#xff0c;每一种形式都有其独特的魅力&#xff0c;适合不同类型的读者和学习…

机器人实验室CNRS-AIST JRL, IRL介绍

一、背景 作为搞机器人方向的学生&#xff0c;必须时常关注国际上顶尖实验室的研究成果&#xff0c;以免自己做的方向out&#xff0c;除了大家耳熟能详的Boston Dynamics&#xff0c;还有许多非常厉害的机器人实验室值得我们关注&#xff0c;如日本的CNRS-AIST JRL, IRL实验室…

认识产品经理

一、合格的产品经理 1、什么是产品 解决某个问题的东西&#xff0c;称为产品 键盘可以打字&#xff0c;想喝水了可以用水壶&#xff0c;在超市想找一款扫把会有导购员服务 产品有颜色、大小等等区别&#xff0c;也有有形和无形的区别 2、什么是产品经理 想清楚怎么设计产品…

c++ - 类与对象 - explicit关键字 | static成员 | 友元 | 内部类 | 匿名对象

文章目录 一、 explicit关键字二、static成员三、友元四、内部类五、匿名对象 一、 explicit关键字 1、隐式类型转换 再进行隐式类型转换是会产生一个临时变量tmp,再用临时变量进行赋值。 如&#xff1a; double d 1.2; //再用 d 给 i 进行赋值时&#xff0c;会进行隐式类型…

【Web】AFCTF 2021 题解(部分)

目录 BABY_CSP search secret google authenticator 随便做做&#xff0c;环境是NSS上的 BABY_CSP CSP绕过_script-src self-CSDN博客 CSP指令值 *&#xff1a; 星号表示允许任何URL资源&#xff0c;没有限制&#xff1b; self&#xff1a; 表示仅允许来自同源&#xff…

数据结构-循环队列和循环双端队列的多角度实现

文章目录 1. 循环队列的数组形式实现2. 循环队列的链表实现3. 循环双端队列的数组形式实现4. 循环双端队列的链表实现 在力扣的题面如下 1. 循环队列的数组形式实现 其实循环队列的数组形式只有下面要注意的点,只要掌握了下面的这几点,代码层面上就没有什么问题了 用数组模拟的…

了解 Unity AI:从初学者到高级的综合指南

游戏中的AI是什么? 游戏中的人工智能是指利用人工智能技术使视频游戏中的非玩家角色和实体智能地行动、做出决策、对游戏环境做出反应,并提供引人入胜的动态游戏体验。什么是NPC? NPC 代表“非玩家角色”。NPC 是视频游戏、角色扮演游戏中不受人类玩家控制的角色。它们是计算…

Git 新手快速入门教程

一、什么是 Git 1. 何为版本控制 版本控制是一种记录文件变化的系统&#xff0c;可以跟踪文件的修改历史&#xff0c;并允许用户在不同版本之间进行比较、恢复或合并。它主要用于软件开发过程中管理代码的变更&#xff0c;但也可以应用于任何需要跟踪文件变更的场景。 版本控…

【学习笔记二十一】EWM仓库两步拣配配置及操作展示

一、EWM两步拣配配置 1.定义两步拣配的WPT ①第一步:标准WPT2020,目标仓位是2010两步拣配的仓位,并创建存储类型2010的两步拣配的仓位 ②第二步,标准WPT2010,目标仓位9020发货区和发货的仓位 2.定义确定仓库处理类型的控制标识 3.确定仓库处理类型 4.仓库编码级别需要允…

路由引入、路由策略、路由过滤实验

实验拓扑 实验思路 配置ip地址&#xff0c;配置RIP,OSPF;在R2上分别在RIP下引入OSPF&#xff0c;在OSPF下引入RIP;在R2上配置acl 2000,拒绝R4的业务网段&#xff0c;同时允许其他网段访问&#xff08;acl 2000 默认拒绝网段&#xff09;&#xff1b;通过配置路由过滤router-…

数据分析_数据分析思维(1)

数据分析_数据分析思维(1) 这篇文章具体的给大家介绍数据分析中最为核心的技术之一: 数据分析思维的相关内容。 一、数据分析的三种核心思维 作为新手数据分析师或数据运营, 在面对数据异常的时候, 好多小伙伴都会出现: “好像是A引起的”, “好像也和B渠道有关”, “也可能…

OpenCV与AI深度学习 | OpenCV如何读取仪表中的指针刻度

本文来源公众号“OpenCV与AI深度学习”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;OpenCV如何读取仪表中的指针刻度 最近遇到一个问题&#xff0c;如何读取仪表中的指针指向的刻度。 解决方法有多种&#xff0c;比如&#xff…

队列常规使用

文章目录 一、同步互斥改进方法二、队列实现同步三、队列实现互斥总结 一、同步互斥改进方法 在上一章同步互斥中&#xff0c;我们有两个实验。 同步实验&#xff1a; 我们创建了两个任务&#xff0c;任务1循环遍历一个比较大的数字&#xff0c;遍历完成后设置标志位置1。任务…

如何用网页绘制一个黑莓9900的键盘效果图

如何用网页绘制一个黑莓9900的键盘效果图 入了几个黑莓蓝牙键盘&#xff0c;出于喜好&#xff0c;想做一个跟实体键盘一模一样的网页界面。 最终的实现效果是这样的&#xff1a; 在线查看&#xff1a;http://kylebing.cn/tools/bb-keyboard 点击上面四个按键显示不同模型界面…

PDM在Office文档中的变量映射

在PDM数据管理软件中需要在数据卡中反馈出文件的一些属性信息&#xff0c;使得用户在不打开文件的情况下可以快速了解此文件的属性信息&#xff0c;或者需要用户在创建文档时填入相应内容&#xff0c;能够自动的填充到文档中&#xff0c;所以就需要在实施的过程中在SOLIDWORKS …