用H5完成一个二维平面的实现

两周，对H5和CSS的标签有了一个简单地认识，并且可以自己动手制作一个简单的二维页面。这几天忙着写一个相对复杂的页面，没有及时更新作品，是我的小失误了。下面先给大家说说我这几天完成的页面。

主页面

热门

商品

网站导航

其实这个界面也不难，只是相对结构多，制作复杂，但以两周的学习水平 ，我可以写出来的。于是我就开始每天老老实实的电脑前写代码。重点给大家介绍商品菜单页面及进口生鲜部分

商品菜单页面

    
    
    



    

        
进口食品、生鲜
            
        
        
食品、饮料、酒
            
        
        
母婴、玩具、童装
            
        
        
家居、家庭清洁、纸品
            
        
        
美妆、个人护理、洗护
            
        
        
女装、内衣、中老年
            
        
        
鞋靴、箱包、腕表配饰
            
        
        
男装、运动
            
        
        
手机、小家电、电脑
            
        
        
礼品、充值
            
        
    

商品菜单页面效果图

先对整体布局，例如你想要页面多大，先设置一个宽高。当然，制作时不满意可以随时修改。由于是例表，我使用了无序例表

标签进行样式实现，但是需要对例表前的·删除，即在中统一去除。

 /*去掉列表样式*/
 li{   
list-style: none;
}

把原来的例表样式去除，添加图片为新的例表样式。由于每行例表样式都不一样，我们需要依次修改。对每个

标签进行修改。我们选择对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不紧邻图片，这样看起来美观一点。左边完成之后对右边的图标进行操作，统一缩放到合适的大小，让其有浮动，这样每个图标都在右边，根据自己的审美，适当添加一下右边距，使其往左几像素。

进口生鲜部分的实现

   
   
   



   

       

           
       
       

           

               
  进口水果    奇异果      西柚
               
  海鲜水产      品质牛肉
               
  奶粉      鲜活禽蛋      进口酒
               
  进口奶粉       鲜活禽蛋
           
       
   
   

       

           
           

               
 贝思客  草莓先生&蓝莓小姐
               
¥98.00
               
           
           
           

               
 微笑果园SMILE  智利进口绿奇异果
               
¥84.00
               
           
           
           

               
 新鲜美味  进口美食
               
¥98.00
               
           
           
           

               
           
       
       
       

           
           

               
 新鲜美味  进口美食
               
¥24.00
               
           
           
           

               
 新鲜美味  纯牛奶
               
¥142.00
               
           
           
           

               
 莫斯利安
               
¥62.00
               
           
           
           

               
           

       
   

进口生鲜商品页面效果图

我把整个页面分为两部分，即左边和右边。左边命名为e1，右边为e2.e1部分又细分为两部分。第一部分为图片，第二部分为例表。对每个例表的下边框线进行显示为虚线。
其中每行的字体间距我为了简单操作使用了空格。其实我们也可以把每行商品便签使用

• 操作，即一行为一个
  每一个商品便签为一个
  • ，这样再对每个
  • 转换为行内元素，使其在同一行中，为每个
  • 便签添加右边距。这样也能实现同样的效果。不过相对来说麻烦一点。
    完成左边的部分，我们就可以对右边进行操作了。首先想好自己的布局。我用的是上下分。在上面的布局e2-1中添加四个小的
    ,在四个小的
    中添加文字，图片，分别对文字和图片进行合适的修改调整，增加其边框线，出现与样板图相似的效果。
    下面的个人美妆和母婴玩具做法和进口生鲜CSS样式一致，直接复制其样式即可。