HTML期末作业-篮球网页（HTML+CSS+Bootstarp）
部分源代码
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>联系</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="top-bar gray-3d-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="top-contact-info">
<span class="work-sans fz-13 lh-50"><img src="img/phone.png" alt=""> + 124 45 78 678 </span>
<span class="work-sans fz-13 lh-50"><img src="img/mail.png" alt=""> [email protected]</span>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 social-login">
<div class="top-social display-ib">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="top-login display-ib lh-50">
<img src="img/login.png" alt="">
<span class="white">
<a href="#">登录</a> /
<a href="#"> 注册</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav-area">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="man-nav">
<nav class="navbar navbar-default no-margin">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse no-margin no-padding">
<div class="col-md-7 col-sm-7">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a class="" href="gallery.html">NBA </a></li>
<li><a class="" href="match-fixtures.html">比赛信息</a></li>
</ul>
</div>
<div class="col-md-5 col-sm-5">
<ul class="nav navbar-nav pl-50">
<li class="dropdown">
<a href="blog.html" class="dropdown-toggle">球员<span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="404.html" class="dropdown-toggle">球队数据 <span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="shop.html" class="dropdown-toggle">周边商城 <span class="caret"></span></a>
</li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="page-title contact-title">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center p-static">
<div class="page-heading">
<h2 class="white text-uppercase fz-36 ls-2">保持联系</h2>
<h6 class="work-sans fz-15 white mt-20">首页 <span class="mlr-10"> / </span> 联系 </h6>
</div>
</div>
</div>
</div>
</div>
<section class="mt-100 pb-150 contact-section">
<div class="container">
<div class="row mt-20">
<div class="col-md-8 col-sm-6 col-xs-6 mt-30">
<h1 class="text-uppercase ls-3 fz-38"> <span class="yellow"> 留言</span></h1>
<form action="#" class="contact mt-30">
<div class="row">
<div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder="姓名 *" name="contact-name" id="input_name" required=""></div>
<div class="col-md-6 mt-20"><input type="email" class="form-control" placeholder=" 邮箱 *" name="contact-email" id="input_email" required=""></div>
</div>
<div class="row">
<div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder="电话" name="contact-phone" id="input_phone"></div>
<div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder="学科" name="contact-subject" id="input_subject"></div>
</div>
<textarea rows="10" class="form-control mt-20" placeholder="信息" name="contact-message" id="input_message"></textarea>
<input type="submit" value="发送" id="btn_submit" class="contact-btn btn-yellow mt-35 text-uppercase" />
<div class="alert-msg" id="alert-msg"></div>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 mt-30">
<div class="contact-cat category">
<h4 class="work-sans fz-20 text-semi-bold text-uppercase gray-de text-center bb">即将进行的比赛</h4>
<div class="category-inner mt-25">
<div class="upcomig-match clearfix">
<img src="img/um-1.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
<div class="pull-left">
<h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black"> 篮球架起友谊桥梁!
</a></h6>
<span class="work-sans text-medium fz-12 yellow text-uppercase"> 2015年12月15日</span>
</div>
</div>
<div class="upcomig-match mt-25 clearfix">
<img src="img/um-2.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
<div class="pull-left">
<h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black"> 篮球架起友谊桥梁!
</a></h6>
<span class="work-sans text-medium fz-12 yellow text-uppercase"> 2016年1月20日</span>
</div>
</div>
<div class="upcomig-match mt-25 clearfix">
<img src="img/um-3.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
<div class="pull-left">
<h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black"> 篮球架起友谊桥梁!
</a></h6>
<span class="work-sans text-medium fz-12 yellow text-uppercase"> 2016年2月26日</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="upper-footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase">About Us</h5>
<p class="mt-45 gray-999 fz-13">中篮联（北京）体育有限公司是2016年10月注册成立的大型赛事运营管理公司，并已获得中国篮协长期授权，对中国男子篮球职业联赛（CBA）独立进行竞赛、商务运营。CBA联赛为国内最高水平男子篮球职业联赛，历经20余年发展后，目前已成为拥有国际影响力的国内领先体育赛事品牌。中篮联（北京）体育有限公司是2016年10月注册成立的大型赛事运营管理公司，并已获得中国篮协长期授权，对中国男子篮球职业联赛（CBA）独立进行竞赛、商务运营。CBA联赛为国内最高水平男子篮球职业联赛，历经20余年发展后，目前已成为拥有国际影响力的国内领先体育赛事品牌。
</p>
<div class="f-social mt-35">
<ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-1 col-sm-2">
<h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase">链接</h5>
<ul class="mt-45 iist-unstyled links">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">投资组合</a></li>
<li><a href="#">照片</a></li>
<li><a href="#"> 联系</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-4">
<h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase">欢迎关注CBA联赛官方社交媒体</h5>
<div class="f-contact-info clearfix mt-45">
<img src="img/address.png" alt="" class="pull-left">
<span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">[email protected]</span>
</div>
<div class="f-contact-info clearfix mt-25">
<img src="img/phone.png" alt="" class="pull-left">
<span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">[email protected]</span>
</div>
<div class="f-contact-info clearfix mt-25">
<img src="img/envelope.png" alt="" class="pull-left">
<span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">[email protected]</span>
</div>
<div class="f-contact-info clearfix mt-25">
<img src="img/fax.png" alt="" class="pull-left">
<span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">[email protected]</span>
</div>
</div>
<div class="col-md-4 col-sm-6">
<h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase">更多资讯</h5>
<div class="instagram-links mt-45">
<a href="#"><img src="img/f1.jpg" alt=""></a>
<a href="#"><img src="img/f2.jpg" alt=""></a>
<a href="#"><img src="img/f3.jpg" alt=""></a>
<a href="#"><img src="img/f4.jpg" alt=""></a>
<a href="#"><img src="img/f5.jpg" alt=""></a>
<a href="#"><img src="img/f6.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<div class="lower-footer">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3 col-sm-6">
<h4 class="white text-uppercase lh-90">今日 <span class="yellow">赛事</span></h4>
</div>
<div class="col-sm-6 last-match">
<span class="work-sans fz-14 text-bold white text-uppercase lh-90"><img src="img/f-team1.png" alt=""> AUTE</span>
<h4 class="lh-90 yellow text-bold display-ib">1:2</h4>
<span class="work-sans fz-14 text-bold white text-uppercase lh-90"><img src="img/f-team2.png" alt=""> Dolor</span>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="work-sans fz-16 text-medium text-uppercase white lh-90 display-ib">加入 <span class="yellow"> 我们</span></h4>
<div class="input-group">
<input type="email" class="form-control" placeholder="Email">
<div class="input-group-addon"><a class="work-sans text-semi-bold fz-11 white text-uppercase" href="#">发送</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="copy-rights">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="raleway text-semi-bold fz-12 gray-ccc ls-1">Copyrights© 2020 篮球资讯网站</p>
</div>
</div>
</div>
</div>
</footer>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<!-- Library - Google Map API -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCn3Z6i1AYolP3Y2SGis5qhbhRwmxxo1wU"></script>
<script src="js/main.js"></script>
</body>
</html>部分网页截图共9个网页
