关于我们的页面,

其中有首页和顶部已经OK了

 

只需要中间部分就可以了

HTML+JS代码如下:

<!DOCTYPE html>
<
html>
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
<
link rel="stylesheet" href="css/css_whir.css"/>
</
head>
<
body>
<!--
顶部部分-->
<header class="Toper"
>
<
section class="Top">
<
div class="Share">
<
ul>
<
li class="SinaIndex"><a href="javascript:;">官方微博</a></li>
<
li class="OfficialIndex"><a href="javascript:;">官方</a></li>
<
li style="padding-right: 0;">
<!--调用JiaThis插件-->
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<
a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">一键分享</a>
<
a class="jiathis_counter_style"></a>
</
div>
<
script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script>
<!-- JiaThis Button END -->
</li>
<
div class="clear"></div>
</
ul>
</
div>
<
div class="Logo">
<
a href="index.html"><img src="images/logo.jpg" alt="none"/></a>
</
div>
</
section>
</
header>
<!--
导航栏-->
<section class="TopNav"
>
<
section class="NavList">
<
div class="SreachBox">
<
a href="javascript:void(0)" onclick="return GoSearchUrl();" class="sreach_btn"></a>
<
input name="" type="text" class="sreach_ipu" id="key" value="立即搜索" onblur="if(this.value=='')this.value='立即搜索';" onfocus="if(this.value=='立即搜索')this.value='';" onkeydown="entersearch()"/>
<
div class="clear"></div>
</
div>
<
nav class="MainNav">
<
ul>
<
li id="nav1"><a class="navA" href="index.html">首页</a></li>
<
li id="nav2"><a class="navA" href="about.html">关于我们</a></li>
<
li id="nav3"><a class="navA" href="service.html">服务范围</a></li>
<
li id="nav4"><a class="navA" href="case.html">经典案例</a></li>
<
li id="nav5"><a class="navA" href="news.html">资讯中心</a></li>
<
li id="nav6"><a class="navA" href="contact.html">联系我们</a></li>
<
div class="clear"></div>
</
ul>
</
nav>
</
section>
</
section>
<!--
面包屑二级导航-->
<div class="Current"
>
<
dl>当前位置:
<a href="index.html">首页</a>
<a href="javascript:;">关于我们</a>
<span>公司介绍</span>
</
dl>
<
div class="clear"></div>
</
div>
<!--
主要内容区-->
<section class="Contain"
>
<!--选项卡的顶部-->
<aside class="sildeBar">
<
nav class="MenuList" id="MenuList">
<
ul>
<
li class="MenuListHead MenuListHeadSelect"><a href="javascript:;">公司介绍</a></li>
<
li class="MenuListHead"><a href="javascript:;">企业文化</a></li>
<
li class="MenuListHead"><a href="javascript:;">荣誉资质</a></li>
<
li class="MenuListHead"><a href="javascript:;">招贤纳士</a></li>
<
div class="clear"></div>
</
ul>
</
nav>
</
aside>
<!--文字介绍区-->
<section class="MainContent">
<
div class="Content">
<!--左侧-->
<div class="ContentLeft" id="ContentLeft">
<
div class="SinglePage ContentLeftSelect">
<
span>海南俊华绿色建筑服务有限公司</span>
<
i>Hainan Junhua Green Building Services Ltd.</i>
<
br/>
<
p>专注于绿色建筑创新研究与实践</p>
<
p>深圳市盛恒绿色建筑产业研究中心,是一家为新建及既有建筑提供绿色建筑技术并实施设计运营一体化全方位服务的绿色建筑综合服务商,以谋求推动绿色建筑与社会的和谐发展为目标,专注于绿色建筑创新研究与实践,致力于让更多的人享受健康、舒适、节约环保的绿色生活。公司成立以来,在绿色建筑领域,与国内多家大型设计院、政府主管部门、知名房地产企业保持着良好的合作关系。</p>
<
p>公司吸收与培养了一批技术力量过硬和设计经验丰富的技术人员,组建了一支国内绿色建筑和房地产开发领域资深专业的技术团队针对各地推广绿色建筑行动的相关文件,专注于以下服务内容:</p>
1、绿色建筑认证咨询<br />
2、绿色建筑技术研究<br />
3、可再生能源施工图深化设计<br />
4、绿色建筑物理性能评估<br />
5LEED GA AP 培训<br />
6、建筑节能评估改造<br />
<
img src="uploadfiles/image/AboutImg.jpg" alt="关于我们"/>
<
p>公司坚持品牌发展之路,以开拓创新、追求卓越、行业争先、服务社会为宗旨,坚持无边界创新整合战略,用速度冲击规模,使技术水平达到国际建筑节能行业先进水平,在发展的道路上不断求索、创新,为人类创造环境友好型的明天。</p>
</
div>
<
div class="SinglePage"><a href="javascript:;" class="red">企业文化部分</a></div>
<
div class="SinglePage"><a href="javascript:;" class="orange"></a></div>
<
div class="SinglePage"><a href="javascript:;" class="blue">招贤纳士部分</a></div>
</
div>
<
div class="ContentRight">
<
a href="javascript:;"><img src="uploadfiles/image/AboutImg1.jpg" /></a>
<
a href="javascript:;"><img src="uploadfiles/image/AboutImg2.jpg" /></a>
</
div>
<
div class="clear"></div>
</
div>
</
section>
</
section>

