css布局中,拥有布局有什么作用

html-css022

css布局中,拥有布局有什么作用,第1张

站制作布局用什么方式这个是个很专业的问题,现在都提倡DIV+CSS布局,就如牛商网独有的关键词转化页,也是要求需要用DIV+CSS布局,这DIV+CSS布局到底有何好处呢?

采用CSS进行网站布局特点非常整洁,使内容更加清晰,更容易让设计人员进行分离,不象表格布局充满各种各样的属性和数字,而且很多CSS文件通常是共用的,从而大大缩减页面代码,提高页面浏览速度,采用DIV+CSS代码进行网站制作对关键词排名优化也是有很多的好处。

DIV+CSS是实现WEB标准的主要技术手段之一,WEB标准不仅仅是HTML向XHTML的转换,更重要的是信息结构清晰、内容与表现相分离,而DIV+CSS技术能较好的实现这种思想。因此,我们看到的多数符合标准的页面都是采用DIV+CSS制作。

提倡用DIV+CSS布局来替代传统的Table布局。原因是TABLE布局将表现和内容混杂在一起,结构不清晰、内容不完整,不利于内容的重用。而且从语义上讲,W3C制定TABLE标签时候只是用它来做表格结构定义的,文档中如果有表格,那么就应该用TABLE。而排版、定位这些表现的东西应该由CSS 来控制。

使用Table布局,为了达到一定的视觉效果,不得不套用多个表格,而搜索引擎一般不抓取三层以上的表格嵌套,遇到多层 表格嵌套时,spider通常会跳过嵌套的内容或直接放弃整个页面。使用DIV+CSS布局,页面代码精简,而且表现和代码分离,使网站代码具备较强的语义结构,在方便维护更新的同时,还能获得更好的搜索引擎表现力。事情证明:各大搜索引擎蜘蛛/机器人更喜欢采用DIV+CSS布局的网站。

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>页面内的超级酷浮动窗口</title>

<style type='text/css'>

<!--

a:visited{text-decoration:nonecolor:slategray}

a:hover{text-decoration:underlinecolor:slategray}

a:link{text-decoration:nonecolor:slategray}

-->

</style>

<script language=JScript>

<!--

//可以打包为js文件

var x0=0,y0=0,x1=0,y1=0

var offx=6,offy=6

var moveable=false

var hover='orange',normal='slategray'//color

var index=10000//z-index

//开始拖动

function startDrag(obj)

{

if(event.button==1)

{

//锁定标题栏

obj.setCapture()

//定义对象

var win = obj.parentNode

var sha = win.nextSibling

//记录鼠标和层位置

x0 = event.clientX

y0 = event.clientY

x1 = parseInt(win.style.left)

y1 = parseInt(win.style.top)

//记录颜色

normal = obj.style.backgroundColor

//改变风格

obj.style.backgroundColor = hover

win.style.borderColor = hover

obj.nextSibling.style.color = hover

sha.style.left = x1 + offx

sha.style.top = y1 + offy

moveable = true

}

}

//拖动

function drag(obj)

{

if(moveable)

{

var win = obj.parentNode

var sha = win.nextSibling

win.style.left = x1 + event.clientX - x0

win.style.top = y1 + event.clientY - y0

sha.style.left = parseInt(win.style.left) + offx

sha.style.top = parseInt(win.style.top) + offy

}

}

//停止拖动

function stopDrag(obj)

{

if(moveable)

{

var win = obj.parentNode

var sha = win.nextSibling

var msg = obj.nextSibling

win.style.borderColor = normal

obj.style.backgroundColor = normal

msg.style.color = normal

sha.style.left = obj.parentNode.style.left

sha.style.top = obj.parentNode.style.top

obj.releaseCapture()

moveable = false

}

}

//获得焦点

function getFocus(obj)

{

if(obj.style.zIndex!=index)

{

index = index + 2

var idx = index

obj.style.zIndex=idx

obj.nextSibling.style.zIndex=idx-1

}

}

//最小化

function min(obj)

{

var win = obj.parentNode.parentNode

var sha = win.nextSibling

var tit = obj.parentNode

var msg = tit.nextSibling

var flg = msg.style.display=="none"

if(flg)

{

win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2

sha.style.height = win.style.height

msg.style.display = "block"

obj.innerHTML = "0"

}

else

{

win.style.height = parseInt(tit.style.height) + 2*2

sha.style.height = win.style.height

obj.innerHTML = "2"

msg.style.display = "none"

}

}

