好处:
1.容易被搜索引擎搜索到。
2.页面简捷,便于查看。
3.容易控制。
基本的框架:
<html>
<head>
.....
</head>
<body></body>
<html>
布局常识:
不同浏览器间的区别
显示器的区别,一般会在左右留下空白的地方。
一般定义宽度为900-1024,即显示器的分辨率来定义宽度,这样就不会出现水平滚动条。
应该有完整的思路来定义布局。
body体默认有外边距。
margin:外边距
padding:内边距
在一个div中如果放置了,多个div的话,通常不用指定这个div的高度,内部的div会自动撑开。
clear: 清除浮动区块,即不挨着任何浮动块。
DIV居中:
margin-left: auto;
margin-right:auto;//左右都自动摆,就会居中。(IE不会)
解决:在body体里的都居中:text-align:center; 但是这样,div里的内空都居中了,只要在div里再定义: text-align:left;即可。
选择器:
# id选择器
. 类选择器
DIV标签是块标签,块标签会自动换行。
DIV之间的间隙
通过div来分隔,通过调整div的宽度和高来分隔(IE指定的最小的高度是18像素,解决办法:将div的overflow:hidden;)。
关联选择器
#id #anothers
关联优先级是最高的
清除浮动区块
即脱离文档流:float:left; clear:both;
div中 class与id同时使用
<div id="aa"class="bb">test</div>
#aa{ width:300px; height:50px;background-color:Red;}
.bb{ width:100px; height:300px; background-color:blue;}
不可以同时使用。
#aa .bb{xxx}
不同浏览器之间的区别:
IE和FF居中不一样的问题,
IE指定的DIV最小的高度是18像素,即小于18个像素的都按18个像素,即当小于18个像的时候都要隐藏:overflow:hidden;
IE会自动调整高度,FF不会,指定多高就是多高。(解决方法:把包含它的DIV不指定高度就可以了
H1不一样
IE和FF的列表ul显示不一样。
border IE=内容+边框 FF=边框另算(解决方法: 写两个宽度
width : 150px !important; //FF识别这个,IE不识别, 所以IE取后面的高度。 //注意计算高度时,一定要border使用的是否border、还是border-left等。把数据算清楚。
width : 155px ;
)
)
注意分辨率的差异!!!
至少要支持1024的。最好是用绝对的宽度,那样不管在什么分辩率下都不会变形。
IE和FF的收藏网站的实现方法也不一致。。。
通过css将多个图标或图片用同一张图片通过定位背景位置调用到页面