web网页设计毕业论文 - 图文

标记分块，然后各个块进行CSS定位，最后再向各个块中添加相应的内容。页面布局的样式是多变的，他可以根据网站的信息划分和排列进行布局划分。采用DIV+CSS样式布局网站时，比较常用的是二分栏和三分栏。下面列出分栏布局页面设计需要注意的几点以供参考：

（1）页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；页面居中，考虑页面是否要居中显示。

（2）整体布局的DIV嵌套关系。除首页外，其他网页中可能用到的可重复元素有Header、Footer和SideBar，经常变换的只有MainBody里的内容，而且页面宽度是固定的，因此要在所有的元素外面做一个外框。

而本网站运用了1-2-1布局方式，方式如图：

#search #navigation #main 第 12 页 共 24 页 #list #left #main #banner #hottest #letter 九江职业大学毕业设计（论文）

#lef

本网站示例代码：

.zhong { width:1024px; margin:0 auto;} top{ 24px;}

.top_left{ float:left; margin-top:14px;}

.top_none{

margin-top:30px;margin-left:50px;margin-right:50px;} .top_right{float:right; margin-top:14px; margin-right:20px;}

float:none;

height:73px;background:url(images/bg_1.gif)

repeat-x;padding:0

3.3 CSS样式表

1. 链入外部样式表

链入外部样式表是把样式表保存为一样式表文件，然后在页面中用 标记链接到这个样式表文件，这个标记必须放到页面的区内，如下： ……

上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=stylesheet是指在页面中使用这个外部的样式表type=text/css是指文件的类型是样式表文本。href=”mystyle.css”

第 13 页 共 24 页

九江职业大学毕业设计（论文）

是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。 当你改变这个样式表文件的时候，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑， 一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下： hr {color: sienna} p {margin-left: 20px}

body {background-image: url(\

/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/

2. 内部样式表

内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了

第 14 页 共 24 页