编程知识 cdmana.com

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=""> [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&copy; 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个网页 

 

 

 

 

 

版权声明
本文为[osc_9na1lmr9]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4256554/blog/4836640

Scroll to Top