常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的绿色自适应医疗健康医院网页设计制作,画面精明,非常适合初学者学习使用。
视频演示: 大学生Web前端期末大作业–美女健身教练瑜伽馆网页设计.mp4
网页实现截图:
网站首页 :
关于我们:
医疗动态:
医疗资源:
联系我们:
主要源码结构:
一共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>
### 结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)
,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)