<!--head 底部-->
<footer class="Bottomer"
>
<
div class="Bottom">
<
div class="BottomLeft">
<
div class="Copyright">海南俊华绿色建筑服务有限公司© 2015 Jun Hua All Rights Reserved.</div>
<
nav class="BottomLinks"> <!--友情链接-->
<a href="#" target="_blank">合作伙伴</a>
<
em>|</em>
<
a href="#" target="_blank">网站地图</a>
<
em>|</em>
<
a href="#" target="_blank">法律声明</a>
<
em>|</em>
<
a href="#" target="_blank">友情链接</a>
<
em>|</em>
<
a href="#" target="_blank">访问统计</a>
</
nav>
</
div>
<
div class="BottomMain">
<
p>联络我们</p>
<
a href="#">查看本页面的实现原理</a>
<
p>地址/AddXXXXXXXXXXX
<br />
电话/TelXXXXXXXXXXX
<br />
邮箱/MailXXXXXXXXXXX
</p>
</
div>
<
div class="BottomRight">
<
img src="uploadfiles/image/wechat.jpg" />
<
p>扫一扫,<br />关注我们官方微信</p>
</
div>
<
div class="clear"></div>
</
div>
</
footer>
</
body>
</
html>
<
script>
/*关于我们的选项卡*/
var oMenuList=document.getElementById("MenuList"),
oContentLeft=document.getElementById("ContentLeft"),
oMenuListHead=oMenuList.getElementsByClassName("MenuListHead"),
oSinglePage=oContentLeft.getElementsByClassName("SinglePage");
for(var i=0;i<oMenuListHead.length;i++){
oMenuListHead[i].index=i;
oMenuListHead[i].onmouseover=function(){
tabChangeAbout(this.index)
};
};
function tabChangeAbout(index){
for(var i=0;i<oMenuListHead.length;i++){
oMenuListHead[i].className="MenuListHead";
oSinglePage[i].className="SinglePage";
}
oMenuListHead[index].className="MenuListHead MenuListHeadSelect";
oSinglePage[index].className="SinglePage ContentLeftSelect";
}
</
script>

CSS代码如下

