淘宝首页框架

淘宝首页框架

点击预览 www.chly.love

html部分

    <!--导入CSS样式文件-->
    <link rel="stylesheet" href="./css/font_icon/iconfont.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!--header头部-->
    <!--
        2部分组成，左边的图标和右边的搜索框
    -->
    <header>
        <!--搜索框部分-->
        <nav class="top">
            <div class="logo"><img src="./static/logo.png" alt="logo"></div>
            <div class="search">
                <span class="iconfont icon-fangdajing"></span>
                <input type="text" placeholder="寻找宝贝店铺">
            </div>
        </nav>
        <div class="lunbotu"><img src="./static/images/banner/banner1.jpg" alt=""></div>
        <div class="menu">
            <ul>
                <li><a href=""><img src="./static/images/nav/nav1.png" alt=""><span>今日爆款</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav2.png" alt=""><span>天猫国际</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav3.png" alt=""><span>飞猪旅行</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav4.png" alt=""><span>天猫超市</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav5.png" alt=""><span>淘宝吃货</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav6.png" alt=""><span>聚划算</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav7.png" alt=""><span>领淘宝币</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav8.png" alt=""><span>阿里拍卖</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav1.png" alt=""><span>杂货铺子</span></a></li>
                <li><a href=""><img src="./static/images/nav/nav2.png" alt=""><span>更多分类</span></a></li>
            </ul>
        </div>
    </header>
    <main>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
        <div>商品4</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
        <div>商品4</div>
    </main>
    <footer>
        <div class="bot">
            <a href=""><span  class="iconfont icon-shejiaotubiao-44 " id="logo1"></span></a>
            <a href=""><span  class="iconfont icon-gouwuche"></span><span>购物车</span></a>
            <a href=""><span  class="iconfont icon-wodetaobao"></span><span>我的淘宝</span></a>
        </div>
    </footer>

CSS 样式

关键点

顶部和底部position ： fixed 固定上下
使用grid布局即可