本篇教程介绍了HTML+CSS入门 如何使用HTML/CSS实现一个复杂页面，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

任务目的

通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力
实践代码的复用、优化

 
任务描述

通过HTML及CSS实现设计稿 设计稿PSD文件（点击下载），效果如 效果图（点击打开）
整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致

 
任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript
tab只需要实现样式，有能力余力的同学可以尝试实现不使用JavaScript的情况下，实现Tab切换
所有的下拉菜单（Select）均要求按照设计稿样式实现，下拉后的样式自定义，不需要实现下拉选择的功能，但样式要实现
在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式
有能力的同学可以尝试跨浏览器的兼容性
有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

 
任务完成与总结：
 一个人搞这个页面，肝有点不行，索性不切图了，计划直接把大概的页面写出来，然而写到第二天的时候完全失去耐心Zzzz，这次任务算是考验到我了。算了，还是分析其他人的代码吧，不过自己的代码还是要贴上，知道这次完成的十分不好，不管怎么说，毕竟是亲儿子（自己写出来的），就不嫌它丢人了。
 
 
 
下面是一个做的比较好的团队作品：
//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处理也是可以，只不过背景颜色处理上有些麻烦，以及它的兼容性问题。
   

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！