|
你好，我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。 这篇文，主要来写 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，本文完。
|
