实训项目---仿写南讯页面开端（南讯八绝和公司简介）

最新推荐文章于 2024-09-24 15:55:35 发布

卡夫卡的baby

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量165

点赞数

分类专栏：实训项目文章标签： css html

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125610828

版权

实训项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、建立css、js 、image、 index.html文件夹

2、在css文件夹中建立index.css 、 pub.css 子文件夹

3、先在pub.css文件夹中写入基本的样式，其次在index.html文件夹中写入文体，然后在index.css中竭力样式标签

pub.css代码如下：

*{
    margin: 0;
    padding: 0;
}
body,td,th{
    color: #333;
    font-size: 12px;
    font-family: "Microsoft YaHei", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    background-color: #F0EAE6;
}
*:hover{
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out ;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}
.left,.lef,.le,.l,.center,.cen,.ce,.c{
    float:left;
}
.right,.rig,.ri{
    float:right;
}
.clear{
    float: none;
    clear: both;
}



.top{
    height: 120px;
    background-color:#F0EAE6;
}

.nav{
    height: 50px;
    background-color: #336699;
}
.hd{
    height: 350px;
    /* 溢出隐藏 */
    overflow: hidden;
    background-color: burlywood;
}
.bajue{
    height: 400px;
}
.jj{
    height: 436px;

}
.zw{
    height: 380px;
    overflow: hidden;
    background-color: brown;
}
.siyun{
    height: 470px;
    background-color: aquamarine;
}
.case{
    height: 350px;
    background-color: #353535;
}
footer{
    height: 350px;
    background-color: #353535;
}
.oline{
    outline: 1px dashed red;
}
.m2{
    width: 1130px;
    margin-right: auto;
    margin-left: auto;

}

.nav ul,.nav li{
    margin: 0;
    padding: 0;
    /* 去除列表项li前面的小图标 */
    list-style-type: none;
}
.nav li{
    width: 140px;
    height: 50px;
    /* 行高 */
    line-height: 50px;
    float: left;
}
nav>ul>li{
    text-align: center;
    /* 相对定位 */
    position: relative;
}

.nav li a{
    /* 将行元素转成块元素 */
    width: 100%;
    height: 50px;
    display: block;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    color: #fff;
}

.nav a:hover{
    background-color: #003366;
}

index.html代码如下：

<title>合肥SEO-合肥网络推广_网站优化_搜索引擎优化公司_安徽SEO_网站排名_安徽南讯信息技术有限公司</title>
    <link rel="stylesheet" href="./css/pub.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- .top+.nav+.hd+.bajue+.jj+.zw#kk1+.siyun+.zw#kk2+.case+footer -->

    <!-- top 开始 -->
    <div class="top">

    </div>
    <!-- top结束 -->

    <!-- nav 开始 -->
    <div class="nav">
     <div class="m2 oline" >
        <!-- nav>ul>li*8>a[target="-blank"] -->
        <nav>
            <ul>
                <li><a href="" target="-blank">首页</a></li>
                <li><a href="" target="-blank">全网营销</a></li>
                <li><a href="" target="-blank">技术研发</a></li>
                <li><a href="" target="-blank">运营管理</a></li>
                <li><a href="" target="-blank">客户案例</a></li>
                <li><a href="" target="-blank">解决方案</a></li>
                <li><a href="" target="-blank">新闻中心</a></li>
                <li><a href="" target="-blank">关于我们</a></li>
            </ul>
        </nav>
     </div>
    </div>
    <!-- nav 结束 -->

    <!-- hd 开始 -->
    <div class="hd"></div>
    <!-- hd 结束 -->

    <!-- bajue 开始 -->
    <div class="bajue">
        <div class="m2">
            <h2>南讯八绝</h2>
            <div class="fb">
                <div class="bgjz">2003年创立,十余春秋，悉心研究，苦练绝技，接案万起，终成“全互联网思维”八项绝技</div>
            </div>
            <div class="b8">
                <!-- ul>li*8>.b8im>a^a -->
            <ul>
                <li>
                    <div class="b8im"><a href=""></a></div>
                    <a href="">整站运营</a>
                </li>
                <li class="ico2">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">SEO</a>
                </li>
                <li class="ico3">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">网站开发</a>
                </li>
                <li class="ico4">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">全网营销</a>
                </li>
                <li class="ico5">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">互联网+</a>
                </li>
                <li class="ico6">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">系统管理</a>
                </li>
                <li class="ico7">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">软件定制</a>
                </li>
                <li class="ico8">
                    <div class="b8im"><a href=""></a></div>
                    <a href="">课程培训</a>
                </li>
                <div class="clear"></div>
            </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- bajue 结束 -->

    <!-- 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/1.jpg" alt="">
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- jj 结束 -->

    <!-- zw 开始 -->
    <div class="zw" id="kk1"></div>
    <!-- zw 结束 -->

    <!-- siyun 开始 -->
    <div class="siyun"></div>
    <!--  -->
    <div class="zw" id="kk2"></div>
    <div class="case"></div>
    <footer></footer>

index.css代码如下：

/* 南讯八绝 样式 开始 */
.bajue h2{
    color: #0099cc;
    font-size: 30px;
    padding: 20px 0 0 0;
    margin: 0;
    text-align: center;
    height: 60px;
    line-height: 60px;

}
.bajue .fb{
    width: 1130px;
    height: 30px;
    line-height: 30px;
    /* outline: 1px dashed red; */
    background-image: url('../images/dashedbot.png');
    background-repeat: repeat-x;
    background-position: center center;
    text-align: center;
}
.fb .bgjz{
    width: 560px;
    background-color: #f0eae6;
    /* outline: 1px dashed green; */
    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-decoration: none;
}
.b8im a{
    display: block;
}
.b8 li.ico2 .b8im{
    background-image: url('../images/ico2 .png');
}
.b8 li.ico3 .b8im{
    background-image: url('../images/ico3 .png');
}
.b8 li.ico4 .b8im{
    background-image: url('../images/ico4.png');
}
.b8 li.ico5.b8im{
    background-image: url('../images/ico5.png');
}
.b8 li.ico6 .b8im{
    background-image: url('../images/ico6.png');
}
.b8 li.ico7 .b8im{
    background-image: url('../images/ico7.png');
}
.b8 li.ico8 .b8im{
    background-image: url('../images/ico8.png');
}
.b8 li:hover .b8im{
    background-color: #336699;
}
.b8 li:hover a{
    color: #ff0000;
}
.b8 li:hover a:hover{
    color: #ff0000;
    text-decoration: underline;
}

/* 南讯八绝 样式 结束 */

/* 公司简介样式开始 */
.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/2.png');
    background-repeat: no-repeat;
    background-position: left top;
    margin-top: 5px;
    padding-left: 15px;
    padding-top: 12px;
}
/* 公司简介样式结束 */

预览效果：