//关闭

function cls(obj)

{

var win = obj.parentNode.parentNode

var sha = win.nextSibling

win.style.visibility = "hidden"

sha.style.visibility = "hidden"

}

//创建一个对象

function xWin(id,w,h,l,t,tit,msg)

{

index = index+2

this.id = id

this.width = w

this.height = h

this.left= l

this.top = t

this.zIndex = index

this.title = tit

this.message = msg

this.obj = null

this.bulid = bulid

this.bulid()

}

//初始化

function bulid()

{

var str = ""

+ "<div id=xMsg" + this.id + " "

+ "style='"

+ "z-index:" + this.zIndex + ""

+ "width:" + this.width + ""

+ "height:" + this.height + ""

+ "left:" + this.left + ""

+ "top:" + this.top + ""

+ "background-color:" + normal + ""

+ "color:" + normal + ""

+ "font-size:10px"

+ "font-family:Verdana"

+ "position:absolute"

+ "cursor:default"

+ "border:2px solid " + normal + ""

+ "' "

+ "onmousedown='getFocus(this)'>"

+ "<div "

+ "style='"

+ "background-color:" + normal + ""

+ "width:" + (this.width-2*2) + ""

+ "height:20"

+ "color:white"

+ "' "

+ "onmousedown='startDrag(this)' "

+ "onmouseup='stopDrag(this)' "

+ "onmousemove='drag(this)' "

+ "ondblclick='min(this.childNodes[1])'"

+ ">"

+ "<span style='width:" + (this.width-2*12-4) + "padding-left:3px'>" + this.title + "</span>"

+ "<span style='width:12border-width:0pxcolor:whitefont-family:webdings' onclick='min(this)'>0</span>"

+ "<span style='width:12border-width:0pxcolor:whitefont-family:webdings' onclick='cls(this)'>r</span>"

+ "</div>"

+ "<div style='"

+ "width:100%"

+ "height:" + (this.height-20-4) + ""

+ "background-color:white"

+ "line-height:14px"

+ "word-break:break-all"

+ "padding:3px"

+ "'>" + this.message + "</div>"

+ "</div>"

+ "<div style='"

+ "width:" + this.width + ""

+ "height:" + this.height + ""

+ "top:" + this.top + ""

+ "left:" + this.left + ""

+ "z-index:" + (this.zIndex-1) + ""

+ "position:absolute"

+ "background-color:black"

+ "filter:alpha(opacity=40)"

+ "'>by wildwind</div>"

document.body.insertAdjacentHTML("beforeEnd",str)

}

//-->

</script>

<script language='JScript'>

<!--

function initialize()

{

var a = new xWin("1",160,200,200,200,"Message","xWin <br>A Cool Pop Div Window<br>Version:1.0<br>2002-8-13")

var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com</a><br>and u can also sign my guestbook at:<br><a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook</a><br><br>thx!!! =)...")

var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href='mailto:wildwind_zz@21cn.com'>Wildwind</a>!")

}

window.onload = initialize

//-->

</script>

</head>

<body onselectstart='return false' oncontextmenu='return false' scroll='no'>

</body>

</html>

或者

<html>

<head>

<title>用层模拟的小窗口(可拖动展合)</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<style type='text/css'>

<!--

body{font-size:12px}

a:visited{text-decoration:nonecolor:slategray}

a:hover{text-decoration:underlinecolor:slategray}

a:link{text-decoration:nonecolor:slategray}

-->

</style>

<script language=JScript>

<!--

//可以打包为js文件

var x0=0,y0=0,x1=0,y1=0

var offx=6,offy=6

var moveable=false

var hover='orange',normal='#336699'//color

var index=10000//z-index

//开始拖动

function startDrag(obj)

{

if(event.button==1)

{

//锁定标题栏

obj.setCapture()

//定义对象

var win = obj.parentNode

var sha = win.nextSibling

//记录鼠标和层位置

x0 = event.clientX

y0 = event.clientY

x1 = parseInt(win.style.left)

y1 = parseInt(win.style.top)

//记录颜色

normal = obj.style.backgroundColor

//改变风格

obj.style.backgroundColor = hover

win.style.borderColor = hover

obj.nextSibling.style.color = hover

sha.style.left = x1 + offx

sha.style.top = y1 + offy

moveable = true

}

}

//拖动

function drag(obj)

{

if(moveable)

{

var win = obj.parentNode

var sha = win.nextSibling

win.style.left = x1 + event.clientX - x0

win.style.top = y1 + event.clientY - y0

sha.style.left = parseInt(win.style.left) + offx

sha.style.top = parseInt(win.style.top) + offy

}

}

//停止拖动

function stopDrag(obj)

{

if(moveable)

{

var win = obj.parentNode

var sha = win.nextSibling

var msg = obj.nextSibling

win.style.borderColor = normal

obj.style.backgroundColor = normal

msg.style.color = normal

sha.style.left = obj.parentNode.style.left

sha.style.top = obj.parentNode.style.top

obj.releaseCapture()

moveable = false

}

}

//获得焦点

function getFocus(obj)

{

if(obj.style.zIndex!=index)

{

index = index + 2

var idx = index

obj.style.zIndex=idx

obj.nextSibling.style.zIndex=idx-1

}

}

//最小化

function min(obj)

{

var win = obj.parentNode.parentNode

var sha = win.nextSibling

var tit = obj.parentNode

var msg = tit.nextSibling

var flg = msg.style.display=="none"

if(flg)

{

win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2

sha.style.height = win.style.height

msg.style.display = "block"

obj.innerHTML = "0"

}

else

{

win.style.height = parseInt(tit.style.height) + 2*2

sha.style.height = win.style.height

obj.innerHTML = "2"

msg.style.display = "none"

}

}

//创建一个对象

function xWin(id,w,h,l,t,tit,msg)

{

index = index+2

this.id = id

this.width = w

this.height = h

this.left= l

this.top = t

this.zIndex = index

this.title = tit

this.message = msg

this.obj = null

this.bulid = bulid

this.bulid()

}

//初始化

function bulid()

{

var str = ""

+ "<div id=xMsg" + this.id + " "

+ "style='"

+ "z-index:" + this.zIndex + ""

+ "width:" + this.width + ""

+ "height:" + this.height + ""

+ "left:" + this.left + ""

+ "top:" + this.top + ""

+ "background-color:" + normal + ""

+ "color:" + normal + ""

+ "font-size:8pt"

+ "font-family:Tahoma"

+ "position:absolute"

+ "cursor:default"

+ "border:2px solid " + normal + ""

+ "' "

+ "onmousedown='getFocus(this)'>"

+ "<div "

+ "style='"

+ "background-color:" + normal + ""

+ "width:" + (this.width-2*2) + ""

+ "height:20"

+ "color:white"

+ "' "

+ "onmousedown='startDrag(this)' "

+ "onmouseup='stopDrag(this)' "

+ "onmousemove='drag(this)' "

+ "ondblclick='min(this.childNodes[1])'"

+ ">"

+ "<span style='width:" + (this.width-2*12-4) + "padding-left:3px'>" + this.title + "</span>"

+ "<span style='width:12border-width:0pxcolor:whitefont-family:webdings' onclick='min(this)'>0</span>"

+ "<span style='width:12border-width:0pxcolor:whitefont-family:webdings' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"

+ "</div>"

+ "<div style='"

+ "width:100%"

+ "height:" + (this.height-20-4) + ""

+ "background-color:white"

+ "line-height:14px"

+ "word-break:break-all"

+ "padding:3px"

+ "'>" + this.message + "</div>"

+ "</div>"

+ "<div id=xMsg" + this.id + "bg style='"

+ "width:" + this.width + ""

+ "height:" + this.height + ""

+ "top:" + this.top + ""

+ "left:" + this.left + ""

+ "z-index:" + (this.zIndex-1) + ""

+ "position:absolute"

+ "background-color:black"

+ "filter:alpha(opacity=40)"

+ "'></div>"

document.body.insertAdjacentHTML("beforeEnd",str)

}

//显示隐藏窗口

function ShowHide(id,dis){

var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis

document.getElementById("xMsg"+id).style.display = bdisplay

document.getElementById("xMsg"+id+"bg").style.display = bdisplay

}

//modify by haiwa @ 2005-7-14

//

//-->

</script>

<script language='JScript'>

<!--

function initialize()

{

var a = new xWin("1",160,200,200,200,"窗口1","xWin <br>A Cool Pop Div Window<br>Version:1.0<br>2002-8-13")

ShowHide("1","none")//隐藏窗口1

}

window.onload = initialize

//-->

</script>

</head>

<base target="_blank">

<body onselectstart='return false' oncontextmenu='return false' >

<a onclick="ShowHide('1',null)return false" href="">窗口1</a>

</body>

</html>