使用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处理也是可以，只不过背景颜色处理上有些麻烦，以及它的兼容性问题。
相关文章：
Yii-yiic使用
原文在：http://blog.sina.com.cn/s/blog_862b12fb0101n00v.htmlyii提供了强大的命令行工具来快速的创建相关组件和应用。下面就来讲解用yiic工具快速创建yii应用我的web目录在d:\ EasyPHP-DevServer\data\localweb下；yiiframework在D:\EasyPHP-DevServer…
nginx语法
一、 1. 配置文件由指令与指令块构成； 2. 每条指令以；分号结尾，指令与参数间以空格符号分隔； 3. 指令块以{} 大括号将多条指令组在一起； 4. include语句允许组合多个配置文件以提升可维护性； 5. 使用#符号添…
如何对 Rocksdb以及类似存储引擎社区 提出 有效的性能问题？
性能 是rocksdb的优点，活跃的社区十分欢迎大家对各自使用rocksdb 过程中性能相关的疑惑点进行提问。提问的时候如果能够提供更多，更详细的信息 是可以增加快速得到恢复回复的概率。当然，性能是一个非常广泛且有巨量影响因素的话题，…
我已经喜欢上了Python
早就听说了Python语言，今天试了试，挺喜欢她了。 Python 3.4.2 (v3.4.2:ab2c023a9432, Oct 6 2014, 22:15:05) [MSC v.1600 32 bit (Intel)] on win32Type "copyright", "credits" or "license()" for more information.&g…
layui跳转html如何带参数,Layui跳转页面代码（可携带复杂参数）
今天用了Layui的“数据表格 - 数据操作”示例代码，结果发现点击“编辑”按钮出出来一个弹出消息框，效果如下：虽然说也可以用“弹出层”做编辑页面，但是，由于我编辑的东西很多，用“弹出层”不太理想。我就想…
java获取日期
/* * 获取昨天日期 方法一，这个方法好像有点慢 */Date dt new Date(); Calendar cal Calendar.getInstance();cal.add(Calendar.DATE, -1);time new SimpleDateFormat( "yyyy-MM-dd").format(cal.getTime()); /* * 获取昨天日期 方法二 */Date as ne…
DRF (Django REST framework) 中的视图类
视图说明 1. 两个基类 1）APIView rest_framework.views.APIView APIView是REST framework提供的所有视图的基类，继承自Django的View父类。 APIView与View的不同之处在于： 传入到视图方法中的是REST framework的Request对象，而不是…
Go：分布式学习利器（1） -- 开发环境搭建 + 运行第一个go程序
文章目录为什么要学习 go开发环境搭建 -- MAC运行第一个go程序go 函数的返回值设置go 函数的命令行参数为什么要学习 go 在如下几个应用场景的需求下产生了go: 超大规模分布式计算集群多核硬件的架构web模式下的大规模开发和频繁的进度更新 所以go 语言有如下几个特点&#…
html生成的超级链接预览功能,超链接特效
功能说明超链接特效功能是基于报表特殊效果功能的一种扩展实现。报表特殊效果功能的作用是为单元格添加一些特殊的显示效果。超链接特效可以给超链接添加特殊显示效果，实现超链接功能的扩展增强。当产品默认生成的超链接显示效果不能满足用户的个性化需求时…
ROOT android 原理。 基于（zergRush）
出自： http://bbs.gfan.com/android-2996211-1-1.html 须要ROOT的同学请去上面的地址下载。 a.控制手机创建个暂时目录,然后把zergRush脚本写入此目录,并改动此文件权限使之能够运行(这一步无需ROOT权限); adb shell rm -r /data/local/tmpadb shell mkdir /data/lo…
Oracle数据库日常维护知识总结
DBA要定时对数据库的连接情况进行检查，看与数据库建立的会话数目是不是正常，如果建立了过多的连接，会消耗数据库的资源。同时，对一些“挂死”的连接，可能会需要DBA手工进行清理。首先要说的是，不同版本数据…
JAVA 第五周学习总结
20175304 2018-2019-2 《Java程序设计》第五周学习总结 教材学习内容总结 Java为什么要定义接口：接口的作用是实现多重继承，因为一个子类只能继承一个父类，但是可以实现一个或多个接口。使用关键字interface来定义一个接口，定义方…
Go: 分布式学习利器（2）-- Go中的变量，常量 以及与其他语言变量之间的差异
文章目录1. Go 语言编写测试代码2. Go 的变量3. Go 常量定义1. Go 语言编写测试代码 源码文件以 _test结尾： xxx_test.go测试方法名需以Test开头： func TESTXXX(t *testing.T) {..} ，且参数列表直接用go 默认的test参数即可 如下first_test…
Scala：Functions and Closures
1 object Functions {2 def main(args: Array[String]) {3 // 本地函数4 def localFun(msg: String) println(msg)5 localFun("Hi")6 7 // 函数对象8 var list List(1, 2, 3)9 list.foreach((x: Int) > println(x)) 10 list.fore…
云计算机机房怎么样,如何知道云电脑配置多少？怎么选择云电脑机房？
一般在玩一款游戏时，需要考虑玩游戏的配置，云电脑帮助我们实现配置的需求，那如何才能知道云电脑配置是多少，该怎么选择云电脑机房。在使用云电脑时，我们不用考虑自己的手机、平板和电脑的硬件，只要设备能正…
eclipse中新建android项目，不自动生成R.java
http://huyuantai000.iteye.com/blog/1681582转载于:https://www.cnblogs.com/wmm3416/p/3386698.html
获取子iframe的属性
第一种方法： <iframe name"iframeName" src"http://www.test.com"></iframe> // name"iframeName" 取值 window.frames[iframeName] 第二种方法： <iframe id"iframeId" src"http://www.t…
Go: 分布式学习利器（3） -- Go的数据类型和运算符
文章目录1. Go的数据类型1.1 类型转化1.2 类型的预定义1.3 指针类型2. Go 的运算符1. Go的数据类型 GO的基本数据类型如下： bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint64 uintptr byte // 基本和uint8 类型一样 rune // 代表unicode …
云职教课堂计算机文化基础,2020智慧职教云课堂计算机文化基础答案最新最全单元测试答案...
参考答案如下智慧职教最新最全【判断题】两种气体在相同温度下放入同一个容器中,测得的压强分别为 和 ,则把它们同时放入容器中后的总压强为 .云课【单选题】根据物质的导电能力,将物质分为哪些类别?A. 导体 B. 半导体 C. 绝缘体 D. 以上都对堂计【单选题】按照数的进位制概念…
测试用例挑选策略
在软件开发过程中，无论是在feature testing还是在final regression testing中，测试策略的好坏在整个质量保证过程中起着至关重要的作用，尤其是在测试资源有限的情况下，影响更为突出。好的测试策略能够更快速的发现软件最有value的…
php json josn_decode()返回的是对像，如何把对像转成数组
php json josn_decode()返回的是对像，如何把对像转成数组 a.php传值页面，使用 json_encode($array)对数组进行加密码. b.php页面在接收a.php传过来的页面的值使用的是 json_decode($array),发现解密出来的数据是对象形式的： array(2) {[0]>…
【题解】黑格覆盖
题目描述 在一张由MN个小正方形格子组成的矩形纸张上，有k个格子被涂成了黑色。给你一张由mn个同样小正方形组成的矩形卡片，请问该卡片最多能一次性覆盖多少个黑格子？ 输入输出格式 输入格式 输入共k1行： 第1行为5个整数M、N、m、n…
Go 分布式学习利器（4）-- 条件和循环
文章目录1. 循环语句2. 条件语句2.1 if...else 条件2.2 switch 条件1. 循环语句 Go语言和其他语言在循环语句上的主要差异是 Go语言仅支持for关键字。 语法形式：for i : 5; i > 0; i--,不像其他语言有两个小括号左右围着。 两种不同的循环体语法如下࿱…
php 对象的执行
1.BNF范式 %token T_OBJECT_OPERATOR "-> (T_OBJECT_OPERATOR)"unticked_statement: | expr ; { zend_do_free(&$1 TSRMLS_CC); }expr:r_variable { $$ $1; }| expr_without_variable { $$ $1; } ;r_variab…
golang不编译.html,golang之条件编译
Go语言能够经过go/build包里定义的tags和命名约定来让Go的包能够运行不一样的代码。html标签编译在源代码里添加标注，一般称之为编译标签(build tag)。编译标签采用靠近源代码文件顶部用注释的方式添加。go build在构建一个包的时候会读取这个包里的每一个源文件而且…
深入理解Struts2中的OGNL表达式
Struts 2中的表达式语言Struts 2支持以下几种表达式语言： OGNL（Object-Graph Navigation Language），可以方便地操作对象属性的开源表达式语言； JSTL（JSP Standard Tag Library），JSP …
[ZJOI2010]网络扩容
Description 给定一张有向图，每条边都有一个容量C和一个扩容费用W。这里扩容费用是指将容量扩大1所需的费用。 求： 1、在不扩容的情况下，1到N的最大流； 2、将1到N的最大流增加K所需的最小扩容费用。 Input 第一行包含三个整数N,M,…
zookeeper -- Mac 上 Intellij IDEA 配置 zookeeper(3.5.8) 源码阅读、运行、调试环境
近期需要整理MIT6.824 中 分布式系统协调服务 zookeeper 的一些知识，想要在Mac 本地搭建一个可以方便运行调试的zookeeper环境，这玩意竟然耗费了一上午的时间，实在是不可忍；当然，主要还是因为对Java的编译运行环境 以及…
南昌大学计算机专业高数课本,南昌大学高等数学期末考试.pdf
南昌大学2008学年第二学期高等数学期末考试试卷( 3 15 )一、 填空题 每空 分，共 分 a 3i j 2k, b i 2j k, (2a)(3b)1.设 则 _____.2 2 2 22. 函数 z ln[(25 x y )(x y 4)]的定义域是_______________________…
金智教育CTO：大数据人才培养要先行一步
金智教育CTO、北航云计算硕士项目主任陈滢博士认为，虽然在中国，互联网行业已经有了比较多的大数据实践，而且像金融、电信等行业也确实感受到了大数据给业务带来的压力，但是从整个大数据市场来看，还是“雷声大、雨点小”…