Web前端期末大作业--马尔代夫旅游网页设计（HTML+CSS+JavaScript+）实现_网页设计一日游马尔代夫代码

于 2024-04-29 21:02:28 发布
阅读量567 收藏 6
点赞数 3
分类专栏： 程序员 文章标签： 前端 课程设计 旅游
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84438488/article/details/138325473
版权

一共7个静态页面

主要源码展示：

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <!--头部-->
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- 移动端导航图标 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <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>
</body>

</html>

CSS样式：

@charset "utf-8";
body{background:#e1dac8;color:#E1DAC8;}

body,h1,h2,h3,h4,h5,h6, ul, dl, dd, dt, ol, li, p{font-family:"微软雅黑"," 黑体","宋体";  margin:0;padding:0;-webkit-text-size-adjust: none}
.wrapper{width:100%;}
a{color:#715B1D;}
.header{background:url(../img/header_bg.png) no-repeat center center; height:150px;}
.logo-right{margin-top:30px;height:15px;}
.logo{padding-top:15px;}
.search{padding-top:15px;}
.search .form-control{background:#463511; border:1px solid #2D2408; color:#968869;}
.search .btn-default{background:#2D2408; border:1px solid #2D2408; color:#968869;}
.navbar-form{ float:right;padding-right:5px;}
.search i{height:34px; width:34px; display:block; float:right;margin-top:8px; background-size: 34px 34px; border-radius:3px; margin-right:5px;}
.wx{background:url(../img/wx.png) no-repeat 0px 0px;}
.taobao{background:url(../img/taobao.png) no-repeat 0px 0px;}
.sina{background:url(../img/sina.png) no-repeat 0px 0px;}
.search .btn{margin-left:-8px;}
.navbar{ margin-bottom:0px;}
.navbar-header{ padding-left:15px;}
.navbar-default{background:rgba(0,0,0,.6); border:0px;position:absolute;top:100px; z-index:12; width:100%;}
.navbar-default .navbar-brand{color:#fff;}
.nav>li>a {font-size:1.4em;}
.navbar-default .navbar-nav>li>a{color:#fff; font-size:1.2em;}
.navbar-default .navbar-nav>li>a:hover{color:#eee; font-size:1.2em;}
.navbar-default .navbar-brand:hover{color: #eee;}
.navbar-brand {font-size:1.2em;}

.carousel-caption-con{position:absolute;left:0px;right:0px;padding-bottom:0px; height:120px; bottom:0px; padding-top:0px; color:#fff; z-index:11; background:url(../img/bg.png);}
.banner-title{margin-top:15px; font-size:1.5em; font-weight:bold; padding-bottom:15px;}

.products_title{border:0px;position:absolute;z-index:9; width:auto;top:15px; color:#F2E9D3; font-size:1.2em; background:url(../img/bg.png)}
.main{padding-top:30px;}
.products div{padding:15px 20px;}

.news{padding-top:30px; padding-left:5px;}
.index_news_list{margin-bottom:20px;}
.index_news_list h4{margin-top:0px; padding-left:15px; }
.index_news_list h4 a{color:#715B1D;}

.service{background:url(../img/link_bg.png) center center;min-height:60px;}
.friendlink div{padding:15px 15px;}

.link_logo{ background:url(../img/link_logo.png) no-repeat 0px center; height:60px;}
.link_tel{ background:url(../img/link_tel.png) 0px center no-repeat;  height:60px;}
.fx{height:60px;}
.bshare-custom{padding-top:20px; float:right;}

.mkeFocus {height: 394px; width: 364px;margin:0 auto; background:#fff; }
.mkeUl { margin: 0px auto; height: 394px; width: 364px; overflow: hidden; position: relative; }
.mkeUl ul { position: absolute; left: 0px; top: 0px; height: 394px; list-style:none; }
.mkeUl ul li { float: left; text-align: center; font: 1.2em "微软雅黑"; }
.mkeUl ul li img {margin-bottom: 18px; height:265px; }
.mkeNum { background: #FFF url(../img/banNum.jpg); height: 35px; width: 37px; position: absolute; z-index: 1; left: 13px; bottom: 4px; font: 1.2em Arial; }
.mke_ns1 { line-height: 16px; text-align: center; height: 16px; width: 16px; position: absolute; left: 0px; top: 0px; }
.mke_ns2 { line-height: 16px; color: #9FA0A0; text-align: center; display: block; height: 16px; width: 16px; position: absolute; right: 0px; bottom: 0px; }
.mkeLbtn { background: url(../img/kelBtn.png) no-repeat; height: 45px; width: 36px; position: absolute; left: 0px; top: 120px; cursor: pointer; z-index: 10; }
.mkeRbtn { position: absolute; top: 120px; right: 0px; background: url(../img/kerBtn.png) no-repeat; height: 45px; width: 36px; cursor: pointer; z-index: 10; }
.mkeUl ul li .bg{display:block; position:absolute; top:0px;width:364px; height:45px ;opacity:0.4;background:#000;}
.mkeUl ul li .text{display:block; position:absolute; color:#e2ddc9; top:0px;width:364px; text-align:left; padding-left:15px; height:45px ;line-height:45px;}
.mkeUl ul li p {margin-top:35px;}
.mkeUl ul li .yj{color:#735b1d;}
.mkeUl ul li .xj{color:#a400b7; margin-top:5px;}
.tejia{position:absolute;top:220px; height:86px; left:auto; width:364px; background:url(../img/tj.png) no-repeat center center;}

.minute{padding:15px 0px 10px 20px; color:#9B8039;}
.minute a{color:#9B8039;}
.index_news_list h4 a:hover{color:#9c7f39;}
.index_news_list h4 :visited{color:#735b1f;text-decoration:none;}
.copyright{ padding-bottom:15px;color:#715B1D;font-size:1.0em;}

/*content*/
.breadcrumb,.breadcrumb a{background:none; padding-top:30px; color:#9B7F39}
.main h2{color:#715B1D;}
.content-main{padding:15px 0px 30px 0px; line-height:30px;font-size:1.1em;color:#715B1D;}
.content-list{ list-style:none;}
.content-list li{ border-bottom:1px dotted #d0bb8a; height:40px; line-height:40px;}
.content-list li a{font-size:1.1em;color:#715B1D;}
.list-title{height:50px; line-height:50px; background:#DBCBA5;padding-left:15px;font-size:1.6em;color:#715B1D}

.summary{margin-top:15px;margin-bottom:15px;background:#dbcba5; padding-top:15px; padding-bottom:15px;}
.summary .content h4 a{color:#715B1D}
.summary .content p{padding-top:15px; color:#9B8039;}


### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)
2401_84438488
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值