H3C项目--HTML5+CSS3+Bootstrap3+少量js

书立行

已于 2024-06-13 17:01:08 修改

阅读量217

点赞数 2

文章标签： html5 css3 javascript bootstrap

于 2024-06-12 22:56:57 首次发布

本文链接：https://blog.csdn.net/primebrake/article/details/139638306

版权

1. HTML5代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H3C</title>
    <!-- 修正后的 Bootstrap CSS 链接 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href='css/base.css'>
    <link rel="stylesheet" href='css/index.css'>
    <!-- 在文档底部引用JavaScript文件 -->
    <script src="index.js" defer></script> <!-- 使用defer属性 -->
</head>

<body>

    <!-- 头部模块制作 start -->
    <div class="header">
        <div class="container">
            <div class="row">
                <div class="logo col-md-2 col-xs-1"><img src="../H3C/images/newlogo.png" alt="" class="img-responsive">
                </div>
                <div class="header_nav col-md-5 col-xs-2">
                    <ul class="text-center">
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li>产品技术</li>
                        </a>
                        <a href="#">
                            <li>解决方案</li>
                        </a>
                        <a href="#">
                            <li>服务</li>
                        </a>
                        <a href="#">
                            <li>新华三大学</li>
                        </a>
                        <a href="#">
                            <li>合作伙伴</li>
                        </a>
                        <a href="#">
                            <li>关于我们</li>
                        </a>
                    </ul>
                </div>
                <div class="header_right col-md-5 col-xs-3">
                    <div class="row">
                        <div class="register col-md-12">
                            <ul class="col-md-offset-7" id="register">
                                <a href="#">
                                    <li>注册</li>

                                </a>
                                <a href="#">
                                    <li>| 登录</li>
                                </a>
                                <a href="#">
                                    <li>English</li>
                                </a>
                                <a href="#">
                                    <li></li>
                                </a>
                                <a href="#">
                                    <li>HK</li>
                                </a>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="search">
                            <form action="">
                                <div class="form-group col-md-offset-7">
                                    <input type="search" name="" id="" class="form-control search_form"
                                        value="search..">
                                    <img src="images/01.png" alt="">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- 头部模块结束 end -->
    <!-- 中间图片模块 start -->
    <div class="main">
        <div class="container city">
            <div class="row">
                <div class="col-md-3 main_words">热点新闻 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;郑州市市长程志明一行莅临郑州大数据产业园调研
                    <p class="date">[2017-05-26]</p>
                </div>
            </div>
        </div>

    </div>
    </div>
    <!-- 中间图片模块结束 -->
    <!-- 行业模块 start -->
    <div class="container job">
        <h1 class="text-center">行业</h1>
        <p class="text-center">
            VCF架构是华三"云网融合"解决方案的核心支撑，将云计算、智慧网络、IT安全、移动化等解决方案融合拉通，</p>
        <p class="text-center">并通过软件定义与资源编排，实现IT基础设施资源自动化调度、弹性扩展、应需而动。</p>
        <ul>
            <li><img src="images/32.jpg" alt="">
                <p>服务浦东政务</p>
            </li>
            <li><img src="images/3.jpg" alt="">
                <p>服务天津地铁</p>
            </li>
            <li><img src="images/31.jpg" alt="">
                <p>服务上海财经大学</p>
            </li>
        </ul>
    </div>
    <!-- 行业模块结束 -->

    <!-- 服务模块start -->
    <div class="container service">
        <div class="row">
            <div class="fl_img col-md-6"></div>
            <div class="fr_word col-md-6">
                <div class="row">
                    <div class="col-md-12 IT text-center">
                        <h3>让IT始终保持最佳状态</h3>
                        <h1>致力于优质的服务</h1>
                        <p>凭借我们业界最大的生态系统和合作伙伴支持网络以及全球分布的资源，
                        </p>
                        <p> 无论您身在何地，都可获得全面周到的本地服务</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row three_pic">
                                    <div class="col-md-offset-1 col-md-2">
                                        <img src="images/h3c_img_shu_02.png" alt="">
                                        <p class="col-md-offset-7" style="margin-top: 110px">个区域服务机构</p>
                                        <p class="col-md-offset-7" style="color: #999; margin-top: -10px;">覆盖全国90+城市</p>
                                    </div>
                                    <div class="col-md-offset-1 col-md-2"><img src="images/h3c_img_shu_04.png" alt="">
                                        <p class="col-md-offset-9" style="margin-top: 109px">个备件中心</p>
                                        <p class="col-md-offset-5"
                                            style="color: #999; margin-top: -10px; width: 200px;">原厂备件服务覆盖700+城市</p>
                                        <p class="col-md-offset-5" style="color: #999; margin-top: -10px; width: 200px">
                                            2862个县级市及98%的乡镇</p>
                                    </div>
                                    <div class="col-md-offset-1 col-md-2"><img src="images/h3c_img_shu_06.png" alt="">
                                        <p class="col-md-offset-4" style="margin-top: 110px; width: 200px;">
                                            家专业认证渠道服务交付资源</p>
                                        <p class="col-md-offset-4"
                                            style="color: #999; margin-top: -10px; width: 200px;">负责中国大陆、香港及日本地区</p>
                                        <p class="col-md-offset-7" style="color: #999; margin-top: -10px; width: 200px">
                                            客户服务技术支持工作</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 服务模块结束 -->

    <!-- 人们模块 start -->
    <div class="people">
        <div class="container">
            <div class="row">
                <div class="col-md-6 fl_pic">
                    <div class="cost">个人消费品</div>
                    <h1>人人都是魔术师</h1>
                    <p>以科技魔力助力世界改变，打造专属于您的家庭无线网络解决方案。</p>
                    <button class="more">查看更多</button>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-12 fr_pic_01 col-md-offset-1"></div>
                        <div class="cost">合作伙伴</div>
                        <h1>新机遇、新生态、新发展</h1>
                        <p>基于H3C新IT基础开放架构，积极与业内各类厂商、 集成商等形成战略合作关系，在云计算、大数据和智慧城市等相关领域共同打造新IT创新生态联盟。</p>
                        <button class="more">查看更多</button>
                    </div>
                    <div class="row">
                        <div class="col-md-12 fr_pic_02 col-md-offset-1"></div>
                        <div class="costlast">新华三大学</div>
                        <h1 class="hlast">专业人才培养</h1>
                        <p class="plast">提供专业的全方位的学习与咨询解决方案，引领先进理念，分享最佳实践，致力于
                            企业组织和人才能力提升，帮助企业创造优异价值，实现持续成长。</p>
                        <button class="morelast">查看更多</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 人们模块结束 end -->
    <!-- 底部模块制作 -->

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <dl>
                        <dt>按访问者</dt>
                        <dd>政府及企业用户</dd>
                        <dd>运营商</dd>
                        <dd>广电</dt>
                        <dd>中小企业</dd>
                        <dd>个人消费者</dd>
                        <dd>合作伙伴</dd>
                        <dd>求职者</dd>
                    </dl>
                    <dl>
                        <dt>关于H3C</dt>
                        <dd>公司介绍</dd>
                        <dd>发展历程</dd>
                        <dd>经典案例</dt>
                        <dd>《新IT领航》</dd>
                        <dd>《新华三》</dd>
                    </dl>
                    <dl>
                        <dt>联系H3C</dt>
                        <dd>公司总部</dd>
                        <dd>办事处</dd>
                        <dd>代理商</dt>
                        <dd>如何购买</dd>
                    </dl>
                    <dl>
                        <dt>常用链接</dt>
                        <dd>产品图标</dd>
                        <dd>条码防伪查询系统</dd>
                        <dd>产品验货及防伪查询指导</dd>
                    </dl>
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd>代理商查询</dd>
                        <dd>成为H3C合作伙伴</dd>
                        <dd>新IT智慧产业联盟</dd>
                        <dd>云计算技术联盟</dd>
                    </dl>

                </div>
                <div class="col-md-2 ewm_f">
                    <div class="ewm_01"><img src="images/weibo.jpg" alt="">
                    官方微博</div>
                    <div class="ewm_02"><img src="images/h3c_weixin.png" alt="">官方微信</div>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

