1.5 使用布局技术排版布局页面。 - 互联锦州

	返回首页智能建站网上开店倾情许愿锦州资讯数码游戏电脑维修锦州汽车佳缘聊天留言反馈锦州论坛

　　首页 > 综合信息 > 站长中心

新闻搜索：

1.5 使用布局技术排版布局页面。

0416.net　　发布：2008-3-13 9:48:24　　来自：转载　　浏览：次

1.5 使用布局技术排版布局页面。

素材图像得到以后，就可以开始制作HTML页面了，在生成页面的时候有两种不同的技术来组织页面中的内容，一种是使用最多的表格布局的方式，另外一种是现在比较流行的div加样式的布局方式，在这里会依次给大家进行介绍。

1.5.1 表格布局

表格布局是最传统，也是现在最为成熟的一种网页排版技术，使用表格排版布局的方法本着“从上到下，从左到右，从外到内”的原则来对效果图进行分析，然后再按“从上到下，从左到右，从外到内”的顺序进行实际的页面表格制作。具体操作步骤如下：
1.启动Dreamweaver 8软件，打开Dreamweaver 8软件的【文件】面板，把前面使用Fireworks 8生成的网页“index.html”删除，重新建立一个新的空白页面，命名为“talbe.html”。如图1.82所示。

图1.82 Dreamweaver 8的【文件】面板
【说明】制作内容页面时，不能直接使用Fireworks 8所生成的网页，要重新建立一个新的页面，因为整个页面中的表格要重新制作。
2.选择【窗口】@@【CSS样式】命令（快捷键：【Shift+F11】），打开Dreamweaver 8的CSS样式面板。如图1.83所示。

图1.83 打开Dreamweaver 8的样式面板
3.点击【CSS样式面板】右下角的按钮，创建新的样式规则。
4.在弹出的【新建样式规则】面板中进行相应的设置。在“选择器类型”单选按钮中选择“标签”；在【标签】文本框中输入“body”；在“定义在”单选按钮中选择【新建样式表文件】选项。如图1.84所示。

图1.84 新建样式规则
5.点击【确定】按钮，进入到保存样式的窗口。如图1.85所示。

图1.85 保存样式对话框
6.给这个样式命名为“css”，保存在当前站点中的“style”文件夹中。
7.点击【保存】按钮，进入到样式效果的编辑窗口。
8.在【编辑样式】窗口选择左侧【分类】里的【背景】，在右侧进行相应的设置。在【背景颜色】选取框中设置背景颜色为白色；在【背景图像】文本框中输入背景图片的相对路径，如图1.86所示

图1.86 设置背景的样式
9.继续在【编辑样式】窗口选择左侧【分类】里的【方框】，在右侧进行相应的设置。设置【边界】文本框中所有的值都为0像素。如图1.87所示

图1.87 设置边界的样式
10.点击【确定】按钮，样式创建完毕。相应的样式表文件保存这站点中的“style”文件夹内。
11.可以在站点文件夹中双击这个样式文件，在Dreamweaver 8的编辑窗口中打开，添加下列样式代码：
.hongzi1 {
font-family: "宋体", "黑体";
font-size: 9pt;
color: #d70303;
}
.z4 {
font-family: "宋体", "黑体";
font-size: 9pt;
line-height: 18pt;
color: #666666;
}
.STYLE1 {color: #666666}
.bk {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
}
.bk1 {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #b8b8b8;
font-family: "宋体", "黑体";
font-size: 9pt;
}
a:visited {
color: #666666;
text-decoration: none;
font-size: 9pt;
}
a:hover {
color: #FFA100;
text-decoration: underline;
font-size: 9pt;
}

a:link {
color: #666666;
text-decoration: none;
font-size: 9pt;
}
a:active {
color: #FFAA00;
text-decoration: none;
font-size: 9pt;
}
#demo {
margin-left: 18px;
margin-right: 5px;
}

