网页布局与样式

1、布局

    不要使用<table>进行布局,因为:table可能会在所有tr、td加载完成以后才显示,所以加载完成之前界面是一片空白;用table布局会将布局方式写在html中,违反了“语义性”原则;用table会影响搜索引擎的抓取,不利于SEO。因此Table用来表达真是表格状数据的东西,布局用Div(层)+Css来做,Div用来圈定元素,CSS用来定义元素的位置。
   Div+CSS就是将要布局的内容用<div>切成块,然后使用css描述每个块的大小、位置等。
2、样式
ldisplay:元素是否显示,可选值none(不显示)、block (显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符 )等。
lcursor,鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、text(输入Bean)、wait(忙沙漏)、help(帮助)等。
lLI不显示圆点:LIST-STYLE-TYPE: none;一般设在li或者ul上。
l应用:图片:不显示边框,见备注。
3、CSS浮动
l浮动
Ø在使用div布局的时候,发现每个div都是按照块的方式出来的,不利于页面的布局,所以CSS就提出元素的浮动技术,可以使得块元素在浮动的情况下在同一行中出现。
l特点
Ø元素在浮动的时候遇到父容器的边框就会卡住
Ø如果子元素和父元素同时向相反的方向浮动,那么先浮动父元素,然后子元素在父亲元素的内部浮动
Ø如果父元素没有浮动而且包含了浮动的子元素,那么浮动的元素就会脱离文档流(重点)
网页布局与样式
 
 4、lz-index
Ø    CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对z-index 属性普遍的认识.
l注意
Øz-index只能作用在已经定位的元素对象上。
Ø使用javascript控制这种使用”-”作为连接符的样式属性时必须使用驼峰的命名方式:
var element = document.getElementById(”box”); 
element.style.position = “relative”; 
element.style.zIndex = “9999″;