前端(二）移动端布局实例及常用css列表-学习笔记整理

最新推荐文章于 2024-05-05 14:27:26 发布

吃一口桃酥

最新推荐文章于 2024-05-05 14:27:26 发布

阅读量958

点赞数 2

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/sinat_28015305/article/details/106038946

版权

笔记专栏收录该内容

73 篇文章 37 订阅

订阅专栏

移动端页面布局

需求：以如下天天生鲜首页效果图为例，制作相应的静态页面
在这里插入图片描述

项目目录如下：

├─css
├─images
├─js
└─index.html

目录结构说明：
css中用于存放相应的css文件，通过link标签引入到html页面

	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">

reset.css

body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,form,select{
	margin:0;
	padding:0;
}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
}

ul{
	list-style:none;
}

a{
	text-decoration:none;
}
img{
	border:0;
}
em{
	font-style:normal;
}
.clearfix:before,.clearfix:after{
	content: "";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	zoom:1;
}
.fl{
	float: left;
}
.fr{
	float: right;
}

reset.css中是清除原有html页面布局的样式，main.css是主要显示页面的样式。

images中存放页面所需图片等资源。

js中存放相应的js代码，这里只用到了rem布局所需要的set_root.js文件，通过script标签引入

<script type="text/javascript" src="./js/set_root.js"></script>

set_root.js

(function(){
	var calc = function(){
		var docElement = document.documentElement;
		var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
		docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
	}
	calc();
	window.addEventListener('resize',calc);
})();

结合流体布局和rem布局制作天天生鲜移动端首页页面

使用基于rem的布局方式制作天天生鲜移动端首页页面

index.html

<!DOCTYPE html>
<html lang="en" style="font-size:20px">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/main.css">
	<script type="text/javascript" scr="./js/set_root.js"></script>
	<title>天天生鲜-首页</title>
</head>
<body>
	<div class="main_wrap">
		<!-- 顶部 -->
		<div class="header clearfix">
			<a href="#" class="logo"><img src="./images/logo.png" alt="天天生鲜logo"></a>
			<a href="#" class="search"></a>
		</div>
		<!-- 中间 -->
		<div class="center_con">
			<div class="slide">
				<img src="./images/slide.jpg" alt="幻灯片">
			</div>
			
			<div class="menu_con clearfix">
				<!-- ul.menu>(li>a+h2{水果})*8 -->
				<ul class="menu">
				<li>
					<a href="#"></a>
					<h2>水果</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>海鲜</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>肉类</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>禽蛋</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>蔬菜</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>速冻</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>热卖</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>新品</h2>
				</li>
			</ul>
			</div>

			<div class="common_model clearfix">
				<div class="common_title">
					<h3>新鲜水果</h3>
					<a href="#" alt="more">更多&gt;</a>
				</div>
				<a href="#" class="banner"><img src="./images/banner.jpg" alt="banner"></a>
				<ul class="goods_list">
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红富士苹果</h4>
						<p class="unit">12/提</p>
						<p class="price">￥68.00</p>
						<a href="#" class="chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红富士苹果</h4>
						<p class="unit">12/提</p>
						<p class="price">￥68.00</p>
						<a href="#" class="chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红富士苹果</h4>
						<p class="unit">12/提</p>
						<p class="price">￥68.00</p>
						<a href="#" class="chart"></a>
					</li>
				</ul>
			</div>

		</div>

		<!-- 底部 -->
		<ul class="footer">
			<li><a href="#"></a>
				<h2>首页</h2>
			</li>
			<li><a href="#"></a>
				<h2>分类</h2>
			</li>
			<li><a href="#"></a>
				<h2>购物车</h2>
			</li>
			<li><a href="#"></a>
				<h2>我的</h2>
			</li>
		</ul>
			
	</div>
	
</body>
</html>

main.css

