运用css，html制作一个简单彼岸花页面

本文链接：https://blog.csdn.net/m0_73944717/article/details/131662734

1.html部分（可以用hbulider或者vs）


<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/1.css" type="text/css">
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="one">
		<!--header模块-->
			<div id="header">
				<p><span>彼岸の花</span>偏安一偶 静静生活</p>
				<hr />
		
		</div>
		<!--商品分类模块-->
		<div id="fenlei">
			<p class="fl_p1">商品分类></p>
			<div>
			<img src="img/banner.jpg"alt="">
			</div>
			<p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...</p>
			<p>I love flowers, quietly open, never quiet Little flowers with the same fragrance...</p>
		</div>
		<!--热卖模块-->
		<div id="remai">
			<div>
			<img src="img/bestseller1.png"alt="">
			<br />
			<img src="img/bestseller2.jpg"alt="">
			</div>
			<div id="rm_r1">
			<p>多肉植物是指植物营养器官肥大的高等植物，<span>通常具机、菜、叶三种营养器官和花、吴实，种于三种繁殖器官</span>。在园艺上，又称肉质植物我多肉花卉。但以多肉植物这个名称最为用。</p>
			<p><span>全世界共有多肉桂物一万余种</span>，它们绝大部分属于高等植物(绝大多数是被子植物)。在植物分类上隶属几十个科，个别专家认为有67个科中含有多内植物，但大多教专家认为只有50余科。</p>
			</div>
		</div>
		<!--foot模块-->
		<div id="footer">
			<p>品质保障 | 七天无理由退货 | 特色服务体验 | 帮助中心</p>
			<div class="ft-div1">
				<img src="img/tuxiang.gif"alt="">
				<div >
					<p>店主：Michael_唐僧</p>
					<p class="two">飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！也许这只是秋季里的一场游戏。</p>
					
				</div>
				
			</div>
			
		</div>
		
	</body>
</html>

2.css部分

u*{
	margin: 0;
	padding: 0;
}
body{
	background-color: rgb(238,238,238);
	font-family: "楷体";
	font-size: 20px;
	color: rgb(150,150,150);
}
#one{
	width: 980px;
	margin: 0 auto;
}
#header{
	text-align: center;
	font-family: "微软雅黑";
	line-height: 90px;
}
#header p span{
	font-size: 30px;
	font-weight: 600px;
}
#header hr{
	height: 5px;
	border: 0;
	background-color:rgb(219,219,219);
}

#fenlei .fl_p1{
	float: left;
	font-family: "微软雅黑";
	line-height: 40px;
	font-weight: 600px;
	
}
#fenlei div{
	text-align: center;
}
#fenlei p,#remai p{
	text-align: center;
	line-height: 40px;
}

#remai div{
	text-align: center;
}

#remai p span{
	text-decoration: underline;
}

#footer>p{
	text-align: center;
	font-family: "微软雅黑";
	line-height: 40px;
	font-weight: 600px;
}
#footer.ft-div1{
	width: 600px;
	margin: 0 auto;
	height: 300px;
}

#footer img{
	float: left;
}

#footer div div p{
	margin-left: 142px;
}
 #footer.two{
 	font-style: oblique;
 }

以下为运行效果图1