美文网首页
用H5完成一个二维平面的实现

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

作者: 敏姐姐_e9d0 | 来源:发表于2018-11-20 19:33 被阅读0次

    两周，对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>&nbsp;&nbsp;进口水果&nbsp;&nbsp;&nbsp;&nbsp;奇异果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;西柚</li>
               <li>&nbsp;&nbsp;海鲜水产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品质牛肉</li>
               <li>&nbsp;&nbsp;奶粉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鲜活禽蛋 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;进口酒</li>
               <li>&nbsp;&nbsp;进口奶粉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 鲜活禽蛋</li>
           </ul>
       </div>
   </div>
   <div class="e2">
       <div class="e2-1">
           <!--贝思客-->
           <div class="e2-1-1">
               <p> 贝思客&nbsp;&nbsp;草莓先生&蓝莓小姐</p>
               <p>&yen;98.00</p>
               <img src="oneShop/fre_1.jpg" alt=""/>
           </div>
           <!--微笑果园SMILE-->
           <div class="e2-1-2">
               <p> 微笑果园SMILE&nbsp;&nbsp;智利进口绿奇异果</p>
               <p>&yen;84.00</p>
               <img src="oneShop/fre_2.jpg" alt=""/>
           </div>
           <!--新鲜美味-->
           <div class="e2-1-3">
               <p> 新鲜美味&nbsp;&nbsp;进口美食</p>
               <p>&yen;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> 新鲜美味&nbsp;&nbsp;进口美食</p>
               <p>&yen;24.00</p>
               <img src="oneShop/fre_4.jpg" alt=""/>
           </div>
           <!--纯牛奶-->
           <div class="e2-2-2">
               <p> 新鲜美味&nbsp;&nbsp;纯牛奶</p>
               <p>&yen;142.00</p>
               <img src="oneShop/fre_5.jpg" alt=""/>
           </div>
           <!--新鲜美味-->
           <div class="e2-2-3">
               <p> 莫斯利安</p>
               <p>&yen;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样式一致，直接复制其样式即可。

    相关文章

      网友评论

          本文标题：用H5完成一个二维平面的实现

          本文链接：https://www.haomeiwen.com/subject/fegxqqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|用H5完成一个二维平面的实现|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！