@charset "utf-8";
/*
清除样式部分*/
html{ font
:normal 62.5%/2.3em "微软雅黑";-webkit-user-select: none;}
body{ margin
:0px; padding:0px; margin:0px auto; font-size:1.2em; color:#414446; width:100%; min-width:1090px; width:expression((documentElement.clientWidth < 1090) ? "1090px" : "100%" ); zoom:1;}
ul,li,form, dl,dt,dd, div{ padding
: 0px; margin: 0px; list-style:none;}
select,input,textarea{ border-radius
:0; -webkit-border-radius:0; color:#414446;}
input
:focus { outline: none;}
input,button,select,textarea{outline
:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }
textarea{resize
:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }
textarea,input,select { background
:none; border:none; margin:0; padding:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{ display
: block;} /*html5设置*/
figure,figcaption{ margin
:0px; padding:0px;}
audio,canvas,progress,video { display
: inline-block; vertical-align: baseline;}
img{ border
:none; border:0; vertical-align:top;}
a{ color
:#414446; text-decoration:none; noline:-webkit-tap-highlight-color:rgba(0,0,0,0);}
a
:focus {outline:none; -moz-outline:none;}
a
:hover{ text-decoration:none;}
.
clear{ clear:both; height:0px; overflow:hidden;}/*清楚浮动用的;*/

/*顶部的header*/
/*Top
区域的
*/
.Toper{ width
:100%; border-top:5px solid #2f9e75;}
.
Top{ width:1090px; margin:0 auto;}
.
Top .Share{float:right; padding-top:50px;}
.
Top .Share ul li{ float:left; padding-right:20px; line-height:1.5;}
.
Top .Share ul li a{ display:inline-block; padding-left:25px; color:#8f989d;}
.
Top .Share ul li a.jiathis_counter_style{ padding-left:10px;}
.
Top .Share ul li.SinaIndex a{ background:url(../images/ico_Sina.jpg) no-repeat left center;}
.
Top .Share ul li.OfficialIndex a{ background:url(../images/ico_Index.jpg) no-repeat left center;}
.
Top .Share ul li .jiathis_style .jtico{ background:url(../images/ico_add.jpg) no-repeat left center;}
/*
顶部导航栏*/
.TopNav{ width
:100%; background:#2f9e75;}
.
NavList{ width:1090px; margin:0 auto;}
.
SreachBox{ float:right; width:232px; height:29px; background:url(../images/searchbg.jpg) no-repeat left center; margin:10px 0;}
.
SreachBox .sreach_btn{ float:right; width:38px; height:29px; display:block;}
.
SreachBox .sreach_ipu{ width:175px; color:#c5e3d7; padding:5px 9px; font-family:"微软雅黑";}
.
MainNav{}
.
MainNav ul li{ float:left; padding-right:1px;}
.
MainNav ul li a{ padding:0 35px; display:inline-block; font-size:1.17em; color:#fff; line-height:3.5;}
.
MainNav ul li.onnav a,.MainNav ul li a:hover{ background:#4aab87;}
/*
底部栏*/
.Bottomer{background
:#1d7a58; width:100%; padding-top:50px; padding-bottom:20px;}
.
Bottom{ width:1090px; margin:0 auto;}
.
Bottom .BottomLeft{ width:485px;float: left;}
.
Bottomer .Bottom .BottomLeft .Copyright{color: #fff;}
.
Bottomer .Bottom .BottomLeft .BottomLinks{line-height: 3;}
.
Bottom .BottomLeft .BottomLinks em{ font-style:normal; padding:0 10px; color:#97c2b2;}
.
Bottom .BottomLeft .BottomLinks a{ color:#fff;}

.Bottom .BottomMain{ width:400px;float: left;}
.
Bottom .BottomMain a{ color: #FFF;}
.
Bottom .BottomMain p{ margin:0; line-height:1.5; color:#feffff;}
.
Bottom .BottomRight{ width:200px;float: left;}
.
Bottom .BottomRight img{ float:right; padding-left:10px;}
.
Bottom .BottomRight p{ margin:0; text-align:right; line-height:45px;}
/*index
部分的*/
/*1
banner区域
*/
.HomeBan{width
: 100%;height: 506px;}
/*控制的li部分*/
.HomeBanList .TabHeads{position
: relative;left: 50%;top: 460px;margin-left:-35px;}
.
HomeBanList .TabHeads li{float: left;width: 10px;height: 10px;border-radius: 50%;background:#2f9e75;border: 1px solid olivedrab; margin-right: 10px;cursor: pointer;}
.
HomeBanList .TabHeads li.headSelect{background: #FFF;}
/*控制的主体部分*/
.HomeBan .tabContents .tabContent {width
: 100%;height: 506px;display: none;}
.
HomeBan .HomeBanList .tabContents .contentSelect{display: block;}
/*2、主要内容展示区*/
/*
第一部分
*/
.HomeCont1{ width
:100%;}
.
HomeCont1 .HomeCont1Main{ width:1090px; margin:0 auto; padding:30px 0 45px;}
.
HomeCont1 .HomeCont1Main .HomeContTitle{ text-align:center; background:url(../images/ico_home1.png) no-repeat center top; padding-top:20px;}
.
HomeCont1 .HomeCont1Main .HomeContTitle span{ margin:0; font-size:2em; color:#2f9e75; line-height:1.5;}
.
HomeCont1 .HomeCont1Main .HomeContTitle p{ margin:0; color:#353251; text-transform:uppercase; font-size:1.17em;letter-spacing:1px;}
/*letter-spacing
是调节字距的;,text-transform 属性控制文本的大小写。
capitalize: 首字母大写
uppercase: 大写
lowercase: 小写
none: 正常无变化
inherit: 继承*/
/*.HomeCont1 .HomeCont1Main .HomeContList{padding-top: 40px;}
.HomeCont1 .HomeCont1Main .HomeContList ul li{ width:155px; float:left; text-align:center;padding-right:50px; }
.HomeCont1 .HomeCont1Main .HomeContList ul li a{ display:block;}
.HomeCont1 .HomeCont1Main .HomeContList ul li span{ color:#333333; font-size:1.17em; line-height:2;}
.HomeCont1 .HomeCont1Main .HomeContList ul li p{ margin:0; line-height:1.3; color:#9f9f9f;}*/
.HomeCont1 .HomeCont1Main .HomeContList{ padding-top
:40px;height: 210px;overflow: hidden;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li{ width:155px; float:left; text-align:center;padding-right: 25px;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li a{ display:block;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li span{ color:#333333; font-size:1.17em; line-height:2;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li p{ margin:0; line-height:1.3; color:#9f9f9f;}
/*第二部分*/
.HomeCont2{width
: 100%;background: url("../images/bg2.jpg")repeat left top;border-bottom: 1px solid #177753;border-top: 1px solid #177753;}
.
HomeCont2 .HomeCont2Main{width: 1090px;margin: 0 auto;padding: 30px 0 60px;}
.
HomeCont2 .HomeCont2Main .HomeContTitle{text-align: center;background:url(../images/ico_home2.png) no-repeat center top;padding-top: 20px;}
.
HomeCont2 .HomeCont2Main .HomeContTitle span{font-size: 2em;line-height: 1.5;
color: #FFF;margin: 0;}
.
HomeCont2 .HomeCont2Main .HomeContTitle p{text-transform:uppercase;color: #7ccbad;padding-bottom: 10px;font-size: 1.17em;letter-spacing: 1px;margin: 0;}
.
HomeCont2 .HomeCont2Main .HomeContTab{text-align: center;padding-top: 20px;}
.
HomeCont2 .HomeCont2Main .HomeContTab .headSelect{ border: 1px solid #FFF; }/*JS选择标记;*/
.HomeCont2 .HomeCont2Main .HomeContTab li{font-size
: 1.17em;width: 110px;height: 36px;display: inline-block;color: #fff;border: 1px solid #CCC;line-height: 36px;margin:0 20px;cursor: pointer;}
.
HomeCont2 .HomeCont2Main .HomeContTab li:hover{border: 1px solid #FFF; }
.
HomeCont2 .HomeCont2Main .HomeContGroup{padding-top: 30px;}
.
HomeCont2 .HomeCont2Main .HomeGroup1{display: none;}
.
HomeCont2 .HomeCont2Main .contentSelect{display: block;}/*JS选择标记;*/
.HomeCont2 .HomeCont2Main .HomeGroup1 ul li{width
: 250px;padding: 7px 8px 7px 9px;background: rgba(250,250,250,0.1);text-align: center;float: left;margin-right: 5px;}
.
HomeCont2 .HomeCont2Main .HomeGroup1 ul li .HomeCaseTitle{color: #fefefe;border-bottom: 1px solid #FFF;display: block;line-height: 3;}
.
HomeCont2 .HomeCont2Main .HomeGroup1 ul li p{margin:0;color: #fefefe;line-height: 1.5;padding: 10px 0;}
/*
第三部分:咨询中心*/
.HomeCont3{width
: 100%;}
.
HomeCont3 .HomeCont3Main{width: 1090px;margin: 0 auto;padding: 30px 0 60px;}
.
HomeCont3 .HomeCont3Main .HomeContTitle{text-align: center;background: url("../images/ico_home1.png")no-repeat center top;padding-top: 20px;}
.
HomeCont3 .HomeCont3Main .HomeContTitle span{margin: 0;font-size: 2em;line-height: 1.5;color:#2f9e75;}
.
HomeCont3 .HomeCont3Main .HomeContTitle p{text-transform: uppercase;margin: 0;letter-spacing: 1px;}
.
HomeCont3 .HomeCont3Main .HomeContList{padding-top: 40px;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li{ width:313px; float:left; padding-right:50px;}
.
HomeCont3 .HomeCont3Main .HomeContList .HomeContColName{border-bottom:1px solid #999; color:#999;line-height:2;display: block;}
.
HomeCont3 .HomeCont3Main .HomeContList .HomeContListTitle{font-size: 1.2em;font-weight: bold;color:#666666; display:block;padding:25px 0 20px;line-height: 2;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li .HomeContListTitle:hover{text-decoration: underline;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li p{margin: 0;line-height: 1.5; color:#999999;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li .more{width:60px; height:18px; display:block;border:1px solid #999;text-align: center;line-height: 1.5;margin-top: 30px;}

/*about页面*/
/*
面包屑导航
*/
.Current{width
: 1090px;margin: 0 auto;color: #a3a3a8;padding-top: 20px;}
.
Current dl{float: right;background: url("../images/bg1.jpg")no-repeat left center;padding-left: 20px;line-height: 2;}
.
Current dl a{color: #a3a3a8}
.
Current dl span{color: #4d4e50}
/*选项卡导航*/
.Contain{width
: 100%;}
.
Contain .sildeBar{width: 100%;border-bottom: 1px solid #CCC;}
.
Contain .sildeBar .MenuList ul{width: 1090px;margin: 0 auto;}
.
Contain .sildeBar .MenuList ul li{float: left;margin-right: 30px;line-height: 3;}
.
Contain .sildeBar .MenuList ul li.MenuListHeadSelect{border-bottom: 2px solid #1d7a58;}
.
Contain .sildeBar .MenuList ul li a{font-size: 1.3em;font-weight: bold;}
/*左侧区域*/
.MainContent{width
: 100%;border-bottom: 1px solid #CCC;}
.
MainContent .Content{width: 1090px;margin: 0 auto;padding-bottom: 20px;}
.
MainContent .Content .ContentLeft{width: 768px;border-right: 1px solid #CCC;padding-right:20px;float: left;padding-top: 30px;}
.
SinglePage{clear: both;}
.
SinglePage span{color: #746969;font-size: 2em;line-height:2;}
.
SinglePage i{color: #746969;font-size: 1.15em;text-transform: uppercase;display: block;line-height: 0.6;}
.
jiathis_style{float: right;}
/*选项卡内容区*/
.ContentLeft .red{display
: block;width: 768px;height: 768px;background: red;}
.
ContentLeft .orange{display: block;width: 768px;height: 768px;background: orange;}
.
ContentLeft .blue{display: block;width: 768px;height: 768px;background: blue;}
.
ContentLeft .SinglePage{display: none;}
.
ContentLeft a{font-size: 28px;color: #FFF;padding-top: 20px;}
.
ContentLeft .ContentLeftSelect{display: block;}
/*右侧区域*/
.MainContent .Content .ContentRight{width
: 220px;text-align:right; padding:30px 0 0 20px;float: left;}
.
MainContent .Content .ContentRight a{margin-bottom: 20px;display: block;}