京东页面布局

···

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/less" href="less/index.less">

    <script src="lib/less/less.min.js"></script>

</head>

<body>

<!--版心-->

<div class="sn_container">

    <!--顶部通栏-->

    <header class="sn_topBar">

        <a href="#" class="icon_category"></a>

        <form action="#">

            <span class="icon_search"></span>

            <input type="search" placeholder="60寸电视免费拿">

        </form>

        <a href="#" class="icon_cart"></a>

    </header>

    <!--轮播图-->

    <div class="sn_banner">

        <ul>

            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>

        </ul>

        <ul>

            <li class="now"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <!--分类-->

    <nav class="sn_nav">

        <ul class="clearFix">

            <li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>

        </ul>

    </nav>

    <!--页签-->

    <footer class="sn_tabs">

        <ul>

            <li><a href="#"><span class="fa fa-home"></span><p>首页</p></a></li>

            <li><a href="#"><span class="fa fa-reorder"></span><p>分类</p></a></li>

            <li><a href="#"><span class="fa fa-file-text-o"></span><p>必抢清单</p></a></li>

            <li><a href="#"><span class="fa fa-user"></span><p>我的易购</p></a></li>

            <li><a href="#"><span class="fa fa-suitcase"></span><p>新手大礼包</p></a></li>

        </ul>

    </footer>

</div>

<script src="lib/zepto/zepto.min.js"></script>

<!--扩展选择器-->

<script src="lib/zepto/selector.js"></script>

<!--做动画-->

<script src="lib/zepto/fx.js"></script>

<!--手势-->

<script src="lib/zepto/touch.js"></script>

<script src="js/index.js"></script>

</body>

</html>

···

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容