2. 基础样式

* {
    margin: 0;
    padding: 0;
    /* 设置新的c3盒子模型 */
    box-sizing: border-box;
}

/* 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

img {
    /* border: 0照顾低版本浏览器 如果图片包含了链接会有边框问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {

    color: #fff;
    text-decoration: none
}

a:hover {
    color: rgb(152, 152, 200);
}

button,
input {
    /* "\5B8B\4F53"就是宋体的意思,浏览器兼容性问题 */

    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框，我们需要手动去掉 */
    border: 0;
    /* 输入时没有外边框 */
    outline: none;
}

body {
    /* 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

3.CSS样式

.container {
    width: 1400px;
    /* background-color: red; */
    /* background-color: red; */
}

/* 头部模块 */

.header {

    height: 97px;
    background-color: #153c65;
}

.header .logo {
    height: 97px;
    /* background-color: red; */
}

.header .logo img {

    margin: 25px 30px;
}

.header_nav {
    height: 97px;
    /* background-color: black; */
    line-height: 97px;
    overflow: hidden;

}

.header_nav ul li {
    float: left;
    margin: 0 20px;

}

.header_right {
    height: 97px;
    /* background-color: blanchedalmond; */
}

.register {
    /* float: right; */
    height: 57px;
    /* background-color: red; */
    line-height: 57px;
}

