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

已于 2022-04-13 16:54:39 修改
阅读量1.3k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： css html
于 2022-04-13 08:33:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734992/article/details/124139503
版权

参考自青岛思途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 class="info">
				<div class="container">
					<div class="left"></div>
					<div class="right">
						<ul>
							<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 class="clear"></div>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="logo">
				<div class="container">
					<div class="logo-lft"></div>
					<div class="logo-ctr"></div>
					<div class="logo-rgt"></div>
				</div>
			</div>
		</div>

		<!-- banner -->
		<div class="banner">
			<div class="nav">
				<div class="container">
					<ul>
						<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>
						<li><a href="#">请注册</a></li>
						<div class="clear"></div>
					</ul>
				</div>
			</div>
			<div class="pic">
				<div class="container">
					<div class="lft"></div>
					<div class="ctr"></div>
					<div class="rgt">
						<div class="top"></div>
						<div class="bottom"></div>
					</div>
				</div>
			</div>
		</div>


		<!-- 一楼 -->
		<div class="floor1">
			<div class="container">
				<div></div>
			</div>
		</div>


		<!-- 二楼 -->
		<div class="floor2">
			<div class="container">
				<div class="wrapper">
					<div class="item">
						<div></div>
					</div>
					<div class="item">
						<div>
							<div class="top"></div>
							<div class="top"></div>
						</div>
					</div>
					<div class="item">
						<div></div>
					</div>
					<div class="item">
						<div>
							<div class="top"></div>
							<div class="top"></div>
						</div>
					</div>
					<div class="item">
						<div></div>
					</div>
				</div>
			</div>
		</div>


		<!-- 三楼 ,红人穿搭-->
		<div class="floor3">
			<div class="container">
				<div class="title">
					<div class="main-title">红人穿搭</div>
					<div class="list-title"></div>
					<div class="more"></div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="wrapper">
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>

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

		<!-- 四楼 多次重复-->
		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

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

		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="ad">
			<div class="container">
				<div></div>
			</div>
		</div>

		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="floor4">
			<div class="container">
				<div class="title">
					<div class="main-title">靓淘服装</div>
					<div class="list-title">
						<div>热门搜索：</div>
						<ul>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li>风衣</li>
							<li class="last">风衣</li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="more">
						<div>查看全部</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="lft"></div>
					<div class="rgt">
						<div class="top">
							<div class="wrapper">
								<div class="item big">
									<div></div>
								</div>

								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="bottom">
							<div class="wrapper">
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="item">
									<div></div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 五楼 -->
		<div class="floor5">
			<div class="container">
				<div class="top">
					<div class="wrapper">
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="bottom">
					<div class="wrapper">
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="item">
							<div></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 页脚 -->
		<div class="footer">
			<div class="top"></div>
			<div class="mid"></div>
			<div class="bottom"></div>
		</div>
	</body>
</html>

index.css

@charset "utf-8";

