美文网首页
京东页面布局

京东页面布局

作者: 77芽儿 | 来源:发表于2019-04-18 06:26 被阅读0次

···

<!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>

···

相关文章