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
2
