项目搭建

  • index.html
  • index.css

  • base.css

    导航条

  • 布局

  • 一个外部div 里面三个ul image.png
  • 服务栏ul
    • 竖线的实现
      • 用京东项目的设置span元素来实现
      • 直接打竖线
  • 用户信息ul

  • 购物车ul

    • 注意布局时候购物车在最右边，所以要先让购物车ul向右浮动，需要调整两个ul的顺序

      导航条样式

  • 外部容器

    • 宽高
    • 行高使文字居中
    • 背景颜色
  • 内部容器
    • 加写好的W类使居中
    • 内部的元素都浮动了，所以高度为0
      • 高度塌陷，加clearfix解决
  • 第一个ul
    • 左浮动
  • 第二个ul和第三个ul右浮动
    • 要先调整顺序，不然浮动时购物车到不了最右边
  • 内部容器里的li都左浮动
  • 观察官网的点击，a要设置范围给用户点击
    • 可以display：block。a变成行内块元素，会被里面的文本撑开高度
  • 分割线设置
  • 购物车的设置

    导航条下拉栏

  • app下载的下拉栏
    • 在下载App的a里添加div结构
      • 放置img和span文字
        • 注意span会继承祖先元素的line-height，要重新设置
        • 继承父元素的a的hover的颜色属性，要重新设置颜色
      • 小三角的实现（难点）
        • 实际上border是一个梯形，把宽高设置为0时变成了三角
        • 去掉上边界，但要保留左右边界，只是把颜色设置为transparent
        • 不要多加结构，直接a的after伪类设置
      • 下拉栏的思想：
        • 初始设为display:none
        • 鼠标移入时设为display:block
  • 下拉栏的渐出效果怎么实现
    • 不用display：none来隐藏而是使用height：0
    • 然后要overfloat：hidden来设定溢出的内容
    • 修改Hover伪类为height:全高度
    • 加上一个transition:height .5s 设定渐出效果

头部导航条

image.png

  • 外部全屏的容器
    • 内部容器
      • logo
        • 对网站比较重要，放到h1当中
          • a
      • 导航条
        • div.nav-wrapper
          • ul
      • 搜索框
  • 头部logo
    • 切换效果
      • 通过绝对定位left偏移量使两图并排
      • 设置transition设置left的渐变
      • 要设置初始值和hover后的末值才能形成渐变
  • 下拉栏
    • 还是切换效果，通过height
    • 通过Id设定特定的几个li有hover效果