使用HTML CSS完成初步的页面,任务九：使用HTML/CSS实现一个复杂页面(示例代码)

任务目的

通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力

实践代码的复用、优化

任务描述

整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致

任务注意事项

只需要完成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完成初步的页面,任务九：使用HTML/CSS实现一个复杂页面(示例代码)相关推荐

php后台登录页修改成ajax,使用php后台给自己做一个页面路由，配合ajax实现局部刷新。(示例代码)...
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一.编写页面主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. Document click 二.配置CodeMirror 在index.js中配置CodeMi ...
HTML怎么跟随页面缩放,如何让网页跟着浏览器全比例缩小(示例代码)
需求今天帮朋友做个小网页,但一直没明白对方的需求; 原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例" 未满足需求时满足需求之前,登陆框的 mar ...
django html跳转页面跳转页面,Django html单击打开另一个html页面
我目前在使用django打开html页面时遇到了问题,尽管我已经尝试在网址.py, 视图.py,以及html页面.我的代码如下: 电池电流.py在"视图"文件夹下from __fu ...
html页面tableview,用JS写的一个TableView控件代码
请看看编码是否规范,使用是否方便 HTML: 代码编号姓名 {value}{value} 编号名称 {value}{value} Javascript: 代码 //class TableView { ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
css 竖行进度图_前端学习--汇集了大量 CSS 的使用和学习的示例代码
CSS-Inspiration 这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法. 目前已有上百种的CSS 实现示例, ...
使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转
2019独角兽企业重金招聘Python工程师标准>>> 使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转今天,有人请教我处理办法,问题是: 一个Grid,选择某条记录后 ...

使用HTML CSS完成初步的页面,任务九：使用HTML/CSS实现一个复杂页面(示例代码)

使用HTML CSS完成初步的页面,任务九：使用HTML/CSS实现一个复杂页面(示例代码)相关推荐

最新文章

热门文章