html期末大作业Bootstrap医疗器械公司响应式网站，兼容手机端
项目截图:
部分代码展示
<!DOCTYPE html>
<html >
<head>
<title>某某医疗器械有限公司</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/glide.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/online.css"rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/jquery.glide.js" type="text/javascript"></script>
</head>
<body>
<header>
<div class="topBox">
<div class="borderBottom">
<div class="container">
<div class="welcomeBox">欢迎光临本网站</div>
<div class="languageBox">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 logo"><a href="index.html"><img src="images/logo.png" alt="MojoCube 官方" /></a></div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="address"></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="tel">
<img src="images/tel.gif" alt="" /><br />400-8888-8888
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.html"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">网站首页</a></li>
<li class="dropdown">
<a href="about.html" class="dropdown-toggle" data-toggle="dropdown">关于我们</a><a href="#" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a class='' href='about.html'>公司简介</a></li>
<li><a class='' href='contact.html'>联系我们</a></li>
</ul>
</li>
<li class="dropdown">
<a href="product.html" class="dropdown-toggle" data-toggle="dropdown">产品中心</a><a href="#" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a class='' href='product.html'>产品分类1</a><span>+</span>
<ul>
<li><a class='' href='product.html'>产品子分类1</a><ul></ul></li>
<li><a class='' href='product.html'>产品子分类2</a><ul></ul></li>
</ul>
</li>
<li><a class='' href='product.html'>产品分类2</a></li>
<li><a class='' href='product.html'>产品分类3</a></li>
<li><a class='' href='product.html'>产品分类4</a></li>
<li><a class='' href='product.html'>产品分类5</a></li>
</ul>
</li>
<li><a href="album.html">案例中心</a></li>
<li><a href="comment.html">在线留言</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Banner -->
<div class="banner homeBanner">
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item"><a target="_blank" title="1" href="" style="background-image:url(images/1.jpg)"><img src="images/banner-1.png" alt="MojoCube 官方" /></a></li>
<li class="slider__item"><a target="_blank" title="2" href="" style="background-image:url(images/1.jpg)"><img src="images/banner-1.png" alt="MojoCube 官方" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var glide = $('.slider').glide();
</script>
<!-- 内容 -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="aboutBox">
<a href="about.html" class="aboutMore">MORE +</a>
<div class="aboutTitle">
<h1>公司简介</h1>
<span>ABOUT US</span></div>
<section>
官方（MojoCube）基于网络，专注于网页设计和网站程序开发。已经开发一系列网站管理程序，如McCMS内容管理系统、McCart购物车系统。系统界面清新， 兼容性强，可扩展性十分强大，可以开发出目前所见的绝大部分网站，适合企业建站自用或者开发者二次开发。目前已支持Access和Mssql数据库，最新版的内容管理系统和购物车系统均支持响应式和HTML5。 我们是一支年轻富有活力的团队，拥有多年网络开发经验。我们了解当前最新最流行的开发模式，对主流的网页设计、系统设计有较深入的了解。 我们是创业团队，热衷帮助中小企业实现网络信息化。相对于同行大型软件公司，我们经营成本相对较低，所以我们拥有较高的性价比优势，更适合中小企业。 官方产品包括内容管理系统（McCMS）、购物车系统（McCart）、办公管理系统等等，我们并不是软件的代理商或者二次开发商，我们具备完整的开发能力。
</section>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="searchGroup">
<div class="searchBox">
<div class="title">产品查询</div>
<input type="text" id="queryTxt" name="queryTxt" placeholder="请输入关键字" onClick="this.value = ''" />
<a href="javascript:;" type="button">搜 索</a>
</div>
<div class="serviceBtn">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=396288955&site=qq&menu=yes"> <img src="images/qq.jpg" /><br />客服QQ</a>
<a target="_blank" href="http://weibo.com/"> <img src="images/wb.jpg" /><br />关注微博</a>
<a href="javascript:showWechatQR();"> <img src="images/wx.jpg" /><br />关注微信</a>
</div>
</div>
</div>
</div>
</div>
<!-- 关注微信模态框（Modal）start -->
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border: 0px;">
<div class="modal-header">请扫描二维码关注我们</div>
<div class="modal-body" style="text-align: center">
<img src="images/qrcode.jpg" alt="" />
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showWechatQR() {
$("#wechatModal").modal("show")
}
</script>
<!-- 关注微信模态框（Modal）end -->
<div style="background:#f9f9f9; padding-top:30px; margin-top:30px; padding-bottom:10px">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="productBox">
<div class="titleBar">
<h1>最新产品</h1>
<span></span>
<a href="#">综合检测机</a>
<a href="#">无影灯</a>
<a href="#">手术床</a> <a class="rightMore" href="product.html">>></a>
</div>
<div class="list">
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-001" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/1.jpg" alt="PRO-001" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-001">
PRO-001
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-002" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/2.jpg" alt="PRO-002" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-002">
PRO-002
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-003" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/3.jpg" alt="PRO-003" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-003">
PRO-003
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-004" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/4.jpg" alt="PRO-004" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-004">
PRO-004
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-005" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/5.jpg" alt="PRO-005" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-005">
PRO-005
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-mm-6 productImg">
<a title="PRO-006" href='product_detail.html'>
<span class="imgLink-hover"><span class="hover-link"></span></span>
<img src="images/products/6.jpg" alt="PRO-006" />
</a>
<a class="productTitle" href="product_detail.html" title="PRO-006">
PRO-006
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="indexNavigationGroup" id="classification">
<div class="navigationBox">
<div class="titleBar">
<h1>导航栏目</h1>
<span></span>
</div>
<div class="list">
<ul id="firstpane">
<li><a class='' href='product.html'>产品分类1</a><span>+</span>
<ul>
<li><a class='' href='product.html'>产品子分类1</a><ul></ul></li>
<li><a class='' href='product.html'>产品子分类2</a><ul></ul></li>
</ul>
</li>
<li><a class='' href='product.html'>产品分类2</a></li>
<li><a class='' href='product.html'>产品分类3</a></li>
<li><a class='' href='product.html'>产品分类4</a></li>
<li><a class='' href='product.html'>产品分类5</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="newsBox">
<div class="titleBar">
<h1>新闻中心</h1>
<span></span> <a class="rightMore" href="#">>></a>
</div>
<ul class="indexNewsList">
<li class="col-xs-12 col-sm-6 col-md-6">
<a href="#">
<div class="img" style="background-image: url(images/news/1.png)"></div>
<div class="txt">
<span class="title">
网页前端将在网站中占据很大的空间和位置
</span>
<span class="time">[ 2017-01-01 ]</span>
<p>
在全球范围内，目前对于大数据都有一个共识，即大数据技术的战略意义不在于掌握庞大的数据信息，而在于对这些含有意义的数据进行专业化处理。换言之，如果把大数据比作一种产业，那么这种产业实现盈利的关键，在于提高对数据的“加工能力”，通过“加工”实现数据的“增值”...
</p>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-6">
<a href="#">
<div class="img" style="background-image: url(images/news/2.png)"></div>
<div class="txt">
<span class="title">
微软欲主动送Windows Phone 7设备给黑客破解
</span>
<span class="time">[ 2017-01-01 ]</span>
<p>
在全球范围内，目前对于大数据都有一个共识，即大数据技术的战略意义不在于掌握庞大的数据信息，而在于对这些含有意义的数据进行专业化处理。换言之，如果把大数据比作一种产业，那么这种产业实现盈利的关键，在于提高对数据的“加工能力”，通过“加工”实现数据的“增值”...
</p>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-6">
<a href="#">
<div class="img" style="background-image: url(images/news/3.png)"></div>
<div class="txt">
<span class="title">
友盟Android应用数据报告显示国内优质应用非常稀缺
</span>
<span class="time">[ 2017-01-01 ]</span>
<p>
在全球范围内，目前对于大数据都有一个共识，即大数据技术的战略意义不在于掌握庞大的数据信息，而在于对这些含有意义的数据进行专业化处理。换言之，如果把大数据比作一种产业，那么这种产业实现盈利的关键，在于提高对数据的“加工能力”，通过“加工”实现数据的“增值”...
</p>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-6">
<a href="#">
<div class="img" style="background-image: url(images/news/4.png)"></div>
<div class="txt">
<span class="title">
万亿分期市场或崩盘？消费金融模式及风险深度报告
</span>
<span class="time">[ 2017-01-01 ]</span>
<p>
在全球范围内，目前对于大数据都有一个共识，即大数据技术的战略意义不在于掌握庞大的数据信息，而在于对这些含有意义的数据进行专业化处理。换言之，如果把大数据比作一种产业，那么这种产业实现盈利的关键，在于提高对数据的“加工能力”，通过“加工”实现数据的“增值”...
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="contactBox" style="padding:10px;">
<p>联系人：张经理</p>
<p>手机：13800138000</p>
<p>电话：020-88668888</p>
<p>邮箱：xxxxcube@qq.com</p>
<p>地址： XX省XX市XX区天XX路88号</p>
</div>
</div>
</div>
</div>
<div style="background:#f9f9f9; padding-top:20px; margin-top:20px; padding-bottom:20px;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="linkBox">
<div class="titleBar">
<h1>友情链接</h1>
<span></span>
<ul class="linkList">
<li><a target="_blank" href="">官方官网</a></li>
<li><a target="_blank" href="#">淘宝店</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="copyright">
<p>
<a href="about.html">公司简介</a> |
<a href="#">新闻中心</a> |
<a href="product.html">产品中心</a> |
<a href="contact.html">联系我们</a>
</p>
</div>
</footer>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
function mShare() {
$("#mShareBox").toggle();
$("#serviceBox").hide();
}
if ($(".banner .slider__wrapper li").length == 0) {
$(".banner").addClass("emptyBanner");
}
function showService() {
$("#mShareBox").hide();
$("#serviceBox").toggle();
}
</script>
</body>
</html>
扫一扫
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
