A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 阿瑟东 初级黑马   /  2019-4-20 22:52  /  520 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
        <title>传智播客</title>
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="font/iconfont.css">
        <link rel="stylesheet" href="css/index.css">
</head>
<body>
        <!-- header S-->
        <div class="header w">
                <!-- logo -->
                <div class="logo fl">
                        <h1>
                                <a href="index.html">
                                        <img src="img/logo.png" alt="">
                                </a>
                        </h1>
                </div>
                <!-- nav -->
                <div class="nav fr">
                        <ul>
                                <li><a href="#" class="shoye">首页</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>
        <!-- header E-->
        <!-- scroll S-->
        <div class="scroll">
                <div class="w">
                        <div class="gt fl"><em class="iconfont"></em></div>
                        <div class="gl fr"><em class="iconfont"></em></div>
                </div>
        </div>
        <!-- scroll E-->
        <!-- content S-->
        <div class="w">
                <div class="anli">
                        <img src="img/anli.png" alt="">
                </div>
                <div class="anli_tu">
                                <ul>
                                        <li class="tupin">
                                                <a href="#">
                                                        <img src="img/tu-1.jpg" alt="">
                                                </a>
                                        </li>
                                        <li>
                                                <a href="#">
                                                        <img src="img/tu-2.jpg" alt="">
                                                </a>
                                        </li>
                                        <li>
                                                <a href="#">
                                                        <img src="img/tu-3.jpg" alt="">
                                                </a>
                                        </li>
                                        <li>
                                                <a href="#">
                                                        <img src="img/tu-4.jpg" alt="">
                                                </a>
                                        </li>
                                        <li>
                                                <a href="#">
                                                        <img src="img/tu-5.jpg" alt="">
                                                </a>
                                        </li>
                                        <li>
                                                <a href="#">
                                                        <img src="img/tu-6.jpg" alt="">
                                                </a>
                                        </li>
                                </ul>
                </div>
        </div>
        <!-- 我们的服务 -->
        <div class="fuwu">
                <div class="w">
                        <div class="fuwu_img">
                                <img src="img/fuwu.png" alt="">
                        </div>
                        <p>xxxx有限公司网络品牌机构。专注网站建设、网站设计、品牌设计、空间设计、网络营销、网站托管、整合营销服务为核心服务。专注于创意设计实现商业价值较大化,为所有谋求长远发展的企业提升品牌品质。拥有经验丰富技术团队,专业的资深设计师。凝聚了一批行业内优秀的年轻人,富有创造力和奉献精神。 我们所做的一切都是以客户的利益为出发点,帮助企业建立全面且切实的市场形象,我们坚信与企共同成长!</p>
                        <button>了解我们</button>
                </div>
        </div>
        <!-- 新闻 -->
        <div class="w">
            <div class="xin">
                    <img src="img/xin.png" alt="">
            </div>
            <div class="xin_tu">
                    <ul>
                            <li>
                                    <img src="img/xin-1.jpg" alt="">
                                    <h4>优秀界面的优质形态:隐形的界面</h4>
                                    <p>真正优秀的用户界面会被无视,而糟糕的设计则迫使用户注意界面的,而非内容。用户都是带着目的来访问网站的:买本新书、学...</p>
                            </li>
                            <li>
                                    <img src="img/xin-2.jpg" alt="">
                                    <h4>优秀界面的优质形态:隐形的界面</h4>
                                    <p>真正优秀的用户界面会被无视,而糟糕的设计则迫使用户注意界面的,而非内容。用户都是带着目的来访问网站的:买本新书、学...</p>
                            </li>
                            <li>
                                    <img src="img/xin-3.jpg" alt="">
                                    <h4>优秀界面的优质形态:隐形的界面</h4>
                                    <p>真正优秀的用户界面会被无视,而糟糕的设计则迫使用户注意界面的,而非内容。用户都是带着目的来访问网站的:买本新书、学...</p>
                            </li>
                    </ul>
            </div>
        </div>
        <!-- content E-->
        <!-- toopre -->
        <div class="toopre">
                <div class="w">
                        <ul class="fl">
                                <li>
                                        <dl>
                                                <dt class="wum">我们</dt>
                                                <dd><a href="#">服务项目</a></dd>
                                                <dd><a href="#">关于我们</a></dd>
                                                <dd><a href="#">新闻动态</a></dd>
                                                <dd><a href="#">联系我们</a></dd>
                                        </dl>
                                </li>
                                <li>
                                        <dl>
                                                <dt class="wum">案例</dt>
                                                <dd><a href="#">全部</a></dd>
                                                <dd><a href="#">网站</a></dd>
                                                <dd><a href="#">移动app</a></dd>
                                                <dd><a href="#">桌面软件</a></dd>
                                        </dl>
                                </li>
                                <li>
                                        <dl>
                                                <dt class="wum">方案</dt>
                                                <dd><a href="#">移动互联网</a></dd>
                                                <dd><a href="#">在线金融</a></dd>
                                                <dd><a href="#">传统企业转型</a></dd>
                                                <dd><a href="#">医疗健康</a></dd>
                                        </dl>
                                </li>
                                <li>
                                        <dl>
                                                <dt class="wum">发现</dt>
                                                <dd><a href="#">战略伙伴</a></dd>
                                                <dd><a href="#">官方博客</a></dd>
                                                <dd><a href="#">留言板</a></dd>
                                                <dd><a href="#">友情链接</a></dd>
                                        </dl>
                                </li>
                                <li>
                                        <dl>
                                                <dt class="wum">扫码关注</dt>
                                                <dd>
                                                        <img src="img/ma.jpg" alt="">
                                                </dd>
                                        </dl>
                                </li>
                        </ul>
                </div>
        </div>
        <div class="chuan">
                <div class="w">
                        <p>北京传智播客教育科技有限公司 版权所有Copyright 2006-2019   All Rights Reserved   京ICP备08001421号   京ICP证161252号   京公网安备110108007702</p>
                </div>
        </div>
</body>
</html>


/*公共样式 */
.w {
        width: 1200px;
        margin: 0 auto;
}
.fl {
        float: left;
}
.fr {
        float: right;
}
/* header */
.header {
        height: 120px;
}
.logo {
        margin-top: 35px;
        margin-left: 35px;
}
/* nav */
.nav {
        width: 540px;
}
.nav li {
        float: left;
        line-height: 119px;
}
.nav li a {
        padding: 15px 35px;
        border-radius: 10px;
        color: #666;
        font-size: 16px;
}
.nav li a:hover {
        background: #0667a2;
        color: #fff;
}
.nav .shoye {
        background: #0667a2;
        color: #fff;
}
/* scroll E */
.scroll {
        height: 384px;
        background: url(../img/scroll.jpg) no-repeat center;
}
.gt,
.gl {
        width: 60px;
        height: 60px;
        background: #33414d;
        line-height: 60px;
        text-align: center;
        margin-top: 162px;
        border-radius: 10px;
}
.scroll em {
        font-size: 26px;
        color: #fff;
}
/* content  E */
.content{
        height: 740px;
}
.anli,
.xin  {
        position: relative;
        height: 175px;
}
.anli img,
.xin img {
        position: absolute;
        top: 54px;
        left: 513px;
}
.anli_tu {
        height: 566px;
}
.anli_tu ul {
        width: 1230px;
}
.anli_tu ul li {
        float: left;
        width: 380px;
        height: 220px;
        margin: 0 30px 30px 0;
}
/* 我们的服务 */
.fuwu {
        overflow: hidden;
        height: 466px;
        background: url(../img/fuwu-tu.jpg) no-repeat center;
}
.fuwu_img {
        margin-left: 497px;
        margin-top: 48px;
}
.fuwu p {
        width: 1080px;
        line-height: 31px;
        font-size: 18px;
        color: #fff;
        margin-top: 68px;
}
.fuwu button {
        padding: 16px 70px;
        font-size: 18px;
        border-radius: 10px;
        border: none;
        color: #fff;
        background: #05c468;
        margin: 50px 0 0 480px;
}
.xin_tu {
        height: 550px;
}
.xin_tu li {
        float: left;
        width: 380px;
        height: 420px;
        margin-right: 38px;
}
.xin_tu h4 {
        font-size: 18px;
        color: #000;
        margin: 28px 0 0px 20px;
}
.xin_tu p {
        line-height: 25px;
        width: 300px;
        height: 68px;
        padding: 20px;
        font-size: 12px;
        color: #666666;
}
.xin_tu ul {
        width: 1260px;
}
/* content  S */
.toopre {
        height: 277px;
        background: #f4f4f4;
}
.toopre li {
        float: left;
        margin: 60px 160px 60px 0;
        line-height: 30px;
}
.wum {
        font-size: 16px;
        color: #000;
        font-weight: 700;
}
.toopre li dd a {
        font-size: 14px;
        color: #878787;
}
.chuan {
        height: 60px;
        background: #333;
}
.chuan p {
        color: #fff;
        text-align: center;
}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马