移动web开发（01）

来源：互联网发布：jenkins下载for mac 编辑：程序博客网时间：2024/05/17 01:03
模仿电商移动web首页效果如下：
具体代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">    <title>移动站</title>    <style>        *{            margin: 0;            padding: 0;            -webkit-tap-highlight-color: transparent;        }        a{            text-decoration: none;        }        ul,li{            list-style: none;        }       body{           box-sizing: border-box;       }        .site_container{               width: 100%;           }                /* for Chrome */        .site_container::-webkit-scrollbar {            display: none;        }        /*顶部*/        .site_top{            width: 100%;            height: 40px;            background-color: skyblue;            position: relative;        }        .site_top form{            height: 30px;            display: block;            padding-top: 5px;            padding-left: 20px;            padding-right: 40px;        }        .site_top form input{            width: 100%;            height: 30px;            display: block;            border-radius: 15px;            border: 1px solid transparent;            outline: none;            padding-left: 10px;            padding-right: 10px;        }        .site_top .message_indicator{            width: 20px;            height: 20px;            background-color: #f00;            position: absolute;            top: 10px;            right: 10px;        }        /*轮播图*/        .site_banner{            width: 100%;            height:180px;            background-color: gold;        }        /*鉴定机构和跨界联盟*/        .organ_union{            width: 100%;            height: 73px;            margin: 5px 0;            background-color: purple;        }        .organ_union .identify_org{            width: 50%;            height: 100%;            float: left;            background-color: purple;        }        .organ_union .other_union{            width: 50%;            height: 100%;            float: right;            background-color: deepskyblue;        }        /*三个广告*/        .ad{            width:100%;        }        .ad .ad_item{            width: 100%;            height:193px;            margin-bottom: 5px;            background-color: #0f0;        }        /*精品推荐*/        .goods_recommend{            width: 100%;            height: 75px;            background-color: #f0f;        }        .good_list ul{            width:100%;            margin-bottom: 60px;            overflow: hidden;        }        .good_list ul li{            box-sizing: border-box;            width:50%;            height: 279px;            float: left;            padding: 3px;        }        .good_list ul li a{            width:100%;            height:100%;            display: block;            background-color: green;        }        /*底部导航栏*/        .site_bottom_nav{            width: 100%;            height: 56px;            background-color: #fff;            position: fixed;            left: 0;            bottom: 0;        }        .site_bottom_nav .nav_home{            width: 20%;            height: 100%;            float: left;        }        .site_bottom_nav .nav_home a{            width: 100%;            height: 100%;            display: block;        }        .site_bottom_nav .nav_category{            width: 20%;            height: 100%;            float: left;        }        .site_bottom_nav .nav_category a{            width: 100%;            height: 100%;            display: block;        }        .site_bottom_nav .nav_indentify{            width: 20%;            height: 100%;            float: left;        }        .site_bottom_nav .nav_indentify a{            width: 100%;            height: 100%;            display: block;        }        .site_bottom_nav .nav_brand{            width: 20%;            height: 100%;            float: left;        }        .site_bottom_nav .nav_brand a{            width: 100%;            height: 100%;            display: block;        }        .site_bottom_nav .nav_mine{            width: 20%;            height: 100%;            float: left;        }        .site_bottom_nav .nav_mine a{            width: 100%;            height: 100%;            display: block;        }        .site_bottom_nav p{            text-align: center;            line-height: 56px;        }    </style></head><body><!--移动站容器-->    <div class="site_container">        <!--顶部搜索-->        <div class="site_top">            <form action="">                <input type="search" placeholder="搜素商品和卖家">            </form>            <div class="message_indicator">                <a href="#">                    <img src="">                </a>            </div>        </div>        <!--轮播图-->        <div class="site_banner">        </div>        <!--鉴定机构和跨界联盟-->        <div class="organ_union">            <div class="identify_org"></div>            <div class="other_union"></div>        </div>        <!--三个广告-->        <div class="ad">            <div class="ad_item">                <a href="#"><img src=""></a>            </div>            <div class="ad_item">                <a href="#"><img src=""></a>            </div>            <div class="ad_item">                <a href="#"><img src=""></a>            </div>        </div>        <!--精品推荐-->        <div class="goods_recommend">            <img src="" alt="精品推荐">        </div>        <!--商品列表-->        <div class="good_list">            <ul>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>            </ul>        </div>        <!--底部导航栏-->        <div class="site_bottom_nav">            <div class="nav_home">                <a href="#">                    <p>首页</p>               </a>            </div>            <div class="nav_category">                <a href="#">                    <p>分类</p>                </a>            </div>            <div class="nav_indentify">                <a href="#">                    <p>鉴定</p>                </a>            </div>            <div class="nav_brand">                <a href="#">                    <p>品牌</p>                </a>            </div>            <div class="nav_mine">                <a href="#">                    <p>我的</p>                </a>            </div>        </div>    </div></body></html>
阅读全文
0 0