.zi2 {
font-family: "宋体", "黑体";
font-size: 9pt;
color: #986700;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-image: url(../images/bg3.gif);
}
.bg {
background-image: url(../images/bg2.gif);
background-repeat: repeat-y;
background-position: left;
}
.z3 {
font-family: "宋体", "黑体";
font-size: 9pt;
color: #FFFFFF;
}
.mtDropdownMenu {
LEFT: -1000px;
OVERFLOW: hidden;
POSITION: absolute;
TOP: -1000px;
width: 300px;
}
.mtDropdownMenu .content { POSITION: absolute;}
.mtDropdownMenu .items { BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid; POSITION: relative; TOP: 0px}
.mtDropdownMenu .item { BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; CURSOR: hand; COLOR: #666; BORDER-BOTTOM: medium none; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none; EXT-DECORATION: none}
.mtDropdownMenu .background { Z-INDEX: 1; FILTER: alpha(opacity=75); LEFT: 0px; POSITION: absolute; TOP: 0px; moz-opacity: .8}
.mtDropdownMenu .shadowRight { Z-INDEX: 3; FILTER: alpha(opacity=40); WIDTH: 2px; POSITION: absolute; TOP: 3px; moz-opacity: .4}
.mtDropdownMenu .shadowBottom { Z-INDEX: 1; FILTER: alpha(opacity=40); LEFT: 3px; POSITION: absolute; HEIGHT: 2px; moz-opacity: .4}
.mtDropdownMenu .hover { BACKGROUND: #ffffff; COLOR: #d73e3e}
.mtDropdownMenu .item IMG { MARGIN-LEFT: 10px}
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
如图1.88所示。

图1.88 添加样式表文件
12.接下来进入到页面“table.html”的编辑状态，开始制作页面中的表格，选择【插入】@@【表格】命令（快捷键：【Ctrl+Alt+T】），在页面中插入一个1行2列的表格，同时设置表格的宽度为“984像素”，边框粗细、单元格边距和单元格间距都为0像素。如图1.89所示。

图1.89 插入1行2列的表格
【说明】在默认情况下，表格的边框粗细、单元格边距和单元格间距都设置为0像素。下面所有的表格都是同样的设置，就不再复述，除非有特殊效果需求时，再根据需要进行设置。
13.把鼠标指针停留在左侧的第一个单元格内，在【属性】面板中设置这个单元格的背景颜色为白色，宽度为780像素。
14.在左侧的第一个单元格内，插入一个5行1列的表格，设置这个表格的宽度为780像素。如图1.90所示。

图1.90 插入5行1列的表格
15.把第一行拆分成两列，分别制作页面顶部的完毕链接，第二行插入阴影线图像，第三行插入前面制作好的通栏Flash动画，第四行依次插入导航按钮，第五行则插入动画下方的阴影线条素材，效果如图1.91所示。

图1.91 制作页面顶部区域
16.在大表格的第一个单元格内，刚刚制作好的表格下方插入一个1行3列的表格，宽度同样为780像素，如图1.92所示。

图1.92 添加样式表文件
17.分别设置在三个单元格的宽度为175、15和590像素。
18.在第一个单元格中依次插入图像，制作页面最左侧的部分，第二个单元格中插入一个宽度为15像素的占位符，目的是为了空出距离，效果如图1.93所示。

图1.93 制作页面左侧的内容
【说明】图像占位符指的是1X1像素，背景为透明的Gif图像，在使用Fireworks 8导出效果图的时候是会自动生成的，如果没有，也可以自己使用Fireworks 8软件来制作。图像占位符的作用是根据需要插入到不同的单元格中，用来控制单元格的宽度和高度，这种单元格一般是用来制作间隔的空白区域的。
19.在中间的空白区域插入一个19行1列，宽度为590像素的表格，其中所有的双数单元格都用来制作空白的间隔区域，可以插入图像占位符来控制单元格的高度。
20.在所有的单数的单元格中制作内容，效果如图1.94所示。

图1.94 制作页面中间的内容
21.在制作中间内容顶部的广告区域时，可以首先把广告图片制作成单元格的背景图像，然后再插入一个背景透明的Flash动画覆盖在这个背景图像之上。
22.选择这个Flash动画，在【属性】面板中改变其宽度、高度使其和背景图像一致，然后点击【属性】面板中的【参数】按钮，添加下列参数值：wmode=transparent，这样可以使Flash动画的背景透明，从而显示下方的背景图像，如图1.95所示。

图1.95 添加样式表文件
23.制作广告下方的四个新闻区域时，表格的边框效果是通过CSS样式来进行制作的，可以在【编辑样式】窗口选择左侧【分类】里的【边框】，在右侧进行相应的设置。设置边框的粗细和颜色，如图1.96所示。最下面的组织机构的制作方法也是一样的。

图1.96 设置边框的样式
24.接下来制作页面右侧的内容，在最外面的大表格的第3列插入一个34行1列的表格，依次插入相应的图像和文字即可，效果如图1.97所示。

图1.97 制作页面右侧的内容
25.最后来制作页面底部的版权信息，可以在大表格的下方插入一个3行2列，宽度为984像素的表格，并且依次在单元格内添加内容，效果如图1.98所示。

图1.98 添加样式表文件
26.整个页面制作完毕，按【F12】在IE浏览器中预览的效果如图1.1所示。

1.5.2 DIV加样式布局

DIV加样式布局是现在比较流行的一种布局技术，DIV是HTML的标签，也就是Dreamweaver 8里面的图层，我们可以把DIV标签中的内容看成是网页中的一块区域，在这个区域中可以添加各种内容。然后通过结合样式表来控制不同命名的DIV标签在网页中的显示位置，从而实现网页布局的效果。这样的布局方法有点像使用Fireworks 8绘制效果图，在什么地方需要插入什么内容，直接在相应的位置添加即可，具体的位置坐标由样式表来控制。
整个页面的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="
<div id="biaoti">　市委 | 市人大 | 市政府 | 市政协</div>
<div id="biaoti2"><img src="images/index_r1_c15.gif" width="131" height="20" /></div>
<div id="di2hang"><img src="images/index_r2_c1.gif" width="780" height="3" /></div>
<div id="di3hang">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="97">
<param name="movie" value="images/title.swf" />
<param name="quality" value="high" />
<embed src="images/title.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash" width="780" height="97"></embed>
  </object>
</div>
<div id="di4hang"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(Image113,,images/0-1.gif,1)"><img src="images/0-0.gif" name="Image113" width="61" height="31" border="0" id="Image113" /></a><a id=menu1 href="#" onmouseover="swapImage(button1, preloaded[1][1].src)" onmouseout="swapImage(button1, preloaded[1][0].src)"><img src="images/1-0.gif" name="Image106" width="87" height="31" border="0" id="button1" /></a><a id=menu2 href="#" onmouseover="swapImage(button2, preloaded[2][1].src)" onmouseout="swapImage(button1, preloaded[2][0].src)"><img src="images/2-0.gif" width="89" height="31" border="0" id="button2" /></a><a id=menu3 href="#" onmouseover="swapImage(button3, preloaded[3][1].src)" onmouseout="swapImage(button1, preloaded[3][0].src)"><img src="images/3-0.gif" width="120" height="31" border="0" id="button3" /></a><a id=menu4 href="#" onmouseover="swapImage(button4, preloaded[4][1].src)" onmouseout="swapImage(button1, preloaded[4][0].src)"><img src="images/4-0.gif" width="88" height="31" border="0" id="button4" /></a><a id=menu5 href="#" onmouseover="swapImage(button5, preloaded[5][1].src)" onmouseout="swapImage(button1, preloaded[5][0].src)"><img src="images/5-0.gif" width="87" height="31" border="0" id="button5" /></a><a id=menu6 href="#" onmouseover="swapImage(button6, preloaded[6][1].src)" onmouseout="swapImage(button1, preloaded[6][0].src)"><img src="images/6-0.gif" width="89" height="31" border="0" id="button6" /></a><a id=menu7 href="#" onmouseover="swapImage(button7, preloaded[7][1].src)" onmouseout="swapImage(button1, preloaded[7][0].src)"><img src="images/7-0.gif" width="87" height="31" border="0" id="button7" /></a><img src="images/index_r6_c17.jpg" width="72" height="31" /></div>
<script language=javascript src="style/dropdown_content.js"></script>

<div id="di5hang"><img src="images/index_r7_c1.jpg" width="780" height="9" /></div>

<div id="di6hangdi1lie">
<img src="images/index_r8_c1.gif" width="175" height="39" /><img src="images/index_r9_c1.gif" width="175" height="90" /><img src="images/index_r10_c1.gif" width="175" height="43" /></div>
<div id="di7hangdi1lie">

<DIV id=demo onmouseover=ii=1 onmouseout=ii=0>
<DIV id=demo1>                       •<A                href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060823230769,450,350)">市政府纠风办通告</A><BR>             •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060818973602,450,350)">关于“中国巩义”政府网站首页设计征集活动的公告</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060816300623,450,350)">巩义市水利局办公楼中央空调系统招标公告</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060816192130,450,350)">巩义市子美外国语小学校用电脑招标公告</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060704945704,450,350)">关于开展“巩义市十大知名品牌”“巩义市十大质量功臣”评选工作的通知</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060622387489,450,350)">关于举办第二届巩义市“信息化杯”摄影大赛的通知</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060620558630,450,350)">关于巩义景区（点）门票对市民半价优惠的通知</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060613486493,450,350)">关于开展“巩义市第二届十佳IT青年”评选活动的通知</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060608316169,450,350)">市纪委通告</A><BR> •<A href="javascript:pop(/public/displayPlacard.jsp?PLACARD_ID=20060510235877,450,350)">关于举办“巩义人看巩义”征文暨摄影比赛的公告</A><BR>
</DIV>
<DIV id=demo2></DIV>
<script>
var ii=0;t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function qswhMarquee(){
if (ii==1)return
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee,60)
</script>
</DIV>

