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;
}