您当前的位置: 站长圈 > 网页设计

DW 网页布局——div+css

来源:站长圈|0 作者:adminzzq 点击: 0
简易前台效果图

用div+css布局一个简单的前台页面。整个页面分上、中、下三部分组成,上部为头部,考虑到其它分页可用,我们把头部封装成一个独立的页面(qd_top.asp),同样下部为网页的底部,也封装成一个独立的页面(qd_footer.asp)。中部为网页内容显示区,中部我们又分为左、中、右三部分。具体布局设定好以后,我们进入网页布局。
首先把要建的页面看作是一个整体,我们在body区建一个层,取名"box"。
 

建了层以后,我们要对层施加样式,让我们在CSS样式浮动面板的下方点“新建CSS规则”按钮,弹出一个对话框,选“标签”,要标签输入框中输入或查找到“body”,“定义在:”选项我们选“新建样式表文件”,点“确定”,弹出一个“保存样式表文件为”对话框,把样式表文件保存在“css”文件夹里,取名为“qd_css”,点“保存”

样式表文件创建完成。现在进入“body”样式的设置面板,在左侧的分类框中选“方框”,将右侧的方框参数的“填充”与“边界”设为“0”。

再在分类里选“区块”,在其“文本对齐”框中选“居中”,点“确定”。

body样式的代码如下:
body {
text-align: center;
margin: 0px;
padding: 0px;
}
我们再来设置一个此网页的通用样式,用“*”命名。点“新建CSS规则”按钮,在弹出的面板中作如图设置

只在“类型”面板里对文字大小作设置,设置为“12px”。点“确定”。
* {
font-size: 12px;
}

对一个网页来说,超链接是不可少的,为了统一,我们对页面上的超链接作统一设置。点“新建CSS规则”按钮,在弹出的面板中作如图设置

在类型里设超链接的文字颜色为黑色,并在下面的“无”复选框中打上勾,表示超链接无下划线。在区块里的“显示”框里选“块”。


再设置一下鼠标经过时,超链接文本变颜色。


a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #FF9900;
text-decoration: none;
}
接下来做“box”的样式,在“方框”类型中设方框的宽度为800px,在“边界”项,取消“全部相同”的勾,在“左”、“右”框里设置“自动”,“上”、“下”框为空。
#box {
width: 800px;
margin-right: auto;
margin-left: auto;
}
接下来在“box”里布置网页的上中下三个部分。插入三个层分别为“header”、“content”、“footer”

   
 

   
设置"header"的样式:
#header {
background: #FF9999;
height: 145px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
设置"content"的样式:
#content {
width: 800px;
}
设置"footer"样式:
#footer {
line-height: 20px;
height: 50px;
width: 800px;
background: #FF9999;
padding-top: 10px;
clear: both;
}
接下来做“header”的布局:
观看网页的样图,“header”布局比较简单,分标头与导航两部分,并有些小装饰。
网页布局代码:

样式代码如下:
标头部分:#hd1 {
height: 112px;
width: 800px;
border-top: 1px dashed #FFFFFF;
border-bottom: 1px dashed #FFFFFF;
margin-top: 3px;
font: 60px/110px "隶书";
color: #FFFFFF;
filter: DropShadow(Color=red, OffX=1, OffY=1,);
}
导航部分:#hd2 {
height: 25px;
width: 800px;
border-bottom: 1px dashed #FFFFFF;
clear: both;
line-height: 25px;
}
#hd2 ul {
list-style: url(none) none;
width: 800px;
line-height: 25px;
height: 25px;
float: left;
margin-left: 0px;
}
.lb {
line-height: 25px;
height: 25px;
width: 160px;
float: left;
display: block;
}
#hd2 a {
color: #FFFFFF;
text-decoration: none;
}
#hd2 a:hover {
color: #0000FF;
text-decoration: none;
}
接下来做“footer”部位。
网页布局代码:

样式代码:
#footer {
line-height: 20px;
height: 50px;
width: 800px;
background: #FF9999;
padding-top: 10px;
clear: both;
}
现在开始做网页中部的布局,网页代码如下(分左中右三块做):



 



 

 

 



 


最新

 

新闻

 



左侧样式代码:
#left {
background: url(../images/bg_menu.jpg) repeat-y left;
float: left;
height: 500px;
width: 150px;
}
中间样式代码:
#cen {
height: 500px;
width: 450px;
float: left;
margin-left: 10px;
}
#cen1 {
background: url(../images/obj_flower.jpg) no-repeat;
height: 76px;
width: 370px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
#cen2 {
height: 200px;
width: 420px;
margin-right: auto;
margin-left: auto;
}
#cen3 {
background: url(../images/line.gif) repeat-x;
height: 5px;
width: 420px;
margin-right: auto;
margin-left: auto;
}
#cen4 {
height: 200px;
width: 420px;
}
#cen5 {
float: left;
height: 150px;
width: 150px;
border: 1px solid #FF9999;
margin-top: 5px;
}
#cen6 {
background: url(../images/obj_sample_04.jpg);
float: left;
height: 74px;
width: 74px;
border-right: 1px solid #FF9999;
border-bottom: 1px solid #FF9999;
}
#cen7 {
background: url(../images/obj_sample_05.jpg);
float: right;
height: 74px;
width: 74px;
border-top: 1px solid #FF9999;
border-left: 1px solid #FF9999;
}
#cen8 {
float: right;
height: 74px;
width: 74px;
line-height: 74px;
color: #CC6600;
text-align: center;
font-size: 20px;
font-weight: bolder;
}
#cen9 {
float: left;
height: 74px;
width: 74px;
line-height: 74px;
color: #CC6600;
text-align: center;
font-size: 20px;
font-weight: bolder;
}
#cen10 {
float: right;
height: 200px;
width: 260px;
}
右侧样式代码:
#right {
float: right;
height: 500px;
width: 180px;
}
#rt,#rf {
line-height: 25px;
background: #FF9999;
height: 25px;
width: 180px;
margin-top: 10px;
}
#rt1 ,#rf1{
height: 19px;
width: 180px;
margin-top: 2px;
border-top: 1px dashed #FFFFFF;
border-bottom: 1px dashed #FFFFFF;
line-height: 19px;
text-indent: 1em;
text-align: left;
font-size: 14px;
color: #FFFFFF;
}
#rt2 ,#rf2{
height: 200px;
width: 180px;
margin-top: 5px;
border: 1px solid #FF9999;
}
下面我们来把网页头部和底部的代码分别封装成两个独立的头部页面"qd_top.asp"和底部页面"qd_footer.asp"。
新建一个qd_top.asp页面,清空里面的代码,将主页里的头部代码剪切、粘贴到此页上,保存。在主页的原代码处输入调用"qd_top.asp"文件的代码:

再建一个qd_footer.asp页面,清空里面的代码,将主页里的底部代码剪切、粘贴到此页上,保存。在主页的原代码处输入调用"qd_footer.asp"文件的代码:


qd_top.asp页代码

qd_footer.asp页代码