任务七:实现常见的技术产品官网的页面结构及样式布局
2017-04-11 10:08
316 查看
任务目的
通过实现一个常见的技术产品官网,加深对于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
相关文章推荐
- 任务七:实现常见的技术产品官网的页面架构及样式布局
- 【ife】任务七:实现常见的技术产品官网的页面架构及样式布局
- css页面中常见左中右分栏布局的两种实现方式
- Web页面中八种创建多列等高(等高列布局)的实现技术
- ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现
- Web页面中八种创建多列等高(等高列布局)的实现技术
- 页面常见布局以及实现方法
- XHTML,CSS 秘密技术 定义列表代替实现页面的布局,表单提交 操作 附原代码。
- HTML页面树型结构的实现-xyTree V4.1
- JSP页面翻页技术的实现
- SharePoint 产品与技术的安全体系结构
- (div+css)上面固定下面自适应页面布局的实现(FF,IE)
- [61] 测试技术常见的十一种问题之九:没有产品说明书和需求文档地情况下能够进行黑盒测试吗?
- 动态CSS,换肤技术在选择了某样式后,再次打开该页面时,将仍然保持该样式
- JS实现页面的拖动布局
- 实现服务器负载均衡常见的四种技术
- DIV+CSS页面布局,样式中区别苹果浏览器Safari
- 锦囊妙计CSS实现样式布局22招
- 精简的CSS代码,实现页面样式通用性。
- CSS实现避免页面布局被大尺寸图片和长字符串破坏