css 代码大全,Div+Css网站代码大全

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

@@@@@在图片的左边加一条颜色边。

}