</div>
<div id="di8hangdi1lie">
<img src="images/index_r17_c1.gif" width="175" height="50" /><img src="images/index_r20_c1.jpg" width="175" height="40" /><img src="images/index_r22_c1.gif" width="175" height="46" /><img src="images/index_r25_c1.jpg" width="175" height="50" /><img src="images/index_r28_c1.jpg" width="175" height="59" /><img src="images/index_r31_c1.jpg" width="175" height="59" /><img src="images/index_r32_c1.jpg" width="175" height="59" /><img src="images/index_r36_c1.gif" width="175" height="49" /><img src="images/index_r39_c1.jpg" width="175" height="50" /><img src="images/index_r45_c1.jpg" width="175" height="59" /><img src="images/index_r50_c1.jpg" width="175" height="60" /><img src="images/index_r53_c1.gif" width="175" height="50" /><img src="images/index_r58_c1.gif" width="175" height="62" /><img src="images/index_r61_c1.gif" width="175" height="50" /><img src="images/index_r64_c1.jpg" width="175" height="123" /></div>

<div id="di6hangdi3lie">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="590" height="167">
                    <param name="movie" value="images/59.swf" />
                    <param name="quality" value="high" />
                    <param name="wmode" value="transparent" />
                    <embed src="images/59.swf" width="590" height="167" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
