简单页面练手
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梅兰商贸</title> <link rel="stylesheet" href="index-style.css"> </head> <body> <!--头部部分开始 --> <div class="header"> <div class="header_main"> <div class="header_tittle">您好，欢迎来到素材网!</div> <div class="header_nav"> <ul> <li><a href="#">网站导航</a></li> <li><a href="#">客服中心</a></li> <li><a href="#">建材服务</a></li> <li><a href="#">我的收藏</a></li> <li><a href="#">我的商务室</a></li> <li><a href="#">素材网首页</a></li> </ul> </div> </div> </div> <!--头部部分结束--> <div class="main"> <!-- 顶部搜索开始--> <div class="search"> <div class="search_l"> <img src="images/1.png"> </div> <div class="search_box"> <input class="search_m_text" type="text" value="请输入关键字"> <input class="search_m_image" type="image" src="images/serch.png"/> </div> </div> <!-- 顶部搜索结束--> <!-- 导航开始--> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">建筑材料</a></li> <li><a href="#">儿童安全椅</a></li> <li><a href="#">工艺美术品</a></li> </ul> </div> <!-- 导航结束 --> <!--主体上部分开始 --> <div class="main_top"> <div class="main_top_l"> <div class="main_top_header">商机市场</div> <ul> <li class="img1"><a href="#">建筑材料</a></li> <li class="img2"><a href="#">儿童安全座椅</a></li> <li class="img3"><a href="#">工艺美术品</a></li> <li class="img4"><a href="#">工艺材料</a></li> <li class="img5"><a href="#">儿童座椅</a></li> <li class="img6"><a href="#">工艺艺术品</a></li> </ul> </div> <div class="main_top_m"></div> <div class="main_top_r"> <div class="center_top"> <img src="images/center-r.png"> </div> <div class="center_bottom"> <img src="images/center-r2.png"> </div> </div> </div> <!--主体上部分结束 --> <!--中部广告条开始 --> <div class="banner_m"> <div class="text">建筑材料</div> </div> <!--中部广告条结束 --> <!-- 中部内容开始 --> <div class="content_top"> <div class="content_top_left"> <div class="column_top"> <div class="column_top_left"> <dl class="dl1"> <dt> <p> <img src="images/c2.png"> </p> <input type="image" src="images/buy.png"> </dt> <dd> <p class="p1">好太太晾衣架 铝钛合金 升降双杆</p> <p class="p2">自动换挡 安全耐用</p> <p class="p3">稳定性好 抗氧化强</p> <p class="p4">239.00 <del>￥386.00</del></p> <p class="p5">限量<span>99</span>件 已售出<span>20</span>件</p> </dd> </dl> <dl class="dl1"> <dt> <p> <img src="images/c2.png"> </p> <input type="image" src="images/buy.png"> </dt> <dd> <p class="p1">好太太晾衣架 铝钛合金 升降双杆</p> <p class="p2">自动换挡 安全耐用</p> <p class="p3">稳定性好 抗氧化强</p> <p class="p4">239.00 <del>￥386.00</del></p> <p class="p5">限量<span>99</span>件 已售出<span>20</span>件</p> </dd> </dl> </div> </div> <div class="column_top_hr"></div> <div class="column_bottom"> <div class="column_top_left"> <dl class="dl1"> <dt> <p> <img src="images/c2.png"> </p> <input type="image" src="images/buy.png"> </dt> <dd> <p class="p1">好太太晾衣架 铝钛合金 升降双杆</p> <p class="p2">自动换挡 安全耐用</p> <p class="p3">稳定性好 抗氧化强</p> <p class="p4">239.00 <del>￥386.00</del></p> <p class="p5">限量<span>99</span>件 已售出<span>20</span>件</p> </dd> </dl> <dl class="dl1"> <dt> <p> <img src="images/c2.png"> </p> <input type="image" src="images/buy.png"> </dt> <dd> <p class="p1">好太太晾衣架 铝钛合金 升降双杆</p> <p class="p2">自动换挡 安全耐用</p> <p class="p3">稳定性好 抗氧化强</p> <p class="p4">239.00 <del>￥386.00</del></p> <p class="p5">限量<span>99</span>件 已售出<span>20</span>件</p> </dd> </dl> </div> </div> </div> <div class="content_top_right"> <div class="sidebar_top">建材资讯</div> <div class="sidebar_bottom"> <ul> <li><a href="#">贵阳钢材市场7月17日价格行情</a></li> <li><a href="#">石家庄钢材市场7月17日价格行情</a></li> <li><a href="#">南京钢材市场7月17日价格行情</a></li> <li><a href="#">重庆钢材市场7月17日价格行情</a></li> <li><a href="#">杭州钢材市场7月17日价格行情</a></li> <li><a href="#">广州钢材市场7月17日价格行情</a></li> <li><a href="#">上海钢材市场7月17日价格行情</a></li> <li><a href="#">鞍山无缝管7月17日价格行情</a></li> <li><a href="#">济南焊管7月17日价格行情</a></li> <li><a href="#">上海钢材市场7月17日价格行情</a></li> <li><a href="#">鞍山无缝管7月17日价格行情</a></li> <li><a href="#">济南焊管7月17日价格行情</a></li> </ul> </div> </div> </div> <!-- 中部内容结束 --> <!--中下部广告条开始 --> <div class="content_banner_m"> <div class="txt">儿童安全座椅</div> </div> <!-- 中下部广告条结束 --> <!-- 中下部内容开始 --> <div class="main_content"> <div class="main_left_global"> <div class="main_content_banner"> <div class="banner_left"> <img src="images/et.png"> </div> <div class="banner_right"><a href="#">详情请点击>></a></div> </div> <div class="main_content_bottom"> <div class="column1"> <div class="column1_top"></div> <div class="column1_bottom"> <p class="style1">英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p> <p>适合年龄：9个月-4岁</p> <p>市场价：<del>￥5580元</del></p> <p>直销价：<span>￥3380元</span></p> </div> </div> <!-- --> <div class="column1"> <div class="column2_top"></div> <div class="column1_bottom"> <p class="style1">欧贝儿童安全座椅3-12岁ISOFIX儿童汽车安全座椅</p> <p>适合年龄：3-12岁</p> <p>市场价：<del>￥1980元</del></p> <p>直销价：<span>￥1380元</span></p> </div> </div> <!-- --> <div class="column1"> <div class="column3_top"></div> <div class="column1_bottom"> <p class="style1">英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p> <p>适合年龄：9个月-4岁</p> <p>市场价：<del>￥5580元</del></p> <p>直销价：<span>￥3380元</span></p> </div> </div> <!-- --> <div class="column1"> <div class="column4_top"></div> <div class="column1_bottom"> <p class="style1">英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p> <p>适合年龄：9个月-4岁</p> <p>市场价：<del>￥5580元</del></p> <p>直销价：<span>￥3380元</span></p> </div> </div> </div> </div> <div class="main_right_global"> <div class="container_right_top"> </div> <div class="container_right_bottom"> </div> </div> </div> <!-- 中下部内容结束 --> <!-- 下部广告条开始 --> <div class="main_menu"> <p>工艺美术品</p> </div> <!-- 下部广告条结束 --> <!-- 下部内容开始 --> <div class="main_bottom"> <div class="main_bottom_left"> <div class="bottom_left_top"> <div class="left_top_container"> <div class="container_left"> <div class="container_left_img"></div> <div><a href="#"><img src="images/buy.png"></a></div> </div> <div class="container_right"> <p class="p1">好太太晾衣架 铝钛合金 升降双杠</p> <p class="p2">自动换挡 安全耐用</p> <p class="p2">稳定性好 抗氧化强</p> <p class="p3">239.00 <del>￥386.00</del></p> <p class="p4">限量<span>99</span>件 已售出<span>20</span>件 </p> </div> </div> <!-- --> <div class="left_top_container"> <div class="container_left"> <div class="container_left2_img"></div> <div><a href="#"><img src="images/buy.png"></a></div> </div> <div class="container_right"> <p class="p1">威尔舒木地板12mm厚网络超值特</p> <p class="p2">防滑抗污 清理简单</p> <p class="p2">扣型紧密 环保健康</p> <p class="p3">10.00 <del>￥68.00</del></p> <p class="p4">限量<span>100</span>件 已售出<span>8</span>件 </p> </div> </div> </div> <div class="bottom_left_bottom"> <div class="left_top_container"> <div class="container_left"> <div class="container_left3_img"></div> <div><a href="#"><img src="images/buy.png"></a></div> </div> <div class="container_right"> <p class="p1">好艺达高档太空铝三件套3500套</p> <p class="p2">经典的设计风格</p> <p class="p2">优质的产品品质</p> <p class="p3">99.00 <del>￥477.00</del></p> <p class="p4">限量<span>168</span>件 已售出<span>51</span>件 </p> </div> </div> <!-- --> <div class="left_top_container"> <div class="container_left"> <div class="container_left4_img"></div> <div><a href="#"><img src="images/buy.png"></a></div> </div> <div class="container_right"> <p class="p1">好太太晾衣架 8818 晒被架</p> <p class="p2">不易生锈 清理简单</p> <p class="p2">扣型紧密 环保健康</p> <p class="p3">350.00 <del>￥690.00</del></p> <p class="p4">限量<span>20</span>件 已售出<span>13</span>件 </p> </div> </div> </div> </div> <div class="main_bottom_right"> <div class="right_sidebar_top">建材商社</div> <div class="right_sidebar_middle"> <img src="images/subtitle.png"> <span>在装灯具时，如果装上分控开关，可以省去很多烦恼。因为如果只有一个总开关</span> </div> <div class="right_sidebar_bottom"> <p><a class="a1">[采暖论坛]</a><a href="#"> 精心细选大半年，终于满足小</a></p> <p><a class="a1">[建材采购区]</a><a href="#"> 生活家.巴洛克《旅行篇》-</a></p> <p><a class="a1">[卫浴论坛]</a><a href="#"> 弯道超车 赢在2012</a></p> <p><a class="a1">[采暖论坛]</a><a href="#"> 通过闻气味，我终于确定地狱</a></p> <p><a class="a1">[采暖论坛]</a><a href="#"> 真正体会到了，什么叫做实践</a></p> <p><a class="a1">[功能材料论坛]</a><a href="#"> 我国酚醛泡沫材料行业现</a></p> <p><a class="a1">[建筑工程论坛]</a><a href="#"> 2012年上半年我国住宅市</a></p> <p><a class="a1">[涂料论坛]</a><a href="#"> 我要我的家没有味道</a></p> </div> </div> </div> <!-- 下部内容结束--> <!-- 底部友情链接开始 --> <div class="friendlink"> <div class="friendlink_left">友情链接:</div> <div class="friendlink_right"> <ul> <li><a href="#">中视网盟</a></li> <li><a href="#">9355开心创业网</a></li> <li><a href="#">连锁店加盟</a></li> <li><a href="#">百度</a></li> <li><a href="#">谷歌</a></li> <li><a href="#">雅虎</a></li> <li><a href="#">新浪</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">网易</a></li> <li><a href="#">凤凰网</a></li> <li><a href="#">央视网</a></li> <li><a href="#">新华网</a></li> <li><a href="#">科易网</a></li> <li><a href="#">安家网</a></li> <li><a href="#">健康商城</a></li> <li><a href="#">生意街</a></li> <li><a href="#">渠道网</a></li> <li><a href="#">连锁加盟网</a></li> <li><a href="#">老男孩教育</a></li> <li><a href="#">龙天论坛</a></li> </ul> </div> </div> <!-- 底部友情链接结束 --> <!--页面尾部开始 --> <div class="footer"> <ul class="ul1"> <li><a href="#">关于我们 |</a></li> <li><a href="#">建材通服务 |</a></li> <li><a href="#">网站建设 |</a></li> <li><a href="#">诚聘英才 |</a></li> <li><a href="#">友情链接 |</a></li> <li><a href="#">联系方式 |</a></li> <li><a href="#">隐私声明 |</a></li> <li><a href="#">版权声明 |</a></li> <li><a href="#">帮助中心 |</a></li> <li><a href="#">网站地图</a></li> </ul> <ul class="ul2"> <li><a href="#">中国建网</a></li> <li>版权所有 2005-2016 服务热线:021-37748068 请与我们联系：[email protected]</li> <li>建材网互动群：540302563</li> </ul> <ul class="ul3"> <li>本站网络实名:</li> <li><a href="#">中国建材网</a></li> <li><a href="#">浙B2-20060159</a></li> </ul> </div> <!-- 页面尾部结束 --> </div> </body> </html>
css代码:
@charset "UTF-8";
/*样式初始化*/
body,p,ul,li,input,dl,dd,dt,span{
margin:0;
padding:0;
font:12px "微软雅黑";
}
ul li{
list-style: none;
}
a{
text-decoration:none;
}
/*头部样式开始*/
.header{
height: 26px;
border-bottom: 1px solid #D8D8D8;
background-color:#F7F7F7;
}
.header_main{
width:970px;
height:26px;
margin:0 auto;
}
.header_tittle{
height:26px;
width:142px;
background-color:#F7F7F7;
line-height: 26px;
float:left;
}
.header_nav{
height:26px;
float:right;
}
.header_nav li{
height:26px;
line-height: 26px;
background:url("images/sj.png") no-repeat right;
padding-right:5px;
float:left;
}
.header_nav a{
padding:0 7px;
color:#666666;
}
.header_nav a:hover {
color: red;
text-decoration: underline;
}
/*头部样式结束*/
.main{
width:970px;
margin:0 auto;
}
/*搜索样式开始*/
.search{
height: 98px;
}
.search_l{
height: 98px;
width:214px;
float: left;
}
.search_box{
width:528px;
height:40px;
float: right;
margin-top:30px;
background-color: #F5F5F5;
border:1px solid #C9C9C9;
}
.search_m_text{
width:419px;
height:28px;
border:1px solid #A6A6A6;
margin-top:5px;
margin-left:4px;
}
.search_m_image{
width:99px;
height:30px;
float: right;
margin-top:5px;
margin-right:4px;
}
/*搜索样式结束*/
/*导航样式开始*/
.nav{
width:970px;
height:25px;
border-bottom:2px solid #0266A3;
}
.nav li{
float:left;
line-height: 25px;
}
.nav a{
color:#306BAE;
padding:0 10px;
display: inline-block;
}
.nav a:hover{
color:#FFFFFF;
background-color:#0266A3;
}
/*导航样式结束*/
/*主体上部分左边样式开始*/
.main_top{
width:970px;
height:210px;
margin-top:10px;
margin-bottom: 14px;
float: left;
}
.main_top_l{
width:200px;
height:210px;
float: left;
background-color: #EBF0F6;
}
.main_top_header{
height:30px;
font-size:14px;
font-weight: bold;
line-height:30px;
padding-left: 20px;
color:#FFFFFF;
background-color: #0266A3;
}
.main_top_l li{
height:27px;
padding-left:20px;
}
.main_top_l .img1{
background: url("images/icon_1.png") no-repeat;
margin-top:12px;
position:relative;
left:20px;
}
.main_top_l .img2{
background: url("images/icon_2.png") no-repeat;
position:relative;
left:20px;
}
.main_top_l .img3{
background: url("images/icon_3.png") no-repeat;
position:relative;
left:20px;
}
.main_top_l .img4{
background: url("images/icon_4.png") no-repeat;
position:relative;
left:20px;
}
.main_top_l .img5{
background: url("images/icon_5.png") no-repeat;
position:relative;
left:20px;
}
.main_top_l .img6{
background: url("images/icon_6.png") no-repeat;
position:relative;
left:20px;
}
.main_top_l a{
color:#606060;
font-size:14px;
}
.main_top_l a:hover{
color:red;
text-decoration: underline;
}
/*主体上部分左边样式结束*/
/*主体上部分中部样式开始*/
.main_top_m{
width:540px;
height:210px;
float: left;
background: url("images/center.png") no-repeat left;
}
/*主体上部分中部样式结束*/
/*主体上部分右部样式开始*/
.main_top_r{
width:230px;
height:210px;
float: right;
}
.main_top_r .center_top{
width:230px;
height:96px;
}
.main_top_r .center_bottom{
width:230px;
margin-top: 18px;
}
/*中部广告样式条开始*/
.banner_m{
width:970px;
height:34px;
background-color: #ECF1F7;
border-top:2px solid #C3D7E4;
clear:both;
}
.banner_m .text{
font-size: 14px;
font-weight: bold;
width:200px;
line-height: 34px;
margin-left:20px;
}
/*中部广告样式条结束*/
/*页面主体上部样式开始*/
.content_top{
margin-top:10px;
width:970px;
height:344px;
margin-bottom: 20px;
}
.content_top_left{
width:730px;
height:344px;
float: left;
border:1px solid #D8D8D8;
}
.column_top{
height: 142px;
width:676px;
margin:0 auto;
margin-top:15px;
}
.column_top_left .dl1{
width:310px;
height:142px;
float: left;
padding-right: 20px;
}
.column_top_left .dl1 dt{
width:98px;
height:142px;
float:left;
}
.column_top_left .dl1 dt p {
width:98px;
height:98px;
line-height: 98px;
border:1px solid #CACACA;
display: inline-block;
}
.column_top_left .dl1 dt p img{
padding-left: 4px;
padding-top:4px;
}
.column_top_left .dl1 dt input{
outline-style: none;
border: 0 none;
display: inline-block;
margin-top:12px;
}
.column_top_left .dl1 dd{
height:141px;
float:left;
margin-left:15px;
}
.column_top_left .dl1 dd .p1{
padding-top:15px;
font-size:13px;
font-weight:bold;
}
.column_top_left .dl1 dd .p2{
padding-top: 15px;
color:#863E01;
}
.column_top_left .dl1 dd .p3{
color:#863E01;
}
.column_top_left .dl1 dd .p4{
padding-top:8px;
color:red;
font-weight: bold;
}
.column_top_left .dl1 dd .p4 del{
color:black;
font-weight: normal;
}
.column_top_left .dl1 dd .p5{
padding-top:13px;
}
.column_top_left .dl1 dd .p5 span{
color:red;
}
.column_top_hr{
width:710px;
border-top:1px solid #EEEEEE;
margin:0 auto;
margin-top:15px;
}
.column_bottom{
height: 142px;
width:676px;
margin:0 auto;
margin-top:15px;
}
.content_top_right{
width:228px;
border:1px solid #E0E6F0;
float:right;
}
.content_top_right .sidebar_top{
height:28px;
line-height: 28px;
font-weight: bold;
background-color: #FAFAFA;
border-bottom:1px solid #E0E6F0;
padding-left:20px;
}
.content_top_right .sidebar_bottom{
height:306px;
padding-top:8px;
}
.content_top_right li{
height:25px;
line-height: 25px;
margin-left: 20px;
background: url("images/li_bg.png") no-repeat left;
}
.content_top_right a{
color:#444444;
display: inline-block;
padding-left: 10px;
}
.content_top_right a:hover{
color:red;
text-decoration: underline;
}
/*中下部广告条样式开始*/
.content_banner_m{
width:970px;
height:34px;
background-color: #ECF1F7;
border-top:2px solid #C3D7E4;
clear:both;
margin-top:15px;
}
.content_banner_m .txt{
font-size: 14px;
font-weight: bold;
width:200px;
line-height: 34px;
margin-left:20px;
}
/*中下部广告条样式结束*/
/*页面主体上部样式结束*/
/*中下部内容样式开始*/
.main_content{
height:326px;
width:970px;
margin-top: 10px;
}
.main_content_banner{
width:730px;
height:26px;
border-bottom: 3px solid #00B0E7;
/*background-color: red;*/
}
.main_content_banner .banner_left{
float: left;
margin-top: 2px;
}
.main_content_banner .banner_right{
float: right;
font-size: 15px;
line-height: 26px;
}
.main_content_banner .banner_right a{
color:#1A66B3;
}
.main_content_bottom{
width:728px;
height:290px;
border:1px solid #dddddd;
}
.main_content_bottom .column1{
height:270px;
width:164px;
float: left;
padding-top:10px;
padding-left:10px;
padding-right: 5px;
}
.column1 .column1_top{
height:170px;
width: 164px;
background: url("images/et01.png") no-repeat center;
}
.column1 .column1_bottom{
height: 100px;
width:164px;
}
.column1_bottom p{
color:#999999;
margin-top:5px;
text-align: center;
}
.column1 .style1{
color:black;
}
.column1_bottom span{
color:#A10000;
font:bold 16px "微软雅黑";
}
.column1 .column2_top{
height:170px;
width: 164px;
background: url("images/et03.png") no-repeat center;
}
.column1 .column3_top{
height:170px;
width: 164px;
background: url("images/et04.png") no-repeat center;
}
.column1 .column4_top{
height:170px;
width: 164px;
background: url("images/et02.png") no-repeat center;
}
.main_left_global{
width:728px;
height:322px;
float: left;
}
.main_right_global{
height:326px;
width:230px;
float: right;
}
.container_right_top{
width:228px;
height:130px;
border:1px solid #dddddd;
background: url("images/et_right.png") no-repeat center;
}
.container_right_bottom{
width:230px;
height:165px;
margin-top:15px;
background: url("images/et_right_bottom.png") no-repeat center;
}
/*中下部内容样式结束*/
/*下部广告条样式开始*/
.main_menu{
width:970px;
height:34px;
background-color: #ECF1F7;
border-top:2px solid #C3D7E4;
margin-top:14px;
}
.main_menu p{
display: inline-block;
height:34px;
line-height: 34px;
font-weight: bold;
font-size: 14px;
padding-left:20px;
}
/*下部广告条样式结束*/
/*下部内容样式开始*/
.main_bottom{
width:970px;
height:344px;
margin-top:14px;
}
.main_bottom_left{
width:730px;
height:344px;
border:1px solid #dddddd;
float:left;
}
.bottom_left_top{
width:720px;
height:172px;
border-bottom: 1px solid #dddddd;
margin:0 auto;
}
.left_top_container{
width:324px;
float: left;
margin-right:30px;
}
.container_left{
height:146px;
width:98px;
float: left;
margin-top:16px;
margin-left:11px;
}
.container_left_img{
width:98px;
height:104px;
border:1px solid #dddddd;
background: url("images/c1.png") no-repeat center;
}
.container_left img{
margin-top:14px;
}
.container_right{
height:146px;
width:202px;
float: left;
margin-top:16px;
margin-left:10px;
}
.container_right .p1{
color:black;
font-size:13px;
display: inline-block;
margin-top:15px;
margin-bottom:12px;
}
.container_right .p2{
color:#863E01;
}
.container_right .p3{
color:red;
font-weight:bold;
font-size: 14px;
margin-top:12px;
}
.container_right .p3 del{
color:black;
font-weight:normal;
margin-top:12px;
font-size: 12px;
}
.container_right .p4{
color:black;
font:16px "微软雅黑";
margin-top:16px;
}
.container_right span{
color:red;
font-size:16px;
}
.container_left2_img{
width:98px;
height:104px;
border:1px solid #dddddd;
background: url("images/c2.png") no-repeat center;
}
.bottom_left_bottom{
float: left;
width:720px;
height:172px;
margin-left:5px;
margin-right: 5px;
}
.container_left3_img{
width:98px;
height:104px;
border:1px solid #dddddd;
background: url("images/c3.png") no-repeat center;
}
.container_left4_img{
width:98px;
height:104px;
border:1px solid #dddddd;
background: url("images/c4.png") no-repeat center;
}
.main_bottom_right{
width:230px;
height:344px;
float:right;
}
.right_sidebar_top{
width:228px;
height:30px;
border:1px solid #DDDDDD;
background-color: #FBFBFB;
line-height:30px;
font-size:14px;
font-weight: bold;
color:#606060;
text-indent: 1em;
}
.right_sidebar_middle{
width:230px;
height:75px;
}
.right_sidebar_middle img{
width:101px;
height:75px;
display: inline-block;
float: left;
margin-top:15px;
}
.right_sidebar_middle span{
width:118px;
height:75px;
display: inline-block;
float: right;
font-size:13px;
color:#777777;
margin-top:15px;
}
.right_sidebar_bottom{
width:230px;
height:208px;
margin-top:20px;
}
.right_sidebar_bottom p{
display: inline-block;
margin-top:10px;
}
.right_sidebar_bottom .a1{
color:#777777;
}
.right_sidebar_bottom a{
color:black;
}
.right_sidebar_bottom a:hover{
color:red;
text-decoration: underline;
}
.right_sidebar_bottom .a1:hover{
color:#777777;
text-decoration: none;
}
/*下部内容样式结束*/
/*底部友情链接样式开始*/
.friendlink{
width:970px;
height:80px;
margin-top:18px;
border-top:1px solid #777777;
border-bottom:1px solid #777777;
}
.friendlink_left{
width:60px;
height:40px;
float: left;
margin-top:20px;
margin-left:20px;
}
.friendlink_right{
width:890px;
height:40px;
float: left;
margin-top:20px;
}
.friendlink_right li{
display: inline-block;
padding:0 5px;
margin-bottom: 10px;
}
.friendlink_right li a{
color:#666666;
}
/*底部友情链接样式结束*/
/*页面尾部样式开始*/
.footer{
width:970px;
height:86px;
border-top:3px solid #0A7EC3;
margin-top:14px;
}
.footer .ul1,.ul2,.ul3{
margin:0 auto;
display: block;
}
.footer .ul1{
width:610px;
margin-top:15px;
}
.footer .ul2{
width:640px;
margin-top:3px;
margin-bottom: 3px;
}
.footer .ul3{
width:238px;
}
.footer li{
display: inline-block;
}
.footer ul li a{
color:#000000;
display: inline-block;
margin-right:2px;
}
/*页面尾部样式结束*/