/*整体*/
.main_wrap{
	position:absolute;
	/*background-color:gold;*/

	/*通过以下方式，人为将整个容器拉至浏览器大小，采用绝对定位相对于body来做，
	该布局为上下部固定，中间滚动，因此需要采用绝对定位，否则微信等下部会无效*/
	left:0;
	right:0;
	top:0;
	bottom:0;
}
/*顶部*/
.header{
	height:2.5rem;
	background-color:#37ab40;
	position:relative;
}
.logo{
	display:block;
	width:4.45rem;
	height:1.8rem;
	margin:0.35rem auto 0;
}
.logo img{
	/*图片设置其中一个值宽/高,另一值会根据容器大小等比缩放*/
	width:100%;
}
.search{
	width:1.35rem;
	height:1.35rem;
	position:absolute;
	right:0.75rem;
	top:0.6rem;
	/*background-color:gold;*/
	background:url(../images/icons.png) no-repeat ;
	background-size:3.0rem 42.0rem;
}

/*中间滚动区域样式*/
.center_con{
	/*相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。*/
	position:absolute;
	left:0;
	right:0;
	top:2.5rem;
	bottom:2.5rem;
	background-color:#efefef;
	/*若没有overflow 下方固定栏也会一起滚动
	auto是保证中间部分有滚动条,但是auto也会出现横向滚动条
	改进方法是x,y分别设置overflow 只自动出现y轴滚动条*/
	overflow-y:auto;
	overflow-x:hidden;

	padding-bottom:0.5rem;
}
.slide{
	height:7.0rem;
	
}
.slide img{
	width:100%;
}
.menu_con{
	height:9.25rem;
	background-color:#fff;
	margin-top:0.5rem;
	overflow:hidden;
}
.menu_con .menu{
	width:18rem;
	height:8.375rem;
	margin:0.875rem 0 0 1.375rem;
	/*background-color:gold;*/
}
.menu_con .menu li{
	width:2.8rem;
	height:4.05rem;
	margin-right:1.625rem;
	float:left;
	/*background-color:pink;*/
}

.menu a{
	display:block;
	height:2.8rem;
	background:url(../images/icons.png) left -3.025rem no-repeat;
	background-size:3.0rem 42.0rem;
}
/*nth-child(n) 匹配第n个li下面的a*/
.menu li:nth-child(2) a{
	background-position:left -6.025rem;
}
.menu li:nth-child(3) a{
	background-position:left -9.025rem;
}
.menu li:nth-child(4) a{
	background-position:left -12.025rem;
}
.menu li:nth-child(5) a{
	background-position:left -15.025rem;
}
.menu li:nth-child(6) a{
	background-position:left -18.025rem;
}
.menu li:nth-child(7) a{
	background-position:left -21.025rem;
}
.menu li:nth-child(8) a{
	background-position:left -24.025rem;
}
.menu h2{
	height:1.3rem;
	text-align:center;
	/*文字大小不需要转换rem,可以用响应式布局调整大小*/
	font:bold 13px/1.25rem "Microsoft Yahei";
	color:#666;
}
.common_model{
	height:17.25rem;
	background-color:#fff;
	margin-top:0.5rem;
}
.common_title{
	width:17.75rem;
	height:0.9rem;
	/*background-color:gold;*/
	margin:0.8rem auto 0;
}
.common_title h3{
	float:left;
	height:0.9rem;
	font:bold 15px/0.9rem "Microsoft Yahei";
	color:#fbc83d;
	border-left:0.25rem solid #fbc83d;
	text-indent:0.4rem;
}
.common_title a{
	float:right;
	font:normal 12px/0.9rem "Microsoft Yahei";
	color:#7f7f7f;
}
.banner{
	display:block;
	width:17.75rem;
	height:4.5rem;
	margin:0.5rem auto 0;
}
.banner img{
	height:100%;
}
.goods_list{
	width:17.75rem;
	height:9.325rem;
	/*background-color:gold;*/
	margin:0.5rem auto 0;
}
.goods_list li{
	width:5.9rem;
	height:9.325rem;
	/*background-color:pink;*/
	float:left;
	border-right:1px solid #e7e7e7;
	/*解决最后一个盒子放不下的问题*/
	box-sizing: border-box;
	position:relative;
}
.goods_list li:last-child{
	/*解决最后一个盒子右边没有边线的问题*/
	border-right:0;
}
.goods_link{
	display:block;
	width:4.5rem;
	height:4.5rem;
	margin:0.375rem auto 0;
}
.goods_link img{
	width:100%;
}
.goods_list h4{
	font-size:15px;
	color:#666;
	font-weight: normal;
	line-height:0.75rem;
	font-family:"Microsoft Yahei";
	width:5.0rem;
	margin:37px auto 0;

	/*文字过多自动省略,显示省略号*/
	/*文字过多后裁切*/
	overflow:hidden;
	/*设置文字不换行*/
	white-space:nowrap;
	/*设置文字超出后显示虚线ellipsis*/
	text-overflow:ellipsis;
}
.unit{
	width:5.0rem;
	font:normal 12px/12px "Microsoft Yahei";
	color:#bbb;
	margin:0.8rem auto 0;
}
.price{
	width:5.0rem;
	font:normal 12px/12px "Microsoft Yahei";
	color:#f40;
	margin:0.5rem auto 0;
}
.chart{
	width:1.7rem;
	height:1.7rem;
	position:absolute;
	right:0.675rem;
	bottom:0;
	background:url(../images/icons.png) left -27rem no-repeat;
	background-size:3.0rem 42.0rem;
}

