首页 > 代码库 > 任务七:实现常见的技术产品官网的页面结构及样式布局

任务七:实现常见的技术产品官网的页面结构及样式布局

任务目的

  • 通过实现一个常见的技术产品官网,加深对于HTML,CSS的实战能力
  • 学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变

 

任务描述

  • 通过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开)
  • 设计稿是有一定宽度的,这个宽度为页面的最小宽度,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的宽度应该保持和浏览器窗口宽度一致,具体哪些部分题目不做具体指明,看看大家的判断如何。

 

任务注意事项

  • 只需要完成HTML,CSS代码编写,不需要写JavaScript
  • 设计稿中的图片、文案均可自行设定
  • 在Chrome中完美实现与设计稿的各项字体、布局、内外边距等样式
  • 有能力的同学可以尝试跨浏览器的兼容性
  • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

 

 

任务完成及总结

 忙活了两天,终于把整个网页按照PSD稿给写了出来。对于自己的效率真是不敢恭维,其实一开始看到这么多内容的一个页面,心里是慌的和消极的,于是就对自己说:每隔几个小时做一部分,做着做着就到第二天了。昨晚意识到这样下去可不行,昨晚恁是逼迫自己码到近凌晨两点才搞定这个网页。

 

这个网页技术上没有什么太大的难度,主要是需要注意每个盒子的独立性。而我对自己做的网页独立性之强那是相当有信心,最近制作网页是越来越少使用float属性了,一是不做响应式布局,二是float布局很容易引发问题,三是发现display:inline-block很好理解和使用。

 

还有就是,反复的在编辑器中调试网页真的是件繁琐的事情,下次需要记得要充分利用开发者利器F12.

 

不说这么多,放上小demo链接:

http://cruxf.github.io/BaiduTask/test7.html

 

任务七:实现常见的技术产品官网的页面结构及样式布局