.register ul li {
    float: left;
    margin: 0 10px;
}

.search {
    /* float: right; */
    height: 40px;
    /* background-color: green; */
    line-height: 40px;
}

.search button {
    float: right;
}

.search_form {
    /* float: right; */
    display: inline-block;
    width: 240px;
    height: 28px;
}

.search img {
    float: right;
    margin: 8px -27px;
    width: 20px;
    height: 20px;
}


/* 中间图片模块 */
.main {
    position: relative;
}

.main .city {
    height: 560px;
    background: url(../images/04.jpg) no-repeat center center;
}

.city {
    position: relative;
}

.city .date {
    color: #999;
    display: inline-block;

}

.main .main_words {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 48px;
    background-color: #0a1124;
    line-height: 48px;
    color: #fff;
    /* text-align: center; */
}


/* 行业模块 */
.job {
    position: relative;
    height: 519px;
    font-size: 14px;
    /* background-color: red; */
}

.job ul li img {
    width: 395px;
    height: 223px;
}

.job ul li {
    float: left;
    margin: 50px 30px;
}

.job ul li p {
    position: absolute;
    /* width: 395px; */
    /* right: 10px; */
    bottom: 66px;
    float: left;
    margin: 50px 30px;
    color: #fff;
    /* background-color: #919d91; */
}

/* 服务模块 */

.service {
    height: 406px;
}

.service .fl_img {
    background-color: red;
    height: 406px;
    background: url(../images/768.png) no-repeat;
    /* background-size: 100%; */
}

.IT h1 {
    margin-bottom: 30px;
}

.three_pic img {
    float: left;
    width: 110px;
    height: 70px;
    margin-top: 30px;
    /* background-color: red; */
    /* margin:  0 30px; */

}

.three_pic img:first-child {
    margin-left: 40px;

}

.service ul li {
    float: left;
    margin: 30px 0;
}

.three_pic p {
    width: 100px;
    /* height: 200px; */
    /* background-color: red; */
}

/* 人们模块制作 */
.people {
    position: relative;
    margin: 80px 0;
}

.people .fl_pic {
    height: 695px;
    background: url(../images/H3C_ITnew_21.jpg) no-repeat center center;
    margin-left: 40px;
}

.fl_pic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 线性渐变 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
    /* 过渡 */
    transition: opacity 0.3s ease;
    opacity: 1;
    /* 防止点击事件穿透 */
}


.cost {
    position: absolute;
    left: 60px;
    top: 37px;
    width: 100px;
    height: 18px;
    background-color: #fff;
    text-align: center;
    line-height: 18px;
    color: #0076c8;
    z-index: 100;
}

.people h1 {
    position: absolute;
    left: 60px;
    top: 60px;
    color: #fff;
    z-index: 100;
}

.people p {
    position: absolute;
    left: 60px;
    top: 150px;
    color: #fff;
    z-index: 100;
}

.people .more {
    position: absolute;
    left: 60px;
    top: 200px;
    color: #fff;
    z-index: 100;
    width: 103px;
    height: 31px;
    border: 1px solid #fff;
    background-color: transparent;
}

.people .fr_pic_01 {
    width: 622px;
    height: 342px;
    background: url(..//images/H3C_ITnew_23.jpg) no-repeat center center;
}

.fr_pic_01::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 线性渐变 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
    /* 过渡 */
    transition: opacity 0.3s ease;
    opacity: 1;
    /* 防止点击事件穿透 */
}

.people .fr_pic_02 {
    margin-top: 20px;
    width: 622px;
    height: 333px;
    background: url(..//images/H3C_ITnew_26.jpg) no-repeat center center;
}

.fr_pic_02::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 线性渐变 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
    /* 过渡 */
    transition: opacity 0.3s ease;
    opacity: 1;
    /* 防止点击事件穿透 */
}

.fr_pic_01:hover::after {
    opacity: 0;
    /* 鼠标悬停时覆盖层完全透明 */
}

.fl_pic:hover::after {
    opacity: 0;
    /* 鼠标悬停时覆盖层完全透明 */
}

.fr_pic_02:hover::after {
    opacity: 0;
    /* 鼠标悬停时覆盖层完全透明 */
}

.costlast {
    position: absolute;
    left: 60px;
    top: 400px;
    width: 100px;
    height: 18px;
    background-color: #fff;
    text-align: center;
    line-height: 18px;
    color: #0076c8;
    z-index: 100;
}

.people .hlast {
    position: absolute;
    left: 60px;
    top: 420px;
    color: #fff;
    z-index: 100;
}

.people .plast {
    position: absolute;
    left: 60px;
    top: 510px;
    color: #fff;
    z-index: 100;
}

.people .morelast {
    position: absolute;
    left: 60px;
    bottom: 100px;
    color: #fff;
    z-index: 100;
    width: 103px;
    height: 31px;
    border: 1px solid #fff;
    background-color: transparent;
}

/* 尾部模块 */
footer {
    height: 333px;
    background-color: #404143;
}

footer dl {
    float: left;
    margin: 0 60px;
}

footer dl dt {
    /* float: left; */
    padding-top: 55px;
    font-size: 20px;
    color: #fff;
}

footer dl dd {
    margin: 10px 0;
    color: #999;
}

.ewm_f {
    position: relative;
}

footer .ewm_01 {
    position: absolute;
    top: 57px;
    width: 118px;
    height: 118px;
    /* position: relative; */
    line-height: 45px;
    text-align: center;

}

footer .ewm_02 {
    /* display: inline-block; */
    position: absolute;
    top: 57px;
    left: 164px;
    width: 118px;
    height: 118px;
    position: relative;
    line-height: 45px;
    text-align: center;

}

footer .ewm_01 img {
    width: 118px;
    height: 118px;
}

footer .ewm_0 img {
    width: 118px;
    height: 118px;
}

4. js文件

var search = document.querySelector('.search_form');

search.onfocus = function() {
    if(this.value === 'search..') {
        this.value = '';
        this.style.color = '#333';
    }
}
search.onblur = function() {
    if(this.value === '') {
        this.value = 'search..';
    }
}