</div>
<div id="di8hangdi3lie">
<img src="images/index_r12_c6.gif" width="290" height="25" /></div>
<div id="di9hangdi3lie">
<ul>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
</ul>
<p>更多..</p>
</div>
<div id="di8hangdi4lie">
<img src="images/index_r12_c12.gif" width="290" height="25" /></div>
<div id="di9hangdi4lie">
<ul>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
</ul>
<p>更多..</p>
</div>
<div id="di10hangdi3lie">
<img src="images/index_r20_c6.gif" width="290" height="25" /></div>
<div id="di11hangdi3lie">
<ul>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
</ul>
<p>更多..</p>
</div>
<div id="di10hangdi4lie">
<img src="images/index_r20_c12.gif" width="290" height="25" /></div>
<div id="di11hangdi4lie">
<ul>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a> <img src="images/new.gif" /></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
<li><a href="#">开展专项行动打击违法建设　[8.31]</a></li>
</ul>
<p>更多..</p>
</div>
<img id="gg" src="images/index_r30_c6.jpg" />
<Div id="grfw"></Div>
<Div id="grfw2"><br /> [动态信息] [户　　口] [婚　　姻] [生　　育] [教　　育] [就　　业] <br /> <br /> 　[医　　疗] [住　　房] [交　　通] [税　　收] [出入境] [文　　化] <img src="images/button_more_service.gif" width="73" height="19" border="0" /></Div>
<Div id="tzzfw"></Div>
<Div id="tzzfw2"><br />  　  [动态信息] [政策导向] [投资机会] [税　　收] [人　　才]<br /><img src="images/button_more_service.gif" width="73" height="19" border="0" /></Div>
<Div id="qyfw"></Div>
<Div id="qyfw2"><br /> [动态信息] [设立经营] [网上办税] [质量标准] [人力资源] [工程建设]<br /><br /> [消防治安] [农林环保] [科技之窗] [企业天地]<img src="images/button_more_service.gif" width="73" height="19" border="0" /></Div>
<Div id="lyfw"></Div>
<Div id="lyfw2"><br />   [动态信息] [河洛文化] [风景名胜] <br /><img src="images/button_more_service.gif" width="73" height="19" border="0" /></Div>
<div id="zzjg"><img src="images/index_r62_c6.gif" width="590" height="25" /></div>
<div id="zzjg2"><img src="images/wz.jpg" width="522" height="107" /></div>

<div id="di"><img src="images/index_r65_c1.jpg" width="31" height="10" /></div>
<div id="info">　主办：巩义市人民政府 <br />
    　Copyright-2006　管理维护：<a href="mailto:froglt@163.com">froglt</a> 网页顽主论坛 <a href="http://www.go2here.net"; target="_blank">www.go2here.net</a> <a href="http://www.jianzhan.biz";>www.jianzhan.biz</a></div>
<div id="youbian">
<p id="timetable"></p>
<h1><img src="images/index_r4_c22.gif" width="160" height="80" /></h1>
<h1><img src="images/index_r4_c21.gif" width="160" height="80" /></h1>
<h1><img src="images/index_r4_c20.gif" width="160" height="80" /></h1>
<h1><img src="images/index_r4_c23.jpg" width="160" height="80" /></h1>
<h1><img src="images/index_r14_c20.gif" width="203" height="30" /></h1>
<h1><img src="images/index_r16_c22.gif" width="173" height="58" /></h1>
<h1><img src="images/index_r19_c22.gif" width="173" height="58" /></h1>
<h1><img src="images/index_r24_c22.gif" width="111" height="58" /><img src="images/spacer.gif" width="62" height="1" /></h1>
<h1><img src="images/index_r27_c21.gif" width="203" height="30" /></h1>
<h1><img src="images/index2_f2.gif" width="109" height="128" /></h1>
<h1><img src="images/index_r35_c20.gif" width="203" height="30" /></h1>
<h1><img src="images/index_r38_c24.jpg" width="147" height="46" /></h1>
<h1><img src="images/index_r44_c24.jpg" width="147" height="46" /></h1>
<h1><img src="images/index_r47_c24.jpg" width="147" height="47" /></h1>
<h1><img src="images/index_r52_c24.jpg" width="147" height="47" /></h1>
<h1><img src="images/index_r57_c24.jpg" width="147" height="47" /></h1>
</div>
</body>
</html>
这个页面所链接的样式表文件名为“divcss”，其样式表代码如下：
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
font-family: "宋体", "黑体";
font-size: 9pt;
}
#biaoti {
width:300px;
color: #d70303;
position: absolute;
left: 0px;
top: 0px;
height: 20px;
background-color: #FFFFFF;
line-height: 20px;
}
#biaoti2 {
width:480px;
color: #d70303;
position: absolute;
left: 300px;
top: 0px;
text-align: right;
background-color: #FFFFFF;
}
#youbian{
width:203px;
height:1328px;
background-image:url(../images/bg2.gif);
position:absolute;
left:781px;
top:0;
}
#youbian p{
line-height:20px;
text-align:center;
color: #FFFFFF;
}
#youbian h1{
text-align:center;
top: 10px;
}
#timetable{
color: #fff;
}
#di2hang{
position:absolute;
width:780px;
height:3px;
top:20px;
left:0px;
}
#di3hang{
position:absolute;
width:780px;
height:97px;
top:23px;
left:0px;
z-index:0;
}
#di4hang{
position:absolute;
width:780px;
height:31px;
top:120px;
left:0px;
z-index:10;
}
#di5hang{
position:absolute;
width:780px;
height:9px;
top:151px;
left:0px;
}
#di6hangdi1lie{
position:absolute;
width:175px;
height:auto;
top:160px;
left:0px;
}
#demo {
margin-left: 18px;
margin-right: 5px;
OVERFLOW: hidden;
HEIGHT: 120px;
}
#di7hangdi1lie{
position:absolute;
width:175px;
height:130px;
top:332px;
left:0px;
background-image:url(../images/index_r12_c1.gif);
padding-top:3px;
}
#di8hangdi1lie{
position:absolute;
width:175px;
height:auto;
top:462px;
left:0px;
}
#di6hangdi3lie{
position:absolute;
width:590px;
height:167px;
top:160px;
left:190px;
background-image:url(../images/index_r8_c6.jpg)
}
#di8hangdi3lie{
position:absolute;
width:290px;
height:auto;
top:332px;
left:190px;
}
#di9hangdi3lie{
position:absolute;
width:278px;
height:auto;
top:357px;
left:190px;
background-color:#FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
padding-right: 10px;
}
#di9hangdi3lie ul{
line-height:20px;
list-style-image:url(../images/ind_news_dd.jpg);
margin-left: 20px;
margin-top: 10px;
}

#di9hangdi3lie li{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #b8b8b8;
}
#di9hangdi3lie p{
position:relative;
width:250px;
text-align:right;
color: #CC0000;
right:0px;
bottom:10px;
}
#di8hangdi4lie{
position:absolute;
width:290px;
height:auto;
top:332px;
left:490px;
}
#di9hangdi4lie{
position:absolute;
width:278px;
height:auto;
top:357px;
left:490px;
background-color:#FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
padding-right: 10px;
}
#di9hangdi4lie ul{
line-height:20px;
list-style-image:url(../images/ind_news_dd.jpg);
margin-left: 20px;
margin-top: 10px;
}

#di9hangdi4lie li{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #b8b8b8;
}
#di9hangdi4lie p{
position:relative;
width:250px;
text-align:right;
color: #CC0000;
right:0px;
bottom:10px;
}
#di10hangdi3lie{
position:absolute;
width:290px;
height:auto;
top:512px;
left:190px;
}
#di11hangdi3lie{
position:absolute;
width:278px;
height:auto;
top:537px;
left:190px;
background-color:#FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
padding-right: 10px;
}
#di11hangdi3lie ul{
line-height:20px;
list-style-image:url(../images/ind_news_dd.jpg);
margin-left: 20px;
margin-top: 10px;
}

#di11hangdi3lie li{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #b8b8b8;
}
#di11hangdi3lie p{
position:relative;
width:250px;
text-align:right;
color: #CC0000;
right:0px;
bottom:10px;
}
#di10hangdi4lie{
position:absolute;
width:290px;
height:auto;
top:512px;
left:490px;
}
#di11hangdi4lie{
position:absolute;
width:278px;
height:auto;
top:537px;
left:490px;
background-color:#FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
padding-right: 10px;
}
#di11hangdi4lie ul{
line-height:20px;
list-style-image:url(../images/ind_news_dd.jpg);
margin-left: 20px;
margin-top: 10px;
}
#di11hangdi4lie li{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #b8b8b8;
}
#di11hangdi4lie p{
position:relative;
width:250px;
text-align:right;
color: #CC0000;
right:0px;
bottom:10px;
}
#gg{
position:absolute;
width:590px;
height:100;
top:692px;
left:190px;
}
#grfw{
color:#986700;
position:absolute;
width:110px;
height:85px;
top:802px;
left:190px;
background-image:url(../images/index_r34_c6.jpg);
}
#grfw2{
color:#986700;
position:absolute;
width:480px;
height:85px;
top:802px;
left:300px;
background-image:url(../images/bg.gif);
}
#grfw2 img{
position:relative;
text-align:right;
margin-left: 400px;
margin-top: 10px;
}

#tzzfw{
position:absolute;
width:110px;
height:85px;
top:890px;
left:190px;
background-image:url(../images/index_r42_c6.jpg);
}
#tzzfw2{
color:#986700;
position:absolute;
width:480px;
height:85px;
top:890px;
left:300px;
background-image:url(../images/bg.gif);
}
#tzzfw2 img{

position:relative;
text-align:right;
margin-left: 400px;
margin-top: 10px;
}
#qyfw{

position:absolute;
width:110px;
height:85px;
top:978px;
left:190px;
background-image:url(../images/index_r49_c6.jpg);
}
#qyfw2{
color:#986700;
position:absolute;
width:480px;
height:85px;
top:978px;
left:300px;
background-image:url(../images/bg.gif);
}
#qyfw2 img{
position:relative;
text-align:right;
margin-left: 400px;
margin-top: 10px;
}
#lyfw{

position:absolute;
width:110px;
height:85px;
top:1066px;
left:190px;
background-image:url(../images/index_r55_c6.jpg);
}
#lyfw2{
color:#986700;
position:absolute;
width:480px;
height:85px;
top:1066px;
left:300px;
background-image:url(../images/bg.gif);
}
#lyfw2 img{
position:relative;
text-align:right;
margin-left: 400px;
margin-top: 10px;
}
#zzjg{
position:absolute;
width:590px;
height:25px;
top:1165px;
left:190px;
}
#zzjg2{
position:absolute;
width:568px;
height:auto;
top:1190px;
left:190px;
background-color:#FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b8b8b8;
border-bottom-color: #b8b8b8;
border-left-color: #b8b8b8;
padding: 10px;
text-align:center;
}

#di{
width:984px;
background-image:url(../images/index_r65_c1.jpg);
height:10px;
position:absolute;
top:1328px;
left:0;
}
#info{
color:#666666;
background-color:#FFFFFF;
width:984px;
height:50;
padding:10px;
position:absolute;
left:0;
top:1338px;
}
a:visited {
color: #666666;
text-decoration: none;
font-size: 9pt;
}
a:hover {
color: #FFA100;
text-decoration: underline;
font-size: 9pt;
}

a:link {
color: #666666;
text-decoration: none;
font-size: 9pt;
}
a:active {
color: #FFAA00;
text-decoration: none;
font-size: 9pt;
}

.mtDropdownMenu {
LEFT: -1000px;
OVERFLOW: hidden;
POSITION: absolute;
TOP: -1000px;
width: 300px;
}
.mtDropdownMenu .content { POSITION:absolute;}
.mtDropdownMenu .items { BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid; POSITION: relative; TOP: 0px}
.mtDropdownMenu .item { BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; CURSOR: hand; COLOR: #666; BORDER-BOTTOM: medium none; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none; EXT-DECORATION: none}
.mtDropdownMenu .background { Z-INDEX: 1; FILTER: alpha(opacity=75); LEFT: 0px; POSITION: absolute; TOP: 0px; moz-opacity: .8}
.mtDropdownMenu .shadowRight { Z-INDEX: 3; FILTER: alpha(opacity=40); WIDTH: 2px; POSITION: absolute; TOP: 3px; moz-opacity: .4}
.mtDropdownMenu .shadowBottom { Z-INDEX: 1; FILTER: alpha(opacity=40); LEFT: 3px; POSITION: absolute; HEIGHT: 2px; moz-opacity: .4}
.mtDropdownMenu .hover { BACKGROUND: #ffffff; COLOR: #d73e3e}
.mtDropdownMenu .item IMG { MARGIN-LEFT: 10px}
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
代码说明如下：
大家可以在网页的代码中看到很多的div标签，每个div标签中都会包含一个id=”xxx”的属性，这里，所有的id对应的就是样式表文件中的样式名称了。例如<div id="biaoti">所对应的就是样式表文件中的
#biaoti {
width:300px;
color: #d70303;
position: absolute;
left: 0px;
top: 0px;
height: 20px;
background-color: #FFFFFF;
line-height: 20px;
}
这样一段代码，对于每个id样式中的属性的作用和设置，这里就不再详细介绍了，大家可以参考一些关于CSS样式的基础教程，属性的含义其实都不难。

(编辑：不详)

【留言评论】【在线投稿】【打印网页】【关闭窗口】【↑顶部】

　　热点新闻文章

　　互联锦州推荐

　　版权与免责声明

1. 凡本网注明来源为“互联锦州”的所有作品，包括文字与图片，未经本网授权不得转载。违反上述声明者，本网将依法追究法律责任。
2. 凡注明"来源：XXX（非本站）"的作品，均转载自其它媒体，本网转载的目的在于传播更多信息，此类稿件并不代表本网观点，本网不承担此类稿件侵权行为的直接责任及连带责任。
3. 如因作品内容、版权等需要同本网联系的，请在作品在本网发表之日起30日内联，否则视为放弃相关权利。

　　锦州新闻推荐图文

版权信息