首页 > 代码库 > 任务九:使用HTML/CSS实现一个复杂页面
任务九:使用HTML/CSS实现一个复杂页面
任务目的
- 通过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力
- 实践代码的复用、优化
任务描述
- 通过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开)
- 整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致
任务注意事项
- 只需要完成HTML,CSS代码编写,不需要写JavaScript
- tab只需要实现样式,有能力余力的同学可以尝试实现不使用JavaScript的情况下,实现Tab切换
- 所有的下拉菜单(Select)均要求按照设计稿样式实现,下拉后的样式自定义,不需要实现下拉选择的功能,但样式要实现
- 在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务完成与总结:
一个人搞这个页面,肝有点不行,索性不切图了,计划直接把大概的页面写出来,然而写到第二天的时候完全失去耐心Zzzz,这次任务算是考验到我了。算了,还是分析其他人的代码吧,不过自己的代码还是要贴上,知道这次完成的十分不好,不管怎么说,毕竟是亲儿子(自己写出来的),就不嫌它丢人了。
下面是一个做的比较好的团队作品:
http://zaiye.github.io/test1/
现在我来分析下一些自己觉得有技巧的效果实现方式:
1、搜索框与登录效果的实现
代码:
利用padding-left值空出来的位置,然后调整背景图x、y轴的坐标;登录效果的实现也是如此。
2、类似双重边框的实现
代码(父元素):
代码(子元素):
通过两个背景颜色不一的圆叠加,营造出双重边框的效果。
3、CSS3制作一个tab选项卡:
开发步骤一:将父元素设置为相对定位;
开发步骤二:将li元素设置为浮动;
开发步骤三:隐藏input以及承载表格的div;
开发步骤四:设置id为tab开头的、属性为checked的元素以及当下一个id以tab_menu开头的元素被点击时的样式,这个为核心代码:
开发步骤五:相关原理与开发步骤四类似:
4、ul元素的巧用:
中间三大块利用ul中li元素中嵌套div进行设置和布局,这实在是我一开始想不到的,比我的方法简洁了许多。果然脑子是个好东西。
5、元素的空内容应用:
头部使用li元素,中间使用浮动的p元素设置宽高,p元素内含两个子元素,其中空白的部分只是没有添加内容而已,只怪自己当初想的太复杂。
7、类进度条的制作:
还是老技巧,利用父元素与子元素的重叠。其实用HTML 新元素progress处理也是可以,只不过背景颜色处理上有些麻烦,以及它的兼容性问题。
任务九:使用HTML/CSS实现一个复杂页面