两周，对H5和CSS的标签有了一个简单地认识，并且可以自己动手制作一个简单的二维页面。这几天忙着写一个相对复杂的页面，没有及时更新作品，是我的小失误了。下面先给大家说说我这几天完成的页面。
主页面
热门
商品
网站导航
其实这个界面也不难，只是相对结构多，制作复杂，但以两周的学习水平 ，我可以写出来的。于是我就开始每天老老实实的电脑前写代码。重点给大家介绍商品菜单页面及进口生鲜部分
商品菜单页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品菜单分类</title>
<style>
/*去掉所有内、外边距*/
*{
padding: 0px;
margin: 0px;
}
/*去掉超链接下划线*/
a{
text-decoration: none;
}
/*去掉列表标点*/
li{
list-style: none;
}
.b1{
width: 200px;
height: 300px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
margin-left: 1px;
background: #B01D1D;
}
.b1 li:nth-of-type(1) {
background: url("oneShop/nav1.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(2) {
background: url("oneShop/nav2.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(3) {
background: url("oneShop/nav3.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(4) {
background: url("oneShop/nav4.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(5) {
background: url("oneShop/nav5.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(6) {
background: url("oneShop/nav6.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(7) {
background: url("oneShop/nav7.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(8) {
background: url("oneShop/nav8.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(9) {
background: url("oneShop/nav9.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 li:nth-of-type(10) {
background: url("oneShop/nav10.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
.b1 a {
margin-left: 30px;
list-style:none;
color: white;
font-size: 12px;
line-height:30px;
}
.b1 img{
width: 8px;
height: 8px;
vertical-align: middle;
float: right;
margin-right: 2px;
margin-top:9px;
}
</style>
</head>
<body>
<div class="b1">
<ul>
<li><a href="">进口食品、生鲜</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">食品、饮料、酒</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">母婴、玩具、童装</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">家居、家庭清洁、纸品</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">美妆、个人护理、洗护</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">女装、内衣、中老年</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">鞋靴、箱包、腕表配饰</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">男装、运动</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">手机、小家电、电脑</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">礼品、充值</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
</ul>
</div>
</body>
</html>
商品菜单页面效果图
先对整体布局，例如你想要页面多大，先设置一个宽高。当然，制作时不满意可以随时修改。由于是例表，我使用了无序例表<ul></ul>标签进行样式实现，但是需要对例表前的·删除，即在<style></style>中统一去除。
/*去掉列表样式*/
li{
list-style: none;
}
把原来的例表样式去除，添加图片为新的例表样式。由于每行例表样式都不一样，我们需要依次修改。对每个<li>标签进行修改。我们选择对b1的后代元素li进行操作，选择不同的li标签使用的是b1下的第几个li。例如第一个li为
.b1 li:nth-of-type(1) {
background: url("oneShop/nav1.png") no-repeat;
background-position: left center;
margin-left: 5px;
}
修改其背景为图片，选择不重复方式，对齐为左对齐。同时让文字往右移动5px不紧邻图片，这样看起来美观一点。左边完成之后对右边的图标进行操作，统一缩放到合适的大小，让其有浮动，这样每个图标都在右边，根据自己的审美，适当添加一下右边距，使其往左几像素。
进口生鲜部分的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进口生鲜部分</title>
<style>
/*进口生鲜商品*/
.e{
width: 1200px;
height: 540px;
/*border: solid 1px red;*/
}
.e1{
width: 220px;
height: 540px;
display: inline-block;
float: left;
/*border: solid 1px red;*/
}
.e1-1{
width: 211px;
height: 286px;
/*border: solid 1px red;*/
}
.e1-2{
width: 211px;
height: 254px;
background: #E4F7EC;
line-height: 40px;
}
.e1-2 li{
border-bottom: dashed 1px #999999;
}
.e2 {
width: 960px;
height: 540px;
/*border: solid 1px red;*/
display: inline-block;
float: right;
}
.e2-1{
width: 960px;
height: 270px;
/*border: solid 1px red;*/
}
.e2-2{
width: 960px;
height: 270px;
/*border: solid 1px red;*/
}
/*<!--贝思客-->*/
.e2-1-1{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-right: solid 0.2px gainsboro;
border-bottom:solid 0.2px gainsboro ;
border-left: solid 0.2px gainsboro;
}
.e2-1-1 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-1-1 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-1-1 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*<!--微笑果园SMILE-->*/
.e2-1-2{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-right: solid 1px gainsboro;
border-bottom: solid 1px gainsboro;
}
.e2-1-2 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-1-2 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-1-2 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*新鲜美味*/
.e2-1-3{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-bottom: solid 1px gainsboro;
border-right: solid 1px gainsboro;
}
.e2-1-3 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-1-3 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-1-3 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*相约过中秋*/
.e2-1-4{
width: 277px;
height: 270px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
}
.e2-1-4 img{
width: 277px;
height: 270px;
}
/*第二部分*/
/*<!--进口美食-->*/
.e2-2-1{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-bottom: solid 1px gainsboro;
border-right: solid 1px gainsboro;
border-left: solid 0.2px gainsboro;
}
.e2-2-1 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-2-1 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-2-1 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*<!--纯牛奶-->*/
.e2-2-2{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-right: solid 0.2px gainsboro;
border-bottom:solid 0.2px gainsboro ;
}
.e2-2-2 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-2-2 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-2-2 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*莫斯利安*/
.e2-2-3{
width: 226px;
height: 268px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
border-bottom: solid 1px gainsboro;
border-right: solid 1px gainsboro;
}
.e2-2-3 p{
margin-top: 20px;
height: 16px;
font-size: 10px;
text-align: center;
/*border: solid 1px red;*/
}
.e2-2-3 p:nth-of-type(2){
margin-top: 0px;
color: orangered;
}
.e2-2-3 img{
width: 198px;
height: 198px;
/*border: solid 1px red;*/
display: inline-block;
margin-left: 10px;
}
/*猕猴桃*/
.e2-2-4{
width: 277px;
height: 270px;
/*border: solid 1px red;*/
display: inline-block;
float: left;
}
.e2-2-4 img{
width: 277px;
height: 270px;
}
</style>
</head>
<body>
<div class="e">
<div class="e1">
<div class="e1-1">
<img src="oneShop/fre_r.jpg" alt=""/>
</div>
<div class="e1-2">
<ul>
<li> 进口水果 奇异果 西柚</li>
<li> 海鲜水产 品质牛肉</li>
<li> 奶粉 鲜活禽蛋 进口酒</li>
<li> 进口奶粉 鲜活禽蛋</li>
</ul>
</div>
</div>
<div class="e2">
<div class="e2-1">
<!--贝思客-->
<div class="e2-1-1">
<p> 贝思客 草莓先生&蓝莓小姐</p>
<p>¥98.00</p>
<img src="oneShop/fre_1.jpg" alt=""/>
</div>
<!--微笑果园SMILE-->
<div class="e2-1-2">
<p> 微笑果园SMILE 智利进口绿奇异果</p>
<p>¥84.00</p>
<img src="oneShop/fre_2.jpg" alt=""/>
</div>
<!--新鲜美味-->
<div class="e2-1-3">
<p> 新鲜美味 进口美食</p>
<p>¥98.00</p>
<img src="oneShop/fre_3.jpg" alt=""/>
</div>
<!--相约过中秋-->
<div class="e2-1-4">
<img src="oneShop/fre_b1.jpg" alt=""/>
</div>
</div>
<!--第二部分-->
<div class="e2-2">
<!--进口美食-->
<div class="e2-2-1">
<p> 新鲜美味 进口美食</p>
<p>¥24.00</p>
<img src="oneShop/fre_4.jpg" alt=""/>
</div>
<!--纯牛奶-->
<div class="e2-2-2">
<p> 新鲜美味 纯牛奶</p>
<p>¥142.00</p>
<img src="oneShop/fre_5.jpg" alt=""/>
</div>
<!--新鲜美味-->
<div class="e2-2-3">
<p> 莫斯利安</p>
<p>¥62.00</p>
<img src="oneShop/fre_6.jpg" alt=""/>
</div>
<!--猕猴桃-->
<div class="e2-2-4">
<img src="oneShop/fre_b2.jpg" alt=""/>
</div>
</div>
</div>
</div>
</body>
</html>
进口生鲜商品页面效果图
我把整个页面分为两部分，即左边和右边。左边命名为e1，右边为e2.e1部分又细分为两部分。第一部分为图片，第二部分为例表。对每个例表的下边框线进行显示为虚线。
其中每行的字体间距我为了简单操作使用了空格。其实我们也可以把每行商品便签使用<ul><li>操作，即一行为一个<ul>每一个商品便签为一个<li>，这样再对每个<li>转换为行内元素，使其在同一行中，为每个<li>便签添加右边距。这样也能实现同样的效果。不过相对来说麻烦一点。
完成左边的部分，我们就可以对右边进行操作了。首先想好自己的布局。我用的是上下分。在上面的布局e2-1中添加四个小的<div></div>,在四个小的<div></div>中添加文字，图片，分别对文字和图片进行合适的修改调整，增加其边框线，出现与样板图相似的效果。
下面的个人美妆和母婴玩具做法和进口生鲜CSS样式一致，直接复制其样式即可。
