Div CSS layout introductory tutorial (3)_html/css_WEB-ITnose

作者:番茄红了
三、页面顶部制作(1)

　　当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。

　　在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：

程序代码

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}

　　 样式说明：

　　 a:link,a:visited {font-size:12px;text-decoration:none;}
　　a:hover {}

　　这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。

　　 #container {width:800px;margin:10px auto}

　　指定整个页面的显示区域。
　　 width:800px指定宽度为800像素，这里根据实际所需设定。
　　 margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
　　上一章中我们讲过， 对层的margin属性的左右边距设置为auto可以让层居中显示。

　　接下来，我们开始制作TOP部分，TOP部分包括了 LOGO、 菜单和 Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：

　　我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为 logo.gif，图像宽度为 800px。

　　到这里，有的朋友就说了， * 为什么要使用GIF格式？使用JPEG不是更好吗？
　　因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

　　 * 接下来的Banner部分还能使用GIF格式吗？
　　答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为 banner.jpg。

　　 * 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

　　切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：

程序代码

　　

　　　

　　　　
• 首页

　　　　

　　　　
• 博客

　　　　

　　　　
• 设计

　　　　

　　　　
• 相册

　　　　

　　　　
• 论坛

　　　　

　　　　
• 关于

　　　

　　

　　

　　

Why do you write it like this? Because using the list

format for the menu can make it easier to customize the style of the menu in the future.

Why do we need to add the following code?
　

Inserting this piece of code can easily insert some separation styles between menu options, such as vertical line separation in the preview.

Then we write the following styles in css.css:

Program code

/*Page header*/
#header {background :url(logo.gif) no-repeat}

Style description:
#header {background:url(logo.gif) no-repeat}
Add a Background image LOGO, and no filling.

Here, we do not specify the height of the header layer, why not specify it?

Since there are menus and banner items in the header layer, the height of the layer is temporarily unknown, and the properties of the layer allow the layer to automatically adjust based on the content, so we do not need to specify the height.

* Next, we start making the menu, leaving it to the next chapter. Please go to the next chapter to download the relevant files in the tutorial!

Related articles:
Div CSS layout introductory tutorial (1) # -- Page layout and planning
Div CSS layout introductory tutorial (2) # -- Writing the overall layer structure and CSS
Div CSS layout introductory tutorial (3) # -- Making the top of the page (1)
Div CSS layout introductory tutorial (4) # -- Making the top of the page (2)----Use list

to make a menu
Div CSS layout introductory tutorial (5) # -- Make good use of border and clear
Optimize your CSS code #