HTML静态网页作业-篮球网页
生活随笔
收集整理的這篇文章主要介紹了
HTML静态网页作业-篮球网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?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=""> 123456@mail.com</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">cba2.0@cbaleague.com</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">cbabd@cbaleague.com</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">digital@cbaleague.com</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">Dream@cbaleague.com</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個網頁?
?
總結
以上是生活随笔為你收集整理的HTML静态网页作业-篮球网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构-线性相关代码
- 下一篇： axios post body参数_vu