/*底部*/
.footer{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:2.5rem;
	background-color:#fff;
}
.footer li{
	width:25%;
	height:2.5rem;
	float:left;

}
.footer a{
	display:block;
	width:1.3rem;
	height:1.3rem;
	margin:0.3rem auto 0;
	background:url(../images/icons.png) left -30.0rem no-repeat;
	background-size:3.0rem 42.0rem;
}
.footer li:nth-child(2) a{
	background-position:left -33rem;
}
.footer li:nth-child(3) a{
	background-position:left -36rem;
}
.footer li:last-child a{
	background-position:left -39rem;
}
.footer h2{
	font:normal 12px/0.8rem "Microsoft Yahei";
	color:#949392;
	text-align:center;
}

使用基于流体布局方式制作天天生鲜移动端首页页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天天生鲜-首页</title>	
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<div class="main_con">
		<header class="clearfix">
			<div class="logo"><img src="images/logo.png"></div>
			<a href="#" class="search"></a>
		</header>

		<div class="center_scroll">
			<div class="slide cleafix">
				<ul class="slide_con">
					<li><img src="images/slide.jpg"></li>
				</ul>
				<!-- 多增加了幻灯片中用于显示页码的小圆点 -->
				<ul class="points">
					<!-- 激活，即当前页的小圆点样式不同 -->
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>

			<ul class="menu clearfix">
				<li>
					<a href="#"></a>
					<h3>水果</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>海鲜</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>肉类</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>禽蛋</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>蔬菜</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>速冻</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>热卖</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>新品</h3>
				</li>
			</ul>

			<div class="goods_model clearfix">
				<div class="goods_tilte clearfix">
					<h3 class="fl">新鲜水果</h3>
					<a href="#" class="fr">更多 ></a>
				</div>
				<div class="goods_banner"><img src="images/banner.jpg"></div>
				<ul class="goods_list clearfix">
					<li>
						<div class="goods_pic"><img src="images/goods.jpg"></div>
						<div class="goods_detail">
							<dl>
								<dt>新西兰皇家加力苹果</dt>
								<dd class="goods_unit">12个/提</dd>
								<dd class="goods_price">¥68.00</dd>
							</dl>
							<a href="#" class="add_to_cart"></a>
						</div>
					</li>

					<li>
						<div class="goods_pic"><img src="images/goods.jpg"></div>
						<div class="goods_detail">
							<dl>
								<dt>新西兰皇家加力苹果</dt>
								<dd class="goods_unit">12个/提</dd>
								<dd class="goods_price">¥68.00</dd>
							</dl>
							<a href="#" class="add_to_cart"></a>
						</div>
					</li>

					<li>
						<div class="goods_pic"><img src="images/goods.jpg"></div>
						<div class="goods_detail">
							<dl>
								<dt>新西兰皇家加力苹果</dt>
								<dd class="goods_unit">12个/提</dd>
								<dd class="goods_price">¥68.00</dd>
							</dl>
							<a href="#" class="add_to_cart"></a>
						</div>
					</li>
				</ul>
			</div>

		</div>
		<footer>
			<ul class="foot_list">
				<li>
					<a href="#"></a>
					<h3>首页</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>分类</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>购物车</h3>
				</li>
				<li>
					<a href="#"></a>
					<h3>我的</h3>
				</li>
			</ul>			
		</footer>
	</div>
</body>
</html>

main.css

/* 头部样式 */

.main_con{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0
}

header{
	width:100%;
	height:50px;
	background-color:#37ab40;
	position:relative;
}

.logo{
	width:88px;
	height:35px;
	margin:7px auto 0;
}
.logo img{
	width:100%;
}

.search{
	width:28px;
	height:26px;
	background:url(../images/icons.png) left -639px no-repeat;
	background-size:58px 670px;
	display:block;
	position:absolute;
	right:14px;
	top:12px;
}
/* 尾部样式 */
footer{
	width:100%;
	height:50px;
	background-color:rgba(255,255,255,0.6);
	position:absolute;
	left:0;
	bottom:0;
	z-index:10000
}

.foot_list{
	height:50px;
	text-align: center;
	font-size:0px;
}

.foot_list li{
	width:25%; 
	height:40px; 
	display:inline-block;
	margin-top:5px;
}
.foot_list li a{
	width:26px;
	height:26px;
	display:block;
	margin:0 auto;
}
.foot_list li h3{
	height:14px;
	line-height:14px;
	text-align:center;
	font-size:12px;
	color:#949392;
}


.foot_list li:nth-child(1) a{
	background:url(../images/icons.png) left -579px no-repeat;
	background-size:58px 670px;
}
.foot_list li:nth-child(3) a{
	background:url(../images/icons.png) left -518px no-repeat;
	background-size:58px 670px;
}
.foot_list li:nth-child(2) a{
	background:url(../images/icons.png) left -548px no-repeat;
	background-size:58px 670px;
}
.foot_list li:nth-child(4) a{
	background:url(../images/icons.png) left -608px no-repeat;
	background-size:58px 670px;
}

/* 中间样式 */
.center_scroll{
	position:absolute;
	left:0;
	top:50px;
	right:0;
	bottom:0;
	overflow-x:hidden;
	overflow-y:auto;
}

.slide{
	position:relative;
}

.slide_con li img{
	width:100%;
}

.slide .points{
	width:72px;
	height:6px;
	position:absolute; 
	right:15px;
	bottom:10px;
	font-size:0px;
}
.slide .points li{
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:50%;
	background-color:#9f9f9f;
	margin:0 3px;
}
.slide .points li.active{
	background-color:#76e658;
}


.menu{
	margin-top:10px;	
	background-color:#fff;
	font-size:0;
	padding:7px;
	box-sizing:border-box;
}

.menu li{
	display:inline-block;
	width:25%;
	height:80px;
	margin-top:10px;
}

.menu li a{
	width:55px;
	height:55px;
	display:block;
	margin:0 auto;
	
}

.menu li h3{
	height:25px;
	line-height:25px;
	text-align:center;
	font-size:13px;
	color:#666
}

.menu li:nth-child(1) a{
	background:url(../images/icons.png) left 0px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(2) a{
	background:url(../images/icons.png) left -60px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(3) a{
	background:url(../images/icons.png) left -120px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(4) a{
	background:url(../images/icons.png) left -180px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(5) a{
	background:url(../images/icons.png) left -240px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(6) a{
	background:url(../images/icons.png) left -300px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(7) a{
	background:url(../images/icons.png) left -360px no-repeat;
	background-size:58px 670px;
}
.menu li:nth-child(8) a{
	background:url(../images/icons.png) left -420px no-repeat;
	background-size:58px 670px;
}

.goods_model{
	background-color:#fff;
	margin:10px 0 60px;
	box-sizing:border-box;
	padding:15px 10px;

}

.goods_tilte{
	height:18px;	
}

.goods_tilte h3{
	border-left:5px solid #fbc83d;
	height:18px;
	line-height:18px;
	font-size:15px;
	color:#fbc83d;
	text-indent:8px;
}

.goods_tilte a{
	color:#7f7f7f;	
}

.goods_banner{
	margin-top:12px;
}

.goods_banner img{
	width:100%;
}

.goods_list{
	margin-top:10px;
}

.goods_list li{
	width:33.33%;
	float:left;
	box-sizing:border-box;
	position:relative;
}

.goods_list li .goods_pic{
	width:80px; 
	height:80px;
	margin:0 auto;
}
.goods_list li .goods_pic img{
	width:100%;
}

.goods_list li:nth-child(1){
	border-right:1px solid #e7e7e7;
}
.goods_list li:nth-child(2){
	border-right:1px solid #e7e7e7;
}

.goods_detail dt{
	text-indent:12px;
	font-size:15px;
	color:#666;
	width:90%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;	
}

.goods_detail .goods_unit{
	color:#bbb;
	margin-top:10px;
	text-indent:12px;
}
.goods_detail .goods_price{
	color:#ff4400;
	margin-top:3px;
	text-indent:12px;
}

.goods_detail .add_to_cart{
	position:absolute;
	width:34px;
	height:34px;
	background:url(../images/icons.png) left -480px no-repeat;
	background-size:58px 670px;
	right:5px;
	bottom:0;
}

常用css列表

color 设置文字的颜色
font-size 设置文字的大小
font-family 设置文字的字体
font-style 设置字体是否倾斜：normal 不倾斜 | italic 倾斜
font-weight 设置文字是否加粗：normal 不加粗 | bold 加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑’
text-decoration 设置文字的下划线：none 无下划线
text-indent 设置文字首行缩进
text-align 设置文字水平对齐方式：center 居中 | left 靠左 | right 靠右
text-overflow 设置一行文字宽度超过容器宽度时的显示方式：clip 将多出文字裁剪 | ellipsis 将多出文字按省略号显示
white-space 一般用来设置文本不换行，如：white-space:nowrap 设置文本不换行一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字如：list-style:none
width 设置盒子内容的宽度
height 设置盒子内容的高度
border-top 设置盒子顶部边框的三个属性如：border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线
border-left 设置盒子左边边框的三个属性
border-right 设置盒子右边边框的三个属性
border-bottom 设置盒子底部边框的三个属性
border 同时设置盒子的四个边框，如果四个边的样式统一就使用它如：border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线
padding 设置盒子四个边的内边距如：padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距**(顺时针)**
margin 设置盒子四个边的外边距如：margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距**(顺时针)**
overflow 设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式如：overflow:hidden 超出的子元素被裁切 | visible 默认值，内容不会被修剪，会呈现在元素框之外 | scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 | auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 | inherit 规定应该从父元素继承 overflow 属性的值
display 设置盒子的显示类型及隐藏：none 元素隐藏且不占位置 | block 元素以块元素显示 | inline 元素以内联元素显示 | inline-block 元素以内联块元素显示
float 设置元浮动如：float:left 设置左浮动 float:right 设置右浮动
clear 在盒子两侧清除浮动如：clear:both 在盒子两侧都不允许浮动
position 设置元素定位如：relative 设置元素相对定位 | absolute 设置元素绝对定位
background 设置元素的背景色和背景图片，如：background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg，背景色为cyan
background-size 设置盒子背景图的尺寸，如：background-size:30px 40px;设置背景图的尺寸宽为30px，高为40px
opacity 设置元素整体透明度，一般为了兼容需要加上filter属性设置如：opacity:0.1;filter:alpha(opacity=10)
cursor 设置鼠标悬停在元素上时指针的形状如：cursor:pointer 设置为手型 cursor属性
outline 设置文本输入框周围凸显的蓝色的线，一般是设为没有如：outline:none
border-radius 设置盒子的圆角如：border-radius:10px 设置盒子的四个角为10px半径的圆角
box-shadow 设置盒子的阴影，如：box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影
transition 设置盒子的过渡动画，如：transition:all 1s ease;设置元素过渡动画为1秒完成，所有变动的属性都做动画
animation 设置盒子的关键帧动画 @keyframe … from … to …
transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度
box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格

吃一口桃酥

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
前端(二）移动端布局实例及常用css列表-学习笔记整理

移动端页面布局需求：以如下天天生鲜首页效果图为例，制作相应的静态页面项目目录如下：├─css├─images├─js└─index.html目录结构说明：css中用于存放相应的css文件，通过link标签引入到html页面 <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
复制链接

扫一扫