仿南讯页面（简介和南讯八绝）

正在修炼web的小芮

于 2022-07-04 23:01:33 发布

阅读量111

点赞数

分类专栏：仿南讯页面文章标签：仿南讯页面

本文链接：https://blog.csdn.net/m0_71814235/article/details/125610274

版权

仿南讯页面专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在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;
}
/* 南讯八绝 样式 结束 */

里面的图都在南讯页面的开发者页面获取即可。

接上篇仿南讯页面效果图如下所示：