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

Posted 2020-09-09 Z皓

任务目的

• 通过实现一个常见的技术产品官网，加深对于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