你现在的位置:首页》
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!

我的第一张css+div布局网页--小试牛刀

   你现在看到的是我做的第一张css+div 网页,以前是用表格布局,想学css+div布局,就用我的主页模板开始。这张网页是上、中、下四行,应该比较简单,但我学起来也是一波三折,一共做了四次才成功,我本来就怕学代码,一大堆代码都不知道从那里学起来,看不懂也记不住,天道酬勤,这话一点也不错,笨鸟多学飞,也是可以成功的啊。记录一下过程吧:

(一)、先把网页布局图描绘一下,我分析后觉得应该是4行(不包括body、container),再将其中第二行分3列,第三行主体分3列(我的主页要用到的):


(二)、在 <body></body>之间写上html代码,根据上图要给出11对div标签:(带#号的)

<body>
<div id="container"> //这个是最外面的大盒子,里面包容四行
<div id="banner"> //这个用来放 flash动画和导航
</div>
<div id="daohang">//这个是导航下面的一行,需再分成以下3块:
<div id="zuo1">你现在的位置:首页》</div>
<div id=zhong1 ><marquee behavior="scroll" scrollamount="2" >
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!
</marquee>
</div>
<div id=you1> //放置日期
</div>
</div>
<div id="PageBody"> //主体内容块 ,其中再包含以下3块:
<div id="zuo">
<h3>此处显示 id "zuo"(左) 的内容 </h3>
</div>
<div id="zhong">
<h2>此处显示 id "zhong"(中)的内容的内容 </h2>
</div>
<div id="you">
<h3>此处显示 id "you" (右)的内容</h3>
</div>
</div>
<div id="footer"> // 页脚
<img src="../images/10.jpg" width="784" height="130" />//此处插入页脚图片(这个自动生成的代码会让你头疼,下面会提到)
</div>
</div>

(三)、现在为我的网页编写css代码,包括整体页面代码共12组:

1.body{}: 为整体页面进行设置,结构图中的灰色块

打开“新建CSS规则”面板,方法很多,我用“文件-CSS样式-新建”,选body标签:


出来body标签定义面板,我作如下设置:

背景设置,我的是整张图片,不滚动:

body指结构图片里的那块最大的灰色块,我要它充满整个屏幕,周围不留空白,就设置边界全部为0,内部填充也全部为0

其他设置为默认,点确定后,在<head></head>之间自动加上了以下代码,不用手写,点点鼠标就可以了,好爽!

body{
background-attachment: fixed;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
background-image: url(images/bj01.jpg);
font-family: "宋体";
font-size: 9pt;
line-height: 150%;
color: #003366;
}

2.#container{}:为页面进行设置,结构图中的淡****块

文件-CSS样式-新建,选择器类型点‘高级’。选择器里写:#container,前面加“#”号

  定义了页面尺寸,上下顶对齐,底对齐,左右固定尺寸,这个我可是调整了N次才成功的,要让底下滚动条没有为止,这是为了适应我的****,本来不应该那么烦的

点确定后,在<head></head>之间自动加上了以下代码

#container {
height: 600px;
width: 784px;
margin-top: 0px;
margin-right: 91px;
margin-bottom: 0px;
margin-left: 118px;
}

3.下面按照从外到里,从上到下,从左到右,用第二种方法继续设置,不必抓图了,仅做文字说明:

#banner {  //这里我将插入一个透明flash,需要两边有1象素的白色边框,所以,在分类中选择“边框”左右各设置1象素白色实线线条
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}

在<div id="banner"></div>中,插入透明 flash动画,完成banner的制作。

4.结构图中的粉红色块,需要设置一个背景色-白色,设置宽和高:

#daohang {
height: 20px;
width: 786px;
background-color: #FFFFFF;
}

5.再在里面设置左中右三块,其中“左、中”两块的“方框”设置中,把“浮动”设置为“左对齐”,右边设置为“右对齐”,除了设置宽高外,还进行了文字位置设置。

#zuo1 {
width:250px;
float: left;
height: 20px;
padding-left: 10px;
vertical-align: middle;
padding-top: 4px;
}
#zhong1 {
width:352px;
float: left;
height: 20px;
padding-top: 4px;
}
#you1 {
width:160px;
float: right;
height: 20px;
text-align: right;
padding-right: 10px;
padding-top: 4px;
}

6.#PageBody{} 主体内容块其中也包括了左中右三块,我这里没有加内容:

#PageBody {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #FFFFFF;
height: 600px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #003366;
}

#zuo {
float: left;
width: 240px;
}
#zhong {
width: 304px;
float: left;
}
#you {
float: right;
width: 240px;
}

7.#footer {} 页脚部分,最让我头疼的一块,左右加了两条白线,设置完毕,发现与上面的块之间有空行,费了九牛二虎之力才找到解决办法:设置“定位-类型-绝对”就是 position: absolute;第二个问题,就是插入图片后,与窗口底部有一行几象素的空白,怎么找都没有找到原因所在,最后在图片标签外面加p标签才解决问题:<p><img src="../images/10.jpg" width="784" height="130" /></p>

#footer {
position: absolute;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}

  到这里算是大功搞成了,主体内容我现在是设置成三部分,如果只需要一块或两块,那就更简单啦,接下来,你就在下面显示内容地方放上文字、图片、动画等等,也可以继续放置DIV块,继续编写CSS。

<div id="zuo">
<h3>此处显示 id "zuo"(左) 的内容 </h3>
</div>
<div id="zhong">
<h2>此处显示 id "zhong"(中)的内容的内容 </h2>
</div>
<div id="you">
<h3>此处显示 id "you" (右)的内容</h3>
</div>

  呵呵,我可是没有手写代码哦,动手试试,你肯定也能做到,因为我是够菜的人了,我能做到的,你也肯定能 。天道酬勤,不错,努力就成。这是我新年的第一张网页。

2009年1月7日

  昨天,下载了firefox浏览器,才发现又有状况出现,还是#footer {} 页脚部分,在firefox浏览器里,#footer挂在中间,随文字滚动,而不是固定在页脚,因为设置了#PageBody的高度 height: 600px;超过600px部分成了透明背景。继续捣鼓--找原因吧,努力几小时,还是没有白辛苦,终于修改成功:去掉#PageBody的高度 height: 600px;背景色全部为白色了;但上下均出现空白行,还是把原来加上的“P” 标签取消,firefox浏览器变形问题解决了,IE底部又出来3像素空隙,找啊找,原来是图片高度不够,height="130"改成133就OK了。唉,这个DIV可真难驾御哦。

2009年2月5日