在jj的盒子里输入以下内容:
<!-- jj 开始 -->
<div class="jj">
<div class="m2">
<div class="bt">
<a href="">公司简介</a>
</div>
<div class="nr">
<div class="left">
<p></p>
<p>安徽南讯信息技术有限公司(简称:南讯技术)筹建于2003年,2007年经过安徽省工商行政管理局正式核准成立的专业互联网公司,主营业务有全网营销、网站开发等,公司拥有各类全网营销技术人员,一直专注于网络顾问咨询服务和全网营销服务,从业十几年期间协助创立各行业展开互联网应用及服务,也有独立运营成功本土互联网专业品牌。</p>
<p>为客户提供最有价值的服务,凭借我们资深的网络运营顾问、强大的调研队伍、专业的 WEB美工设计、优秀的数据库及程序开发、敬业的客户服务经理等团队,以及多年来对互联网络的持续深入研究、对各行业客户的理解、对项目的整体策划控制、对国际化标准和流行趋势的掌握、对客户形象的视觉传递、对应用系统的完美结合等,我们能快速的为企、事业单位提供一站式全网营销服务 (One-Stop Service)。</p>
[ <a href="">查看详细</a> ]
<p></p>
</div>
<div class="right">
<img src="./images/logojj.jpg" alt="">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<!-- jj 结束 -->
接着在css里面的index.css输入样式:
/* 公司简介 样式 开始 */
.jj .m2{
height: 434px;
border: 1px solid #ccc;
background-color: #fff;
}
.jj .bt{
width: 120px;
height: 37px;
line-height: 37px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-left: 30px;
text-align: center;
font-size: 14px;
color: #333;
}
.bt a{
color: #333;
text-decoration: none;
}
.jj .nr{
height: 335px;
padding: 30px;
}
.jj .left{
width: 645px;
height: 330px;
font-size: 14px;
line-height: 30px;
}
.nr p{
text-indent: 28px;
}
.nr a:link, .nr a:visited{
color: #0099cc;
text-decoration: underline;
}
.nr a:hover{
color: #ff0000;
}
.jj .right{
width: 370px;
height: 312px;
background-image: url(../images/jjbg.png);
background-repeat: no-repeat;
background-position: left top;
margin-top: 5px;
padding-left: 15px;
padding-top: 12px;
}
/* 公司简介 样式结束 */
在css里面的公共样式里面找到.jj和.bajue,去除背景色
在index.html里面的bajue的盒子里写如下内容:
<!-- bajue 开始 -->
<div class="bajue">
<div class="m2">
<h2>南讯八绝</h2>
<div class="fb">
<div class="bgjz">2003年创立,十余春秋,悉心研究,苦练绝技,接案万起,终成“全互联网思维”八项绝技</div>
</div>
<div class="b8">
<ul>
<li>
<div class="b8im"><a href=""></a></div>
<a href="">整站运营</a>
</li>
<li class="ic2">
<div class="b8im"><a href=""></a></div>
<a href="">SEO</a>
</li>
<li class="ic3">
<div class="b8im"><a href=""></a></div>
<a href="">网站开发</a>
</li>
<li class="ic4">
<div class="b8im"><a href=""></a></div>
<a href="">全网营销</a>
</li>
<li class="ic5">
<div class="b8im"><a href=""></a></div>
<a href="">互联网+</a>
</li>
<li class="ic6">
<div class="b8im"><a href=""></a></div>
<a href="">系统管理</a>
</li>
<li class="ic7">
<div class="b8im"><a href=""></a></div>
<a href="">软件定制</a>
</li>
<li class="ic8">
<div class="b8im"><a href=""></a></div>
<a href="">课程培训</a>
</li>
</ul>
</div>
</div>
</div>
<!-- bajue 结束 -->
在css的index.css样式里面写下如下代码:
/* 南讯八绝 样式开始 */
.bajue h2{
color: #0099CC;
font-size: 30px;
padding: 20px 0 0;
margin: 0;
text-align: center;
height: 60px;
line-height: 60px;
}
.bajue .fb{
width: 1130px;
height: 30px;
line-height: 30px;
background-image: url(../images/dashedbot.png);
background-repeat: repeat-x;
background-position: center center;
text-align: center;
}
.fb .bgjz{
width: 560px;
background-color: #F0EAE6;
margin-right: auto;
margin-left: auto;
color: #0099cc;
}
.bajue .b8{
height: 240px;
/* 让上下两个盒子有间隙 */
padding-top: 40px;
}
.b8 li .b8 ul{
margin: 0;
padding: 0;
list-style: none;
}
.b8 li{
width: 141px;
float: left;
text-align: center;
}
.bajue li .b8im{
width: 128px;
height: 128px;
border-radius: 64px;
background-color: #0099cc;
background-image: url(../images/ico1.png);
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: visible;
margin-right: auto;
margin-left: auto;
}
.b8 a{
display: block;
line-height: 50px;
font-size: 16px;
color: #333;
text-align: center;
text-decoration: none;
}
.b8im a{
display: block;
}
.b8 li.ic2 .b8im{
background-image: url(../images/ico2.png);
}
.b8 li.ic3 .b8im{
background-image: url(../images/ico3.png);
}
.b8 li.ic4 .b8im{
background-image: url(../images/ico4.png);
}
.b8 li.ic5 .b8im{
background-image: url(../images/ico5.png);
}
.b8 li.ic6 .b8im{
background-image: url(../images/ico6.png);
}
.b8 li.ic7 .b8im{
background-image: url(../images/ico7.png);
}
.b8 li.ic8 .b8im{
background-image: url(../images/ico8.png);
}
.b8 li:hover .b8im{
background-color: #336699;
}
.b8 li:hover a:hover{
color: #ff0000;
text-decoration: underline;
}
/* 南讯八绝 样式 结束 */
里面的图都在南讯页面的开发者页面获取即可。
接上篇仿南讯页面效果图如下所示: