任务九:使用HTML/CSS实现一个复杂页面
2017-04-15 16:31
471 查看
任务目的
通过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力实践代码的复用、优化
任务描述
通过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开)整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致
任务注意事项
只需要完成HTML,CSS代码编写,不需要写JavaScripttab只需要实现样式,有能力余力的同学可以尝试实现不使用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处理也是可以,只不过背景颜色处理上有些麻烦,以及它的兼容性问题。
相关文章推荐
- 【ife】任务九:使用HTML/CSS实现一个复杂页面
- 任务九:使用HTML/CSS实现一个复杂页面
- 使用HTML/CSS实现一个复杂页面--随笔
- 关于贴友的一个书本页面简单布局(html+css)的实现
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 使用js实现多个html页面访问同一个常量
- 使用html+css实现一个个人照片墙
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的...
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- 使用html来定制编辑页面,不需要写代码就可以实现业务处理的界面
- 使用extjs,来实现一个页面调用另一个页面中的方法,并且能获得方法的返回值
- android:如果手机安装了app则打开一个activity,如果没有安装则去到android market如何在HTML页面实现
- 使用html+css仿搜狐网址页面布局
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果