移动web开发（01）

最新推荐文章于 2021-05-29 18:13:35 发布
oneblue123
最新推荐文章于 2021-05-29 18:13:35 发布
阅读量384
点赞数
CC 4.0 BY-SA版权
分类专栏： js css
本文链接：https://blog.youkuaiyun.com/oneblue123/article/details/78183743
js 同时被 2 个专栏收录
14 篇文章
订阅专栏
css
13 篇文章
订阅专栏
模仿电商移动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>