首页 > Web开发 > 详细

网页布局与样式

时间:2014-02-18 22:46:25      阅读:576      评论:0      收藏:0      [点我收藏+]

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特点
?元素在浮动的时候遇到父容器的边框就会卡住
?如果子元素和父元素同时向相反的方向浮动,那么先浮动父元素,然后子元素在父亲元素的内部浮动
?如果父元素没有浮动而且包含了浮动的子元素,那么浮动的元素就会脱离文档流(重点)
bubuko.com,布布扣
 
 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″;
 
 

网页布局与样式

原文:http://www.cnblogs.com/kuugachen/p/3554173.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!