淘宝首页框架

点击预览 www.chly.love

html部分

  1.     <!--导入CSS样式文件-->
  2.     <link rel="stylesheet" href="./css/font_icon/iconfont.css">
  3.     <link rel="stylesheet" href="./css/header.css">
  4.     <link rel="stylesheet" href="./css/main.css">
  5.     <link rel="stylesheet" href="./css/footer.css">
  6.     <link rel="stylesheet" href="./css/reset.css">
  8.     <!--header头部-->
  9.     <!--
  10.         2部分组成，左边的图标和右边的搜索框
  11.     -->
  12.     <header>
  13.         <!--搜索框部分-->
  14.         <nav class="top">
  15.             <div class="logo"><img src="./static/logo.png" alt="logo"></div>
  16.             <div class="search">
  17.                 <span class="iconfont icon-fangdajing"></span>
  18.                 <input type="text" placeholder="寻找宝贝店铺">
  19.             </div>
  20.         </nav>
  21.         <div class="lunbotu"><img src="./static/images/banner/banner1.jpg" alt=""></div>
  22.         <div class="menu">
  23.             <ul>
  24.                 <li><a href=""><img src="./static/images/nav/nav1.png" alt=""><span>今日爆款</span></a></li>
  25.                 <li><a href=""><img src="./static/images/nav/nav2.png" alt=""><span>天猫国际</span></a></li>
  26.                 <li><a href=""><img src="./static/images/nav/nav3.png" alt=""><span>飞猪旅行</span></a></li>
  27.                 <li><a href=""><img src="./static/images/nav/nav4.png" alt=""><span>天猫超市</span></a></li>
  28.                 <li><a href=""><img src="./static/images/nav/nav5.png" alt=""><span>淘宝吃货</span></a></li>
  29.                 <li><a href=""><img src="./static/images/nav/nav6.png" alt=""><span>聚划算</span></a></li>
  30.                 <li><a href=""><img src="./static/images/nav/nav7.png" alt=""><span>领淘宝币</span></a></li>
  31.                 <li><a href=""><img src="./static/images/nav/nav8.png" alt=""><span>阿里拍卖</span></a></li>
  32.                 <li><a href=""><img src="./static/images/nav/nav1.png" alt=""><span>杂货铺子</span></a></li>
  33.                 <li><a href=""><img src="./static/images/nav/nav2.png" alt=""><span>更多分类</span></a></li>
  34.             </ul>
  35.         </div>
  36.     </header>
  37.     <main>
  38.         <div>商品1</div>
  39.         <div>商品2</div>
  40.         <div>商品3</div>
  41.         <div>商品4</div>
  42.         <div>商品1</div>
  43.         <div>商品2</div>
  44.         <div>商品3</div>
  45.         <div>商品4</div>
  47.     </main>
  48.     <footer>
  49.         <div class="bot">
  50.             <a href=""><span  class="iconfont icon-shejiaotubiao-44 " id="logo1"></span></a>
  51.             <a href=""><span  class="iconfont icon-gouwuche"></span><span>购物车</span></a>
  52.             <a href=""><span  class="iconfont icon-wodetaobao"></span><span>我的淘宝</span></a>
  53.         </div>
  54.     </footer>

CSS 样式

关键点

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

更多相关文章

  1. 仿淘宝移动端首页
  2. Android热补丁技术—dexposed原理简析(手机淘宝采用方案)
  3. Android仿淘宝首页UI（附代源代码及示例图片）
  4. Android二级联动菜单的实现
  5. 淘宝首页商品列表块
  6. PHP+Redis事务解决高并发下商品超卖问题(推荐)
  7. Android(安卓)- 购物车页面【仿】淘宝App
  8. 简单淘宝首页案例
  9. 淘宝首页商品列表

随机推荐

  1. python传递列表作为函数参数
  2. Python读取修改ini配置文件[ConfigParser
  3. 用 Opencv 和 Python 对狗狗做模糊检测
  4. python-条件语句练习
  5. Python执行系统命令：使用subprocess的Pope
  6. Python，Pandas删除Excel中的行
  7. Scrapy框架--Requests对象
  8. 使用python csv写入器，无需引用
  9. python之全栈开发——————IO模型
  10. Pycharm 运行跳一跳程序