网页结构

div外部容器
div内部容器
div左侧
div 城市
div 下拉栏
div右侧
ul
li a
li 间隔线

样式设置

• 外部容器
  • 宽100%
  • 高30px
  • 颜色取色器取
  • 下外边框
• 内部容器
  • 在外部容器中垂直居中 margin: 0 auto
  • 让容器里的文字垂直居中line-height设为与高度相等
  • 设置内部容器的a样式
    • 去掉下划线
    • 字体颜色
• 左侧城市定位
  • 向左浮动
• 右侧导航条
  • 向右浮动
  • 里面的li向左浮动
  • 间隔线li
    • 背景颜色取色
    • 设定宽高
    • 利用margin隔开左右li

经验

1、利用span或者li的左右外边距来隔开前后的元素，达到布局的效果