上个星期六,给公司的一些童鞋,做了一次分享,
分享的主题是HTMl+css开发技巧
为此一个星期都没有怎么做项目,准备了一个3dppt,也就是impress.js插件,
每种类型也做了一个例子,,
讲时间2节课还算挺成功的。
为此在博客上发表下,
结构技巧
1,
一张很炫的图片分析
我们的结构是怎么样的呢?
2,一张banner很宽的图片
活动页面banner的宽度大于1000的情况下
看例子,
在我们背景图片基本上有1440px的情况下,又要保证不同分辨率下正常显示,
3,
对于文字围绕图片显示的简单的做法,
同时说明下,浮动,如果容器内有浮动并且没有清楚浮动那么浮动元素不会在容器内包围着。所以要清楚浮动。
讲下清楚浮动的3中方法:
1, 让父容器同时浮动起来(会有副作用)
2, 让浮动元素后面紧跟一个用户清楚浮动的空标签(多一个空标签,破坏了语义化)
3, 给父容器挂一个特殊的class,直接从父容器清楚浮动元素的浮动。(目前最优)
4,
这两种的新和new基本上都是在右上方,
小图标的位置考虑:1,是紧跟文字的后面标题的字数是不固定的,所以肯定是图片标签和文字是同一级,紧跟文字后面来定义。(我们要注意的就是这一种,要考虑标题的字数)
2,这个就不用说用定位,定到右上方。
谈谈定位
CSS 定位机制:
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1, 普通流:除非专门指定,否则所有框都在普通流中定位。(元素根据自己的display类型,长宽,等属性顺序排列在z-index:0这一层的。就是普通流也可以是文档流。)
2, 浮动:就是通过float:left;float:right;来控制元素在同层里的左浮和右浮。Float,会改变正常的文档流的排列但是他仍然还是在z-index:0层里。
3, 定位:
Position:relative(翻译相对)
Position:absolute(翻译绝对)
Position:fixed(翻译固定)
他们都可以改变元素在文档流中的位置。并且可以让元素激活left,right,top,bottom和z-index属性。
Position:static(翻译静态默认值无特殊定位)
看例子
CSS hack
css hack的方式有很多种
1, IE条件注释法:
<!--[if IE]>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script type="text/javascript"></script>
(可以针对不同ie版本分别导入不同样式)
<![endif]-->
<!--[if gt IE6]>只在ie6以上版本生效<![endif]-->
<!--[if ! IE7]>只在ie7上不生效<![endif]-->
2, 选择符前缀法:
*html{}/*只对ie6生效*/
*+html{}/*只对ie7生效*/
*{}/*作为通配符表示所有这个不是hack*/
3, 样式属性前缀法:
.test{ margin-top:10px; *margin-top:8px; _margin-top:8px;}/**在ie6和ie7下生效,_只在ie6下生效*/
布局分析
IE6典型BUG分析(重温一下)
1,
浮动之后,ie6引起外左右边距双倍的bug;
加上display:inline;解决。例子
2,
Ie6文字溢出BUG
例子
原因:
由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法:
1、不放置注释。最简单、最快捷的解决方法;
2、注释不要放置于2个浮动的区块之间;
3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right; width:400px”><span>↓这就是多出来的那只猪</span></div>;
4、去除文字区块的固定宽度,与3有相似之处;
5、在后面加一个<br />或者空格;(不推荐)
6、使用IE注释格式,如:
<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性
6,ie6中奇数宽高的bug
例子
出现1px的差距。
IE6中对于父级奇数宽高,影响的是子级中定位的,right和bottom属性,对于top,left是没有影响的。例子
解决:父级的宽高改成偶数,或者是用hack。
7,
Ie6下select bug
例子
,ie6下select的层级是最高的,,任何东西都遮不住它的,除了iframe。
从这里看,加入iframe相当于嵌入另个html文件
1, 使用iframe来遮住select
看例子
2, 在特定情况下可以使用js,当弹出层弹出时执行select隐藏事件;弹出层隐藏时执行select显示事件。
(但是这种情况有个弊端就是:弹出层的高度是根据内容自适应的,那么当弹出层的内容过少的时候,本身就不用挡住select那么使用这种方法就不行了)。
3,就是模拟select来处理,这种呢就是换种思路解决。用其他标签来代替select,跟select本身就没有撒关系了。例子
8:
Css优先级及!important在ie6中的bug
例子
那我们先看看css的优先级吧
1,ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者span{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;
2,然后呢在在选择器中,越具体优先级越高。
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高,.classC的优先级最低;
3, 在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;html中标签的style的属性都高于css文件中的选择器样式;
4,标有”!important”的规则有最高优先级。
9:宽度自适应
例子
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)或者span时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方案1:
就是在li a 样式中加入zoom:1;(于是,一个更好的解决方法开始流行,它使用了一个生僻的css属性zoom:1来触发hasLayout。网上说zoom是最常用,最安全,成本小的触发hasLayout的方式)
解决方案2:
就是在li 样式中加入display:inline ;
解决方法3(不推荐):
就是将<li>标签写成一行;
解决方案4:
就是在li a 样式中加入width:100%或者一个宽度值;
10:
父级使用padding后子元素绝对定位的BUG
例子
当我们用position来定位的时候,要用到left,top,等属性进行定位的时候,
IE6对他们的解析和IE7,IE8,IE9及FF,chrome的解析不一样
解决办法:给父级定宽度。触发haslayout。(IE下一个神秘的属性,也是Ie浏览器专有的一个属性)(大多ie下解析css出现的Bug,其原因很可能与hasLayout没有被自动触发有关,那么这个时候我们通过一些技巧,手动触发hasLayout属性就可以解决Bug了。hasLayout的触发方法有很多种,例如:设置width,height值,设置position:relative等。可能会带来一些副作用,如果出现看情况用hack来解决,zoom:1;)
如果说项目原因父级只能自适应宽度。那就是使用hack重新对ie6定义left的值
例子文件一直没有上传成功见谅
相关推荐
动态网站开发典型案例 开发语言:PHP+Dreamweaver CS4+CSS+Ajax
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格(用DIV+CSS做的表格像素表格) 内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据...
9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生...DIV+css+js学生网站如何做? 不靠这个吃饭--你还用自己做网站吗? 大学生静态网页成品作业代做
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
静态网页 221html+css个模板 (6)静态网页 221html+css个模板 (6)静态网页 221html+css个模板 (6)静态网页 221html+css个模板 (6)静态网页 221html+css个模板 (6)静态网页 221html+css个模板 (6)静态网页 221html+css...
html+css+jshtml+css+jshtml+css+jshtml+css+js
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
韩顺平 html+css+js笔记,配合视屏看效果更佳。
html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js...
个人博客,基于html+css+JavaScript的完整代码,内容全面可以直接使用。
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf
html+css+js新手练习项目,里面包含例子源码,还有单独文件夹分类。适合新手练习用
这是我自己做的HTML期末大作业html+css+div二十个页面以上,花了很多时间,不用修改就可以作为自己的作业,也可以作为学习参考html静态网页,里面包含两个html+css+div的代码原件
基于HTML+CSS的个人前端设计,背景图等其他修饰以一应俱全,适合初学前端设计以及急需提交作业的小伙伴们!
《精通html5+css3+JavaScript页面设计》代码
运用html+css+js三件套实现动态圣诞树
使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框