第八课《复杂页面实现》

按照如下设计图进行页面的实现

第八课设计稿

说明:

  • 最左侧一列要求自适应浏览器高度,左上面4个按钮相对浏览器左上角固定位置,左下方两个按钮相对浏览器左下角固定位置
  • 左侧第二列(蓝色背景色)导航列固定宽度,高度也是自适应浏览器高度,最下面的Monthly Goals部分的内容相对浏览器下边固定位置
  • 整个白色区域自适应宽度,右上方的人脸,名字部分相对浏览器右上角固定位置
  • 白色区域左侧列固定宽度,右侧列自适应宽度

要求:

  • 代码风格符合某种编码规范
  • 尽可能按照设计稿的尺寸进行实现
  • 不需要考虑兼容IE浏览器

DOM:

CSS:

总结:

猜你喜欢

转载自www.cnblogs.com/lixiang12/p/10540373.html