body {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

.clear {
	clear: both;
}

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

.header .info {
	height: 30px;
	border-bottom: 1px solid #ccc;
}

.header .info .left {
	width: 150px;
	height: 100%;
	float: left;
	background-color: #87CEEB;
}

.header .info .container {
	height: 100%;
}

.header .info .right {
	height: 100%;
	float: right;
	background-color: #87CEEB;
}

.header .info .right ul {
	height: 100%;
}

.header .info .right ul li {
	float: left;
	height: 100%;
	margin-right: 5px;
}

.header .info .right ul li a {
	display: inline-block;
	/* 行内块状元素 */
	height: 100%;
	line-height: 30px;
	/*左右边内距  */
	padding-left: 10px;
	padding-right: 10px;
}

.header .logo {
	height: 80px;
	margin-top: 10px;
}

.header .logo .container {
	height: 100%;
}

.header .logo .container .logo-lft {
	float: left;
	height: 100%;
	width: 200px;
	background-color: pink;
	margin-right: 10px;
}

.header .logo .container .logo-ctr {
	float: left;
	height: 100%;
	width: 500px;
	background-color: pink;
}

.header .logo .container .logo-rgt {
	float: right;
	height: 100%;
	width: 200px;
	background-color: pink;
}

.banner {
	margin-top: 10px;
}

.banner .nav {
	background-color: black;
	height: 30px;
}

.banner .pic {
	height: 280px;
	background-color: antiquewhite;
}

.banner .nav .container {
	height: 100%;
}

.banner .nav .container ul {
	height: 100%;
}

.banner .nav .container ul li {
	height: 100%;
	margin-right: 40px;
	float: left;
}

.banner .nav .container ul li a {
	display: inline-block;
	height: 100%;
	line-height: 30px;
	padding-left: 30px;
	padding-right: 30px;
	color: #ddd;
}

.banner .pic .container {
	height: 100%;
	position: relative;
}

.banner .pic .container .lft {
	height: 100%;
	width: 160px;
	float: left;
	background-color: pink;
}

.banner .pic .container .ctr {
	position: absolute;
	left: 160px;
	right: 150px;
	top: 0;
	height: 100%;
	background-color: darkorange;
}

.banner .pic .container .rgt {
	float: right;
	height: 100%;
	width: 150px;
	background-color: #fff;
}

.banner .pic .container .rgt .top {
	height: 135px;
	margin-bottom: 10px;
	width: 100%;
	background-color: pink;
}

.banner .pic .container .rgt .bottom {
	height: 135px;
	width: 100%;
	background-color: pink;

}

.floor1 .container {
	height: 100%;
}

.floor1 .container>div {
	height: 200px;
	background-color: pink;
	margin-top: 10px;
}


.floor2 {
	height: 150px;
	padding-top: 10px;
}

.floor2 .container {
	height: 100%;
}

.floor2 .container .wrapper {
	height: 100%;
	margin-right: -10px;
}

.floor2 .container .wrapper .item {
	width: 20%;
	height: 100%;
	float: left;
}

.floor2 .container .wrapper .item>div {
	margin-right: 10px;
	background-color: pink;
	height: 100%;
}

.floor2 .container .wrapper .item:nth-child(2)>div {
	background-color: #fff;
}

.floor2 .container .wrapper .item:nth-child(4)>div {
	background-color: #fff;
}

.floor2 .container .wrapper .item .top {
	height: 70px;
	background-color: pink;
	margin-bottom: 10px;
}

.floor2 .container .wrapper .item .bottom {
	height: 70px;
	background-color: pink;
}

.floor3 {
	height: 280px;
	padding-top: 10px;
}

.floor3 .container {
	height: 100%;
}

/*  */
.title {
	border-left: 5px solid red;
	height: 19px;
	margin-bottom: 10px;
}

.title .main-title {
	float: left;
	height: 100%;
	padding-left: 3px;
	font-weight: bold;
}

.title .list-title {
	float: left;
	height: 100%;
	padding-left: 5px;
}

.title .more {
	float: right;
	height: 100%;
}

.floor3 .container .content {
	height: 100%;
}

.floor3 .container .content .wrapper {
	height: 100%;
	margin-right: -10px;
}

.floor3 .container .content .wrapper .item {
	height: 100%;
	width: 20%;
	float: left;
}

.floor3 .container .content .wrapper .item>div {
	margin-right: 10px;
	height: 250px;
	background-color: pink;

}

/*  广告条*/
.ad {
	margin-top: 10px;
}

.ad .container {
	height: 100%;
}

.ad .container>div {
	height: 60px;
	background-color: pink;
}

.title .list-title>div {
	float: left;
}

.title .list-title ul li {
	float: left;
	margin-right: 10px;
	border-right: 1px solid #666;
	padding-right: 10px;
}

.title .list-title ul {
	width: 500px;
}

.title .list-title ul .last {
	border-right: 0;
}

.floor4 {
	margin-top: 10px;
}

.floor4 .container .content {
	height: 280px;
	position: relative;
	margin-top: 10px;
}

.floor4 .container .content .lft {
	float: left;
	width: 200px;
	background-color: skyblue;
	height: 100%;
}



.floor4 .container .content .rgt {
	position: absolute;
	left: 210px;
	top: 0;
	right: 0;
	height: 100%;
}

.floor4 .container .content .rgt .top {
	height: 135px;
	margin-bottom: 10px;

}

.floor4 .container .content .rgt .bottom {
	height: 135px;
	margin-bottom: 10px;
}

.floor4 .container .content .rgt .wrapper {
	margin-right: -10px;
	height: 100%;
}

.floor4 .container .content .rgt .wrapper .item {
	height: 100%;
	float: left;
	width: 25%;
}

.floor4 .container .content .rgt .wrapper .big {
	width: 50%;
}

.floor4 .container .content .rgt .wrapper .item>div {
	margin-right: 10px;
	height: 100%;
	background-color: darkgoldenrod;
}


.floor5 {
	margin-top: 20px;
	height: 200px;
}

.floor5 .container {
	height: 100%;
}

.floor5 .container .top {
	height: 90px;
}

.floor5 .container .top .wrapper {
	margin-right: -10px;
	height: 100%;
}

.floor5 .container .top .wrapper .item {
	height: 100%;
	width: 25%;
	float: left;
}

.floor5 .container .top .wrapper .item>div {
	background-color: pink;
	height: 100%;
	margin-right: 10px;
}

.floor5 .bottom {
	height: 90px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.floor5 .bottom .wrapper {
	margin-right: -10px;
	height: 100%;
}

.floor5 .bottom .wrapper .item {
	height: 100%;
	width: 20%;
	float: left;
}

.floor5 .bottom .wrapper .item>div {
	background-color: firebrick;
	height: 100%;
	margin-right: 10px;
}

.footer {
	height: 90px;
	margin-top: 20px;
}

.footer .top {
	height: 30px;
	background-color: beige;
}

.footer .mid {
	height: 10px;
	background-color: darkblue;
}

.footer .bottom {
	height: 50px;
	background-color: cadetblue;
}
铅笔芯片
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS进阶一（CSS+DIV的页面布局---浮动与定位）
qq_44872688的博客
10-15 2210
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
CSS布局示例 2 - 页面色块布局
weixin_43734992的博客
04-13 467
index.css <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>靓淘网-首页</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <!-- 头部 --> <..
CSS基础教程：颜色（二）
m0_65012566的博客
05-06 321
此颜色值使用rgb()属性指定。它需要三个值，红色、绿色和蓝色各一个。值可以是0到255之间的整数或百分比。注意：所有浏览器都不支持颜色的rgb()属性，因此建议不要使用它。以下是使用RGB值显示几种颜色的示例。如下示例：#rgbvaluergb;padding;
CSS 学习笔记 - 网格布局（栅格系统）
灵台方寸山斜月三星洞
10-06 4079
CSS 学习笔记 - 网格布局（栅格系统）开启网格模式名词解释属性说明容器属性内容元素属性效果展示参考资料 网格布局（栅格系统） 官方解释：CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。 像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。 个人理解： 要说这个栅格系统玩过地图编辑器的同学
CSS布局案例 7-51 垂直手风琴效果
dpl12的博客
05-04 495
文章目录前言实现过程1.步骤2.代码3.效果 前言 使用css3实现垂直手风琴效果。 实现过程 1.步骤 垂直手风琴效果实现步骤: 1、一个区域内设置三个小区域，小区域内设置一个a标签、向下箭头和p标签内容，实现点击a标签显示内容 2、a标签设置锚点链接，链接到小区域，使用target选择器对被使用的目标元素设置样式 3、a标签设置渐变效果（被悬停时和被锚点链接使用时）；p标签内容设置超出隐藏滚动条效果和初始隐藏点击打开效果；三角箭头使用边框制作，点击时设置可见方向 2.代码 &lt
DIV+CSS页面布局
m0_62943934的博客
12-21 2055
现在所有的主流的、大型的 IT 企业的网站布局几乎都采用 DIV、CSS技术，有些甚至采用 DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善用户的体验。DIV+CSS组合技术完全有别于传统的表格排版习惯。通过DIV+CSS实现页面元素精确控制，网站风格、代码维护与更新变得卡分容易，甚至是页面的布局结构都可以通过修改CSS属性来重新定位。DIV+CSS布局的步骤大致为: 首先整体上对页面进行分块，接着按照分块设计使用div。
7个带有示例的CSS网格布局实例
前端达人
05-13 1039
英文 |https://betterprogramming.pub/top-7-css-grid-layout-concepts-with-examples-18c85e4d0b27翻译...
（html+css）小练习-盒子布局
少年的欢喜的博客
10-21 2277
测试样例： html文件设置框架 <div class="container w"> <div class="left"> <a href="#"></a> </div> <div class="right"> <ul> <li><a href="#"></a>
分享 42 个常用的 CSS 布局代码片段，建议收藏
前端达人
03-16 2358
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为...
CSS--网页样式布局(一)
CS_GaoMing的博客
03-17 722
CSS样式-布局！
CSS双飞翼布局的两种方式实现示例
12-30
先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... <body> <div class=div1> <div class=div2></...
纯CSS3彩色方块波浪动画特效特效代码
03-20
最后，要将这些方块组织成波浪形状，可以利用CSS布局技术，如Flexbox或Grid。例如，使用Flexbox可以轻松控制方块的排列： ```css .container { display: flex; flex-wrap: wrap; } ``` 这样，我们就可以在`...
不对称的流式布局
06-29
"win8风格的流式布局"可能指的是受到Windows 8操作系统启发的设计风格，这种风格的特点是使用大块的色块和磁贴式设计。在网页设计中，这可以通过创建响应式的网格系统，每个单元格都像磁贴一样填充内容，实现动态...
CSS应用---透明圆角
05-24
例如，创建一个背景色为半透明的红色块： ```css .box { background-color: rgba(255, 0, 0, 0.5); } ``` 结合这两个特性，可以创建出具有透明圆角的元素，如用于卡片或者按钮的设计。在实际项目中，还需要考虑...
纯CSS3积木方块加载动画特效
06-24
虽然CSS3动画提供了丰富的视觉效果，但过度使用可能会影响页面性能。优化方法包括使用硬件加速（通过`will-change`属性）、减少不必要的动画元素数量、合理设置动画的持续时间和延迟时间，以及使用`...
CSS 的工作原理
07-25 1321
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
HTML-01.新浪新闻-标题-排版
程小白的博客
08-02 199
-- 编码字符集为UTF-8 -->-- 设置浏览器的兼容性 -->焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻-- 1.图片标签：src：指定图像的url（绝对路径/相对路径）width：图像的宽度 [像素（单位px）/相对于父元素（
【中科院1区】Matlab实现天鹰优化算法AO-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
使用Div+CSS进行网页布局设计的入门教程
"网页设计基础Div+CSS布局入门教程，适合初学者了解和掌握网页设计中的Div+CSS布局技术。教程强调HTML基础知识的重要性，并通过实例讲解如何构思、规划和实现网页布局。" 在这个网页设计基础Div+CSS布局入门教程中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值