div + css

1.在默认情况下 body的页面 body默认有  style="margin:10px;" 也就是页面顶不上去的情况。要想解决这种问题需要在<style type="text/css"></css>中加入

body {margin-right:0px; margin-left:0px;margin-top:0px;margin-bottom:0px;}这样就能顶上去了。

2.做网页需要首先设置一下背景：在body里面加入一个<div id="div_bg"></div>

#div_bg {
 width:500px;
 background-color:#3cc;
 height:400px;
 margin:0 auto;
 border:1px solid #FF0000;
}margin: 0 auto;0表示上下的外边框是0px;auto表示左右的外边框是自动的分配的(居中)。

border:1px solid #FF0000; 1px表示边框的宽度、solid表示边框的样式为实线、#FF0000表示边框的颜色；

3.要想让页面中的超级链接加入效果可以这么做：a:link{text-decoration:none;}a:visited{color:#000000;text-decoration:underline;}

a:hover{text-decoration-underline;color:red;}a:active{text-decoration:underline;color:#FFF;}

如果想让某个标签中显示这种效果，可以首先为这个标签div 起一个ID例如：le_2。#le_2 a:link{ text-decoration:none;color:#CCC;}
#le_2 a:visited { color:#000000;text-decoration:underline;}
#le_2 a:hover { text-decoration:underline;color:red;}
#le_2 a:active { text-decoration:underline;color:#FFF;}

4.网站一般分为头部、中部、尾部。

头部一般用<div id="div_bg>"<div id="div_top"></div></div>

在div_top中，#div_top {background-color:#C1C1FF; width:500px;height:35px;}设置头部的背景颜色。

在div_top加入page #page { width:400px;height:35px; margin:0 auto;border:1px solid #000;}

在page div中也分左右。里面肯定用到浮动。

首先用到的是：#top_left {float:left;width:300px;height:35px;line-height:35px;vertical-align:middle;background-color:#FF0000;
font-size:12px;color:#CCC;font-weight:bold;font-family:"幼圆";text-align:centre;}

float：left;表示让该元素浮动起来。height：35px;line-height:35px;配合使用表示文字垂直居中。vertical-align:middle;表示该标签在父标签中垂直居中。text-align:centre;

表示文字水平居中。

右边是：#top_right {background-color:#FFF;float:left;width:100px;height:35px;}

下面讲解中部怎么写：

5.在<div id="div_bg"><div id="div_brand"></div></div>中加入<div id="div_brand"></div> #div_brand {clear:both;width:400px;height:335px;
margin: 0 auto;border:1px solid #000;}

在网站中部 最好首先清除一下头部产生的浮动效果：clear:both;清除float浮动样式;margin:0 auto;在div_bg中居中。border:1px solid #000;表示边框的宽度，样式，颜色。

.list { background-image:url(images/yy_bg2.png);background-repeat:no-repeat;width:149px;height:68px;
line-height:68px;vertical-align:middle;text-align:center;color:#0000FF; }表示中部左边图片的显示：background-image:url(images/yy_bg2.png);表示背景图片。

background-repeat:no-repeat;表示不重复;line-height:68px;height:68px;表示引用这个class的标签文字垂直居中。text-align：center;表示引用这个class的标签的文字水平居中。

中部左边：

#brand_1 {
float:left;
width:150px;
}他引用的class=“list”

中部中间：

#brand_2 {float:left;background-color:#0000FF;width:100px;height:132px;margin-left:5px;}margin-left:5px;外边框加入5px外边距。

中部右边：

#brand_3 {float:left;width:143px;}

 

下部：

#news {
clear:both;
width:400px;
height:100px;
background-color:#FFF;
margin: 0 auto;
}
#news_tle {
width:400px;
height:25px;
border-bottom:1px solid red;
}
#le_1 {
float:left;
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
border-bottom:2px solid #fff;
margin-left:20px;
height:24px;
line-height:24px;
vertical-align:middle;
width:85px;
text-align:center;
}为了让border-bottom:2px solid #fff;盖住他的父标签的边框宽度。形成凸形效果。
#le_2 {
float:right;
}
#le_2 a:link{
text-decoration:none;
color:#CCC;
}
#le_2 a:visited {
color:#000000;
text-decoration:underline;
}
#le_2 a:hover {
text-decoration:underline;
color:red;
}
#le_2 a:active {
text-decoration:underline;
color:#FFF;
}