HTML .CSS实现关于我们页面（about）

一.实现过程

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于我们</title>
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/about.css">
	</head>
	<body>
		<div id="all">
			<iframe class="iheader" src="header.html"></iframe>
			<div style="clear: both;"></div>
			
			<div id="content">
					<div class="ct">
						<p class="p-img">
							<img src="img/about1.jpg"/>
						</p>
						<p>悦轩饼家，2005年创立于深圳。10多年来，悦轩饼家紧跟趋势，拥抱变化，融入变化，
						已发展成为-家由数据和技术驱动的新零售烘焙品牌，渐成行业驱动者。基于信息技术的革
						新和用户消费习惯的改变以及新零售基础设施的完善，悦轩饼家为烘焙行业注入新零售的理
						念,即“<strong>线上下单,线下配送</strong>”，为消费者提供良好的消费体验，保证消
						费者随时随地享用更新鲜、更绿色、更安全、更健康的烘焙食品。悦轩饼家秉持“用心，
						传递喜悦”的服务理念，始终坚持“新鲜现做” 的原则，不断超越自我，完善服务，自
						2015年开放品牌合作以来，悦轩饼家先后覆盖了全国200多个城市，包括深圳、上海、北京、
						广州、澳门等，建立了400多个分布式制作中心，拥有超千万粉丝，微信搜索并关注悦轩饼
						家(xfxbsz)公众号即可购买。用户下单后，悦轩饼家分布式制作中心即时快速生产,覆盖范
						围内2 ~ 5小时专业冷链高效配送，为2亿人次送去喜悦的味道。</p>
						<p class="question_title">什么是新鲜现做 (现做即送) ？</p>
						<p class="p-img">
							<img src="img/about2.jpg">
						</p>
						<p>
							依据中国商业联合会发布的《烘烤食品网络销售及经营规范》文件，新鲜现做
							（<strong>现做即送</strong>），即按订单需求和产品最佳食用时间即时安排
							产品制作和配送，适用于现制现送的烘培食品。
						</p>
					</div>
			</div>
			
			<!-- <div style="clear: both;"></div> -->
			<iframe class="ifooter" src="footer.html"></iframe>
		</div>
	</body>
</html>

.css

iframe{
	width: 1200px;
	margin: auto;
}
.all{
	width: 100%;
	height: 810px;
	padding-bottom: 50px;
	margin-top: -80px;
	margin-bottom: 1px;
}
.all .content{
	margin-top: 0px;
	float: left;
}
.all iframe{
	/* border: 2px solid red; */
}
#content{
/* 	border: 1px solid red; */
	width: 1200px;
	margin-top: -80px;
	/* margin: auto; */
}
.ct .p-img{
	text-align: center;
	margin-bottom: 28px;
}
.ct p{
	margin: 6px 0;
	text-indent: 2rem;
}
.ct .question_title{
	font-weight: bold;
	text-align: center;
	margin-top: 30px;
	font-size: 20px;
}

二.实现效果

HTML .CSS实现关于我们页面（about）

猜你喜欢