Web前端期末大作业--绿色自适应医疗健康医院网页设计（HTML+CSS+JavaScript+）实现_web关于医疗网站

        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <a class="navbar-brand" href="#">Hospital</a>
        </div>
        <!-- 导航-->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html" class="active">首页 <span class="sr-only"></span></a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="news.html">医疗动态</a></li>
                <li><a href="resource.html">医疗资源</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--幻灯片-->
<div id="hwslider" class="hwslider">
    <ul>
        <li><a><img src="static/images/banner-1.jpg" /></a></li>
        <li><a><img src="static/images/banner-2.jpg" /></a></li>
    </ul>
</div>
<!--服务-->
<div class="service">
    <div class="container p50">
        <div class="row">
            <div class="col-md-12 title">
                <h2>我们的服务</h2>
                <div class="line"></div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-heartbeat service-icon-effect"></span>
                    </div>
                    <h3><a href="#">心脏监测</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-stethoscope service-icon-effect"></span>
                    </div>
                    <h3><a href="#">康复治疗</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-h-square service-icon-effect"></span>
                    </div>
                    <h3><a href="#">医疗保健</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-medkit service-icon-effect"></span>
                    </div>
                    <h3><a href="#">背景调查</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-user-md service-icon-effect"></span>
                    </div>
                    <h3><a href="#">特殊医生</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="ser-item">
                    <div class="service-icon">
                        <span class="fa fa-ambulance service-icon-effect"></span>
                    </div>
                    <h3><a href="#">24小时服务</a></h3>
                    <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--选择我们 -->
<div class="choose p50">
    <div class="container">
        <div class="row">
            <div class="col-md-12 title">
                <h2>为什么选择我们</h2>
                <div class="line"></div>
            </div>
            <div class="col-md-5 col-sm-12 col-xs-12 p30">
                <img src="static/images/choose-us-img1.jpg" />
            </div>
            <div class="col-md-7 col-sm-12 col-xs-12 p30 c-show">
                <div class="row">
                    <div class="col-md-2 col-sm-2">
                        <a href="#" class="media-icon">
            <span class="fa fa-hospital-o"></span>
          </a>
                    </div>
                    <div class="col-md-10 col-sm-10 clearfix c-w">
                        <h3 class="">先进的医疗设备</h3>
                        <p>先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-sm-2 ">
                        <a href="#" class="media-icon">
            <span class="fa fa-user-md"></span>
          </a>
                    </div>
                    <div class="col-md-10 col-sm-10 clearfix c-w">
                        <h3 class="">专业的医疗团队</h3>
                        <p>专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-sm-2">
                        <a href="#" class="media-icon">
            <span class="fa fa-ambulance"></span>
          </a>
                    </div>
                    <div class="col-md-10 col-sm-10 clearfix c-w">
                        <h3 class="">紧急支援</h3>
                        <p>紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--数据-->

<!--jq和bootstrapjs 文件 -->
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<!--幻灯片JS 文件 -->
<script type="text/javascript" src="static/js/jquery.hwslider.min.js"></script>
<script>
    $(function() {
        $("#hwslider").hwSlider({
            height: 220,
            autoPlay: true,
            arrShow: true,
            dotShow: true,
            touch: false,
        });
    });
</script>

```

CSS样式：

/*小标题*/

.line {
    border-bottom: 2px solid #02b2b5;
    background: none repeat scroll 0 0 transparent;
    height: 1px;
    margin: 0 auto 45px;
    padding: 5px;
    position: relative;
    width: 120px;
}

.line:after,
.line::before {
    border: medium solid transparent;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
}

.line:after {
    border-top-color: #02b2b5;
    border-width: 8px;
    margin-left: -8px;
}

.title {
    text-align: center;
}

/*服务*/

.ser-item {
    text-align: center;
    margin-bottom: 30px;
    padding: 0px 20px;
}

.ser-item p {
    color: #737373;
}

.single-service {
    float: left;
    margin-bottom: 30px;
    padding: 0px 10px;
    display: inline;
    width: 100%;
    text-align: center;
}

.service-icon .service-icon-effect {
    box-shadow: 0 0 0 4px #02b2b5;
}

.service-icon-effect {
    display: inline-block;
    font-size: 0px;
    margin: 15px 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #02b2b5;
}

.service-icon-effect:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}

/*选择*/

.choose {
    background: #f7f7f7;
}

.choose .media {
    margin-bottom: 20px;
    padding: 0px 20px;
}

.choose .fa {
    color: #FFFFFF;
}

.choose h3 {
    color: #02b2b5;
    margin-bottom: 20px;
}

.media-icon {
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    color: #fff;
    display: inline-block;
    font-size: 25px;
    height: 68px;
    line-height: 55px;
    margin-right: 15px;
    padding: 5px 10px;
    text-align: center;
    width: 68px;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

备注：部分资源来自网络收集整理、侵权立删。

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

前端面试题汇总

JavaScript

前端资料汇总