css+div布局例子

一、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:1006px;margin:10px auto;}

/*页面主体*/
#PageBody {width:1006px;margin:0 auto;height:auto;border-bottom:1px solid #015DAF}
#leftbar {
width:700px; /*设定宽度*/
float:left;
margin:0px 2px 0px 2px
}
#leftNav {width:698px;height:25px;float:left}
#leftNav ul {float:left;list-style:none;margin:0px;}
#leftNav ul li {float:left;display:block;line-height:25px;margin:0 0px}
#leftNav ul li a:link,#leftNav ul li a:visited {font-weight:bold;color:#666}
#leftNav ul li a:hover{}
.leftNavDiv1 {width:63px;background:url('images/leftNav_01.gif');cursor:pointer}
.leftNavDiv2 {width:63px;background:url('images/leftNav_02.gif');cursor:pointer}

#leftHot {width:698px;height:149px;float:left;border:1px solid #89BEF2;margin:4px 0px 0px 0px}
#leftHotTitle {width:698px;height:18px;float:left}
#leftHotTitle ul {float:left;list-style:none;margin:0px;}
#leftHotTitle ul li {display:block;height:18px;margin:0px 0px 0px 0px}
#leftHotTitle ul li a:link,#leftHotTitle ul li a:visited {font-weight:bold;color:#666}
#leftHotTitle ul li a:hover{}
.leftHotTitleDiv1 {width:112px;height:20px;float:left;background:#EBF3FE;padding-top:3px}
.leftHotTitleDiv2 {width:584px;height:19px;float:left;border-left:1px solid #89BEF2;padding-top:3px;border-bottom:1px solid #89BEF2}

#leftHotContent {width:698px;height:130px;float:left;background:#EBF3FE}
#leftHotContent ul {float:left;list-style:none;margin:0px;white-space: nowrap;text-align:left;padding:0px}
#leftHotContent ul li {float:left;display:block;height:20px;margin:5px 5px;white-space: nowrap}
#leftHotContent ul li a:link,#leftHotContent ul li a:visited {font-weight:bold;color:#000000}
#leftHotContent ul li a:hover{}
.leftHotContentDiv {}

#leftPageList {width:698px;height:auto;float:left}
#leftPageListSplitTop {width:698px;height:21px;float:left;margin:10px 0 0 0}
#leftPageListSplitTop ul {float:left;list-style:none;margin:0px 2px}
#leftPageListSplitTop ul li {float:left;display:block;vertical-align:bottom;height:21px;margin:5px 5px}
#leftPageListSplitTop ul li input {width:20px}
#leftPageListSplitTop ul li a:link,#leftPageListSplitTop ul li a:visited {font-weight:bold;color:#666}
#leftPageListSplitTop ul li a:hover{}
.leftPageListSplitTopDiv {}

#leftPageListTitle {width:698px;height:22px;float:left;margin:20px 0 0 0}
#leftPageListTitle ul {float:left;list-style:none;margin:0px 2px}
#leftPageListTitle ul li {float:left;display:block;font-weight:bolder;color:#285D9C;line-height:22px;margin:0px 1px;background:url('images/leftPageListTitle.gif')}
#leftPageListTitle ul li a:link,#leftPageListTitle ul li a:visited {font-weight:bold;color:#666}
#leftPageListTitle ul li a span {cursor:hand}
#leftPageListTitle ul li a:hover{}
.leftPageListTitleDiv1 {width:110px}
.leftPageListTitleDiv2 {width:230px}
.leftPageListTitleDiv3 {width:55px}
.leftPageListTitleDiv4 {width:64px}
.leftPageListTitleDiv5 {width:90px}
.leftPageListTitleDiv6 {width:92px}
.leftPageListTitleDiv7 {width:36px}

.leftPageListTitleDiv0 {cursor:hand}
.leftPageListTitleDiv00 {cursor:hand;padding-bottom:2px}

#leftPageListContent {width:698px;height:66px;float:left;margin:0px 0 0 0;border-bottom:1px dashed gray}
#leftPageListContent ul {float:left;list-style:none;margin:2px 2px}
#leftPageListContent ul li {float:left;display:block;white-space:normal;height:40px;margin:0px 1px;}
#leftPageListContent ul li a:link,#leftPageListContent ul li a:visited {font-weight:bold;color:#666}
#leftPageListContent ul li a:hover{}
.leftPageListContentDiv1 {width:110px;padding-top:25px;}
.leftPageListContentDiv2 {width:230px;padding-top:25px;text-align:left;color:#00669A}
.leftPageListContentDiv3 {width:55px;padding-top:25px;}
.leftPageListContentDiv4 {width:64px;padding-top:22px;}
.leftPageListContentDiv5 {width:90px;height:65px;padding-top:20px;}
.leftPageListContentDiv6 {width:92px;padding-top:10px;}
.leftPageListContentDiv7 {width:36px;padding-top:25px;}

#leftPageListSplitBottom {width:698px;height:25px;float:left;margin:20px 0 0 0}
#leftPageListSplitBottom ul {float:left;list-style:none;margin:0px 2px}
#leftPageListSplitBottom ul li {float:left;display:block;line-height:21px;margin:0px 20px}
#leftPageListSplitBottom ul li a:link,#leftPageListSplitBottom ul li a:visited {font-weight:bold;color:#666}
#leftPageListSplitBottom ul li a:hover{}
.leftPageListSplitBottom {}

/*右边栏开始*/
#rightbar {
width:300px;
text-align:left;
float:left;
overflow:hidden;
}

#rightExpert {width:292px;height:220px;float:left;border:1px solid #89BEF2;margin:30px 2px 10px 2px}
#rightExpertTitle {width:100%;height:34px;float:left;background:#BFD8FC}
#rightExpertTitle ul {float:left;list-style:none;margin:0px;}
#rightExpertTitle ul li {display:block;line-height:18px;margin:0px 8px;padding-top:8px;}
#rightExpertTitle ul li a:link,#rightExpertTitle ul li a:visited {font-weight:bold;color:#666}
#rightExpertTitle ul li a:hover{}
.rightExpertTitleDiv1 {float:left}
.rightExpertTitleDiv2 {float:right}

#rightExpertContent {width:100%;height:188px;float:left;}
#rightExpertContent ul {float:left;list-style:none;margin:2px}
#rightExpertContent ul li {float:left;display:block;line-height:18px;margin:0px 5px}
#rightExpertContent ul li a:link,#rightExpertContent ul li a:visited {font-weight:bold;color:#666}
#rightExpertContent ul li a:hover{}
.rightExpertContentDiv {}

#rightViewBuild {width:292px;height:274px;float:left;border:1px solid #89BEF2;margin:10px 2px 10px 2px}
#rightViewBuildTitle {width:100%;height:34px;float:left;background:#BFD8FC}
#rightViewBuildTitle ul {float:left;list-style:none;margin:0px;}
#rightViewBuildTitle ul li {display:block;line-height:18px;margin:0px 12px;padding-top:8px;}
#rightViewBuildTitle ul li a:link,#rightViewBuildTitle ul li a:visited {font-weight:bold;color:#666}
#rightViewBuildTitle ul li a:hover{}
.rightViewBuildTitleDiv1 {float:left}
.rightViewBuildTitleDiv2 {float:right}

#rightViewBuildContent {width:100%;height:240px;float:left;}
#rightViewBuildContent ul {float:left;list-style:none;margin:2px}
#rightViewBuildContent ul li {float:left;display:block;line-height:18px;margin:0px 5px}
#rightViewBuildContent ul li a:link,#rightViewBuildContent ul li a:visited {font-weight:bold;color:#666}
#rightViewBuildContent ul li a:hover{}
.rightViewBuildContentDiv {}

#rightNewFunction {width:292px;float:left;border:1px solid #89BEF2;margin:10px 0px 10px 2px}
#rightNewFunctionTitle {width:100%;height:40px;float:left;background:url('images/new_function.gif')}
#rightNewFunctionTitle ul {float:left;list-style:none;margin:0px;}
#rightNewFunctionTitle ul li {display:block;line-height:18px;margin:0px 12px;padding-top:8px;}
#rrightNewFunctionTitle ul li a:link,#rightViewBuildTitle ul li a:visited {font-weight:bold;color:#666}
#rightNewFunctionTitle ul li a:hover{}
.rightNewFunctionTitleDiv {float:left}

#rightNewFunctionContent {width:100%;float:left;}
#rightNewFunctionContent ul {float:left;list-style:none;margin:2px}
#rightNewFunctionContent ul li {float:left;display:block;line-height:18px;margin:0px 5px}
#rightNewFunctionContent ul li a:link,#rightNewFunctionContent ul li a:visited {font-weight:bold;color:#666}
#rightNewFunctionContent ul li a:hover{}
.rightNewFunctionContentDiv {}

#rightAdvertisement {width:292px;float:left;border:1px solid #89BEF2;margin:10px 0px 10px 2px}
#rightAdvertisementTitle {width:100%;height:40px;float:left;background:#BFD8FC}
#rightAdvertisementTitle ul {float:left;list-style:none;margin:0px;}
#rightAdvertisementTitle ul li {display:block;line-height:18px;margin:0px 12px;padding-top:8px;}
#rightAdvertisementTitle ul li a:link,#rightAdvertisementTitle ul li a:visited {font-weight:bold;color:#666}
#rightAdvertisementTitle ul li a:hover{}
.rightAdvertisementTitleDiv {float:left}

#rightAdvertisementContent {width:100%;float:left;}
#rightAdvertisementContent ul {float:left;list-style:none;margin:2px}
#rightAdvertisementContent ul li {float:left;display:block;line-height:18px;margin:0px 5px}
#rightAdvertisementContent ul li a:link,#rightAdvertisementContent ul li a:visited {font-weight:bold;color:#666}
#rightAdvertisementContent ul li a:hover{}
.rightAdvertisementContentDiv {}


/*页面底部*/
#Footer {width:1006px;margin:0 auto;height:50px;background:#00FFFF}




/* 分页 */
.pagebox{float:left;width:500px;overflow:hidden; zoom:1; font-size:12px; font-family:"??",sans-serif;margin:20px 0px 0 70px;text-align:center}
.pagebox span{float:left; margin-right:2px; overflow:hidden; text-align:center; background:#fff;}
.pagebox span a{display:block; overflow:hidden; zoom:1; _float:left;}
.pagebox span.pagebox_pre_nolink{border:1px #ddd solid; width:53px; height:21px; line-height:21px; text-align:center; color:#999; cursor:default;}
.pagebox span.pagebox_pre{color:#3568b9; height:23px;}
.pagebox span.pagebox_pre a,.pagebox span.pagebox_pre a:visited,.pagebox span.pagebox_next a,.pagebox span.pagebox_next a:visited{border:1px #9aafe5 solid; color:#3568b9; text-decoration:none; text-align:center; width:53px; cursor:pointer; height:21px; line-height:21px;}
.pagebox span.pagebox_pre a:hover,.pagebox span.pagebox_pre a:active,.pagebox span.pagebox_next a:hover,.pagebox span.pagebox_next a:active{color:#363636; border:1px #2e6ab1 solid;}
.pagebox span.pagebox_num_nonce{padding:0 8px; height:23px; line-height:23px; color:#fff; cursor:default; background:#296cb3; font-weight:bold;}
.pagebox span.pagebox_num{color:#3568b9; height:23px;}
.pagebox span.pagebox_num a,.pagebox span.pagebox_num a:visited{border:1px #9aafe5 solid; color:#3568b9; text-decoration:none; padding:0 8px; cursor:pointer; height:21px; line-height:21px;}
.pagebox span.pagebox_num a:hover,.pagebox span.pagebox_num a:active{border:1px #2e6ab1 solid;color:#363636;}
.pagebox span.pagebox_num_ellipsis{color:#393733; width:22px; background:none; line-height:23px;}
.pagebox span.pagebox_next_nolink{border:1px #ddd solid; width:53px; height:21px; line-height:21px; text-align:center; color:#999; cursor:default;}


二、一些级联格式
#selectCitya{
width:100%;
float:left;
}
#selectCityb ul{
float:left;
list-style:none ;
width:250px;
}
#selectCityb ul li{
float:left;
padding-left:4px;
font-weight:600;
}
#selectCityb ul li a{
color:red;
float:left;
}
#selectCityb ul li a:visited{
float:left;
font-weight:bold;
}
#selectCityc{
float:left;
}