任务九：使用HTML/CSS实现一个复杂页面

Posted 2020-09-11 Z皓

任务目的

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

 

任务描述

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

 

任务注意事项

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

 

任务完成与总结：

 一个人搞这个页面，肝有点不行，索性不切图了，计划直接把大概的页面写出来，然而写到第二天的时候完全失去耐心Zzzz，这次任务算是考验到我了。算了，还是分析其他人的代码吧，不过自己的代码还是要贴上，知道这次完成的十分不好，不管怎么说，毕竟是亲儿子（自己写出来的），就不嫌它丢人了。

 https://cruxf.github.io/BaiduTask/test9.html

 

 

下面是一个做的比较好的团队作品：

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处理也是可以，只不过背景颜色处理上有些麻烦，以及它的兼容性问题。