CSS布局示例 2 - 页面色块布局

已于 2022-04-14 17:41:50 修改
阅读量462 收藏 2
点赞数
分类专栏： 前端 文章标签： html css
于 2022-04-13 08:36:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734992/article/details/124139540
版权

参考自青岛思途java讲师臧老师
在这里插入图片描述
请添加图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>靓淘网-首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">

		</div>
		<!-- banner -->
		<div class="banner">
			<div class="container clear">
				<div class="lft fl"></div>
				<div class="rgt fr">
					<div class="tp"></div>
					<div class="btm clear">
						<div class="blft fl"></div>
						<div class="brgt fr">
							<div class="brgt-tp"></div>
							<div class="brgt-btm"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 品牌列表 -->
		<div class="brand">
			<div class="container">

			</div>
		</div>

		<!-- 导航入口 -->
		<div class="quickguide">
			<div class="container clear">
				<div></div>
				<div>
					<div class="tp"></div>
					<div class="btm"></div>
				</div>
				<div></div>
				<div>
					<div class="tp"></div>
					<div class="btm"></div>
				</div>
				<div></div>
			</div>
		</div>

		<!-- 红人穿搭 -->
		<div class="hrcd"></div>

		<!-- 广告条 -->
		<div class="ad ad1">
			<div class="container"></div>
		</div>

		<!-- 1楼 -->
		<div class="floor floor1">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 2楼 -->
		<div class="floor floor2">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 广告条 -->
		<div class="ad ad2">
			<div class="container"></div>
		</div>

		<!-- 3楼 -->
		<div class="floor floor3">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 4楼 -->
		<div class="floor floor4">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 广告条 -->
		<div class="ad ad3">
			<div class="container"></div>
		</div>

		<!-- 5楼 -->
		<div class="floor floor5">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 6楼 -->
		<div class="floor floor6">
			<div class="container">
				<div class="nav clear">
					<div class="fl clear">
						<div class="nav-lft"></div>
						<div class="nav-ctr">
							靓淘服装
						</div>
						<div class="nav-serach">
							热门搜索:
						</div>
						<div class="nav-rgt">
							<ul class="clear">
								<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>
					<div class="fr">
						<a href="#">查看全部></a>
					</div>
				</div>
				<div class="pics clear">
					<div class="lft fl"></div>
					<div class="rgt fr">
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="clear">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 友情链接 -->
		<div class="floor7">
			<div class="container">
				<div class="tp clear">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="btm clear">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>

		<!-- 页脚 -->
		<div class="footer">
			<div class="container">

			</div>
		</div>
	</body>
</html>

index.css

@charset "utf-8";

body,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: none;
}

/* 有效宽度 */
.container {
	width: 1100px;
	margin: 0 auto;
}

/* 公共样式 */
.fl {
	float: left;
}

.fr {
	float: right;
}

.clear::after {
	clear: both;
	display: block;
	content: "";
	width: 0;
}

a {
	color: #666;
	text-decoration: none;
}

.header {
	height: 130px;
	background-color: pink;
}

.banner {
	margin-top: 15px;
	height: 440px;
	background-color: gainsboro;
}

.banner .container {
	height: 100%;
}

.banner .lft {
	width: 200px;
	height: 100%;
	background-color: rgba(255, 0, 0, 0.4);
}

.banner .rgt {
	width: calc(100% - 200px);
	height: 100%;
}

.banner .rgt .tp {
	height: 40px;
	background-color: rgba(0, 0, 0, 0.5);
}

.banner .rgt .btm {
	height: calc(100% - 40px);
	background-color: bisque;
}

.banner .rgt .btm .blft {
	width: calc(100% - 180px);
	height: 100%;
}

.banner .rgt .btm .brgt {
	width: 180px;
	height: 100%;
}

.banner .rgt .btm .brgt>div {
	height: calc(50% - 5px);
	background-color: pink;
}

.banner .rgt .btm .brgt .brgt-tp {
	margin-bottom: 10px;
}

/* 品牌 */
.brand {
	height: 300px;
	margin-top: 15px;
}

.brand .container {
	height: 100%;
	background-color: pink;
}

.quickguide {
	height: 200px;
	padding-top: 15px;
}

.quickguide .container {
	height: 100%;
}

.quickguide .container>div {
	float: left;
	width: calc((100% - 40px) / 5);
	height: 100%;
	background-color: aquamarine;
	margin-right: 10px;
}

.quickguide .container>div:nth-child(2),
.quickguide .container>div:nth-child(4) {
	background-color: #fff;
}

.quickguide .container>div:last-child {
	margin-right: 0;
}

.quickguide .container>div .tp {
	height: calc(50% - 5px);
	background-color: aquamarine;
}

.quickguide .container>div .btm {
	margin-top: 10px;
	height: calc(50% - 5px);
	background-color: aquamarine;
}

.hrcd {
	height: 420px;
	margin-top: 15px;
	background-color: pink;
}

.ad {
	height: 100px;
	margin: 15px 0;
}

.ad .container {
	height: 100%;
	background-color: pink;
}

.floor {
	height: 480px;
	margin-bottom: 2px;
}

.floor .nav {
	height: 30px;
}

.floor .nav>div {
	height: 100%;
}

.floor .nav .fl {
	background-color: rgba(255, 0, 0, 0.4);
}

.floor .nav .fr {
	width: 130px;
	background-color: rgba(255, 0, 0, 0.4);
	text-align: center;
	line-height: 30px;
}

.floor .nav .fl>div {
	float: left;
	line-height: 30px;
}

.floor .nav .nav-lft {
	width: 5px;
	height: 100%;
	background-color: red;
}

.floor .nav .nav-ctr {
	margin-left: 10px;
}

.floor .nav .nav-serach {
	font-size: 12px;
	margin-left: 20px;
}

.floor .nav .nav-rgt>ul li {
	font-size: 12px;
	float: left;
	margin-left: 5px;
}

.floor .nav .fr {
	font-size: 12px;
}


.floor .pics {
	height: 440px;
	margin-top: 10px;
}

.floor .pics .lft {
	width: 250px;
	height: 100%;
	background-color: pink;
}

.floor .pics .rgt {
	width: calc(100% - 260px);
	height: 100%;
}

.floor .pics .rgt>div {
	height: calc(50% - 5px);
}

.floor .pics .rgt>div:first-child {
	margin-bottom: 10px;
}

.floor .pics .rgt>div>div {
	float: left;
	height: 100%;
	width: calc((100% - 30px) / 4);
	margin-right: 10px;
	background-color: pink;
}

.floor .pics .rgt>div>div:last-child {
	margin-right: 0;
}

.floor .pics .rgt>div:first-child>div:first-child {
	width: calc(50% - 5px);
}

.floor2,
.floor4,
.floor6 {
	margin-top: 15px;
}

.floor7 {
	height: 190px;
	padding-top: 15px;
}

.floor7 .container {
	height: 100%;
}

.floor7 .tp {
	height: 80px;
}

.floor7 .tp>div {
	height: 100%;
	float: left;
	width: calc((100% - 30px) / 4);
	margin-right: 10px;
	background-color: aquamarine;
}

.floor7 .tp>div:last-child {
	margin-right: 0;
}

.floor7 .btm {
	height: 100px;
	margin-top: 10px;
}

.floor7 .btm>div {
	height: 100%;
	float: left;
	width: calc((100% - 40px) / 5);
	margin-right: 10px;
	background-color: aquamarine;
}

.floor7 .btm>div:last-child {
	margin-right: 0;
}

.footer {
	margin-top: 15px;
	height: 130px;
	background-color: pink;
}
铅笔芯片
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS双飞翼布局的两种方式实现示例
12-30
先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... <body> <div class=div1></div> ...
div里两种颜色 css,div css颜色
weixin_29149931的博客
08-04 688
cssbody{padding: 0;margin: 0;background:#232323;}.box{position: relative;margin: auto;display: block;margin-top: 8%;width: 600px;height: 420px;background: none;}.part-1, .part-2, .part-3, .part-4, .pa...
html给一块区域加颜色,css3 – 我想添加一个背景颜色只有我的div的一部分
weixin_34405084的博客
07-01 2183
渐变不一定有褪色,这是一个误解,假设你希望你的div从顶部开始是70％的红色(实体),你的CSS将会是.background-image: linear-gradient(top,red,red 70%,transparent 70%,transparent 100%)两种方法：渐变：div{width:200px;height:200px;margin:50px auto;border:4px ...
CSS3学习随记-色块移动动画
Farst3807的博客
05-18 359
记录一下自己学习css和css3时做的小东西 具体效果为色块向右移动拼合成新形状，随后浮现出文字 <div class="div_all"> <div class="div_100px frames_a1_5s"></div> <div class="div_100px frames_a2_5s" style="position: relative;top: -100px;"></div> <div class="div_.
css布局的基本思想和步骤：CSS色块布局练习
夜行岛夫
01-06 2777
CSS其实就是为Html女士进行美颜化妆的。各式各样的CSS属性，能够将Html女士的上上下下装点漂亮。CSS能够做漂亮，除了对代码的理解，更需要较高的设计审美。 具体的CSS值例如width:100px;height:100px;是对具体Html内容做描述用的。这种代码式的描述是说给计算机浏览器的渲染内核（解析器）听的。 好比我们说一个苹果是红色的、是大苹果，是红富士的种类，价格是5元/个,等等。 如果拿装修房子做比喻，Html是房子的钢筋骨架，而CSS则是对房子样式风格的装修。装修水平高，设计品味好，则
制作好看又非常简单CSS样式的颜色块
热门推荐
qq_28499043的博客
08-25 1万+
在这里我将我最近学到的CSS样式的渐变颜色块记录下来
如何实现自适应宽高：CSS中计算属性问题width:calc(100% - 200px)
m0_60237095的博客
03-17 1053
如何实现自适应宽高：CSS中计算属性问题width:calc(100% - 200px)
CSS布局示例 1 - 页面色块布局
weixin_43734992的博客
04-13 1325
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <!-- 页头 --> <div c..
一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘
weixin_28984915的博客
12-28 340
什么是新拟态新拟态的英文名称是“Neumorphism”，也有人称为“Soft UI”。简单讲，新拟态是一种图形样式，其原理是通过模拟真实物体来为界面的UI元素赋予真实感。新拟态风格起源于dribbble，后面陆续被收录在2020设计趋势预测里面，在2019年的年末慢慢被大家熟知，讨论，重视起来。好吧以上都是我在网上抄的。这些是我在网上找的一些效果图：图片来自https://dribbble.co...
确定网页版式以及页面布局结构.pdf
10-09
网页设计中的版式和页面布局是构建用户友好且视觉吸引力强的网站的关键步骤。在这个过程中，HTML和CSS起着至关重要的作用，...附件中的"结构思路图.png"文件提供了更直观的布局示例，有助于进一步理解和应用这些概念。
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
firefox中div+css的外层背景色不见的解决方法
09-25
在网页设计中，`div+css`布局是常见的页面构建方式，它允许开发者通过CSS（层叠样式表）控制HTML元素的样式。然而，不同浏览器对CSS规则的解析可能存在差异，这导致了一些兼容性问题。在本文中，我们将讨论一个特定...
H5+CSS3.zip
08-06
css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、相对定位、固定定位，相对定位与绝对定位组合； css弹性盒模型：flex属性，横轴排列，纵轴排列，flex占比； 行内元素水平居中设置； 定...
CSS轻松实现色块标题标识
zgqtxwd的专栏
05-01 1360
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
CSS+DIV颜色表
CRGYSSE的博客
02-17 3529
爱丽丝蓝色：F0F8FF古典白色：FAEBD7浅绿色：00FFFF碧绿色：7FFFD4天蓝色：F0FFFF米色：F5F5DC桔黄色：FFE4C4黑色：000000白杏色：FFEBCD蓝色：0000FF蓝紫色：8A2BE2褐色：A52A2A实木色：DEB887刺恢蓝色：5F9EA0亮黄绿色：7FFF00巧克力色：D2691E珊瑚色：FF7F50失车菊色：6495ED谷丝色：FFF8DC深红色：DC1...
【css】伪元素before after增加自定义色块、图标
hzxOnlineOk的博客
01-05 2590
/ 必须有这个属性，否则不显示 display : inline-block;// 必须有，因为是行内元素 background-color : green;当我们使用有序()和无序()列表的时候，两者都会显示浏览器的默认样式。使用::before伪元素，我们则可以自定义显示样式，可以是图标或者其他的CSS样式都可以。
网页布局色块
dianmei3204的博客
05-29 605
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
HTML(9)——字体修饰
最新发布
m0_74386799的博客
06-19 742
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
div+css 页面布局--左中右版式
09-01
Div CSS 页面布局——左中右版式是一种常见的网页布局方式。在这种布局中，页面被分为左侧、中间和右侧三个区域，每个区域可以分别放置内容。 在HTML中，我们可以使用div元素来创建这样的布局。首先，我们需要设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值