@charset "utf-8"; @@@@@这是Div布局文件代码
#top {
width:860px;
height:99px;
margin:auto;
}
#main {
width:860px;
height:910px;
margin:auto;
}
#left {
width:191px;
height:910px;
float:left; @@@@@此层向左对齐
}
#left1 {
width:191px;
height:196px;
background:url(../images/11201.gif)
no-repeat; @@@@@在此层中加背景图像并且背景不重复
padding-top:40px; @@@@@文字等元素在层中距离顶部40个像素
color:#51b5dc;
}
#left_name, #left_pass {
background-color: #FFFFFF;
background-color:#d8fbff;
height: 17px;
width: 97px;
margin-bottom: 2px; @@@@@此层距离底部2个像素
margin-left:20px;
border: 1px solid #44b2da;
@@@@@文本框的边框为1,并设置了边框颜色
}
#left_jimi {
margin-left:20px;
}
#left_button {
float:right;
margin-right: 12px;
margin-top: 2px;
}
#left1-1 {
width:171px;
height:18px;
margin-left:8px;
padding-top:3px;
}
#left1-1 img { @@@@@设置此层中的图像排版
margin-left:15px;
margin-right:3px;
}
#left1-2 {
width:128px;
height:80px;
background:url(../images/11202.gif)
no-repeat;
margin-left:8px;
margin-top:15px;
padding-left:37px;
padding-top:8px;
line-height:17px; @@@@@文字的行距为17个像素
text-align:center; @@@@@文字在此层中居中对齐(align是对齐属性)
}
#left2 {
width:191px;
height:214px;
background:url(../images/11205.gif)
no-repeat;
padding-top:40px;
}
#left2-1,#left2-2 {
width:191px;
height:95px;
float:left;
margin-top:10px;
line-height:15px;
}
#left2-1 img,#left2-2 img { @@@@@如果几个层用同样的样式,可以用逗号分开写在一起
float:left;
margin-top:10px;
margin-right:5px;
}
#left3 {
width:191px;
height:309px;
background:url(../images/11204.gif)
no-repeat;
padding-top:46px;
line-height:17px;
}
#left3 img {
margin-left:5px;
margin-bottom:10px;
}
#left4 {
width:191px;
height:63px;
}
#main1 {
width:234px;
height:855px;
float:left;
margin-left:5px;
padding-top:55px;
background:url(../images/11220.gif)
no-repeat;
}
#main1-1 {
width:180px;
height:209px;
background:url(../images/11219.gif)
no-repeat;
margin-left:10px;
padding-top:14px;
padding-left:17px;
padding-right:17px;
color:#008fb8; @@@@@此层中没有设置链接的文字颜色
}
#main1-1 dt { @@@@@dt和dd都可以认为是单元格的样式,DL是列表
width:160px;
line-height:16px;
float:left;
margin-top:1px;
}
#main1-1 dd {
width:17px;
line-height:16px;
float:left;
margin-top:1px;
}
#main1-1 dd img {
float:right;
}
#main1-2 {
width:198px;
height:240px;
margin-left:18px;
background:url(../images/11231.gif)
no-repeat;
padding-top:40px;
color:#FFFFFF;
}
#main1-2-1, #main1-2-2, #main1-2-3 {
width:180px;
height:80px;
margin-left:10px;
}
#main1-2-1 img, #main1-2-2 img, #main1-2-3 img {
float:left;
margin-right:5px;
}
#main1-3 {
width:211px;
height:135px;
margin-left:10px;
color:#FFFFFF;
}
#main1-3 img {
float:left;
margin-right:3px;
}
#main1-4 {
width:198px;
height:170px;
margin-left:18px;
background:url(../images/11256.jpg)
no-repeat;
padding-top:40px;
color:#FFFFFF;
}
#main1-4-1, #main1-4-2 {
width:180px;
height:60px;
margin-left:10px;
margin-bottom:10px;
}
#main1-4-1 img, #main1-4-2 img {
float:left;
margin-right:5px;
}
#right {
width:417px;
height:910px;
float:left;
margin-left:8px;
}
#right1 {
width:405px;
height:275px;
background:url(../images/11242.gif)
no-repeat;
padding-left:12px;
padding-top:11px;
}
#form2 {
margin-top:18px;
}
#right_name {
width:254px;
height:19px;
border:#a3cdda 1px solid; @@@@@设置边框样式
}
#right_button {
float:right;
margin-right:30px;
margin-top:1px;
}
#right2 {
width:413px;
height:593px;
margin-left:2px;
margin-top:10px;
background:url(../images/11258.gif)
no-repeat;
}
#right2-1 {
margin-top:5px;
width:405px;
height:265px;
padding-top:25px;
padding-left:8px;
background:url(../images/11206.gif)
no-repeat;
color:#5a8059;
}
#right2-1-1,#right2-1-2,#right2-1-3,#right2-1-4,#right2-1-5,
#right2-1-6,#right2-1-7,#right2-1-8,#right2-1-9,#right2-1-10{
width:70px;
height:110px;
margin-top:10px;
line-height:20px;
margin-left:8px;
float:left;
text-align:center;
}
#right2-2 {
width:405px;
height:150px;
padding-top:30px;
padding-left:8px;
background:url(../images/11207.gif)
no-repeat;
}
#right2-2 dt {
width:200px;
line-height:18px;
float:left;
margin-top:5px;
}
#right2-2 dt img {
margin-right:15px;
}
#right2-2 dd {
width:100px;
line-height:18px;
margin-top:5px;
float:left;
}
#right2-2 dd img {
margin-right:3px;
}
#right2-3 {
width:405px;
height:110px;
padding-top:30px;
padding-left:10px;
background:url(../images/11263.gif)
no-repeat;
}
#right2-3 li { @@@@@li是一种列表模式
float:left;
width:100px;
height:20px;
list-style-type:none;
}
#bottom {
width:860px;
height:100px;
margin:auto;
line-height:18px;
margin-top:20px;
border-top:#999999 solid 1px;
}
#bottom img {
margin-top:40px;
margin-right:15px;
float:left;
}
@charset "utf-8"; @@@@网页上的整体样式(在body中)
body {
font-size:12px;
font-family:"宋体";
color:#999999;
}
* {
border:0px;
margin:0px;
padding:0px;
}
.bianju { @@@@@定义页面的整体边距
margin-left:15px;
margin-right:20px;
}
a:link {
font-family: "宋体";
font-size: 14px;
color: #0066CC;
}
a:visited {
font-family: "宋体";
font-size: 16px;
color: #999999;
}
a:active {
font-family: "黑体";
font-size: 16px;
color: #00CC33;
}
a:hover {
font-family: "黑体";
font-size: 16px;
color: #00CC33;
}
总结一些重要的代码运用
background-repeat:repeat-x; @@@@@在X轴方向重复像素
background-position: center top;
border-bottom:1px dashed #999999; @@@@@可给单元格加颜色同边框
background-position: 15px center; @@@@@背景图像单元格中距离15像素居中
font-weight:bold;
clear:left;
font-family:Arial, Helvetica, sans-serif; @@@@@设置字体方面
#bottom-1 img {
border-left:1px #cccccc solid;
@@@@@在图片的左边加一条颜色边。
}