HTML期末作业-中国足球网页,HTML+css+JavaScript,页面!
部分网页源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国足球协会官方网站</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="top">
<h1><img src="./images/logo.png" alt=""></h1>
<div class="topRight">
<div class="topRight-top">
<a href="">仲裁入口</a>
<a href="">媒体专区</a>
<a href="">球迷专区</a>
<a href="">会员协会</a>
<a href="">EN</a>
</div>
<div class="topRight-buttom">
<input type="text" placeholder="请输入搜索词汇" id="keywordInput" name="keyword" class="top-search-input">
<div class="btn-search submit" id="searchSubmit"></div>
</div>
</div>
</div>
<div class="buttom"></div>
</div>
<div class="nav">
<ul>
<li style="margin-left: 94px;"><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>
<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="lbt">
<div id="banner"></div>
<script src="js/banner.js"></script>
<script>
createBannerArea(document.getElementById("banner"), [{
imgUrl: "images/lbt1.jpg",
}, {
imgUrl: "images/lbt2.jpg",
}, {
imgUrl: "images/lbt3.jpg",
},{
imgUrl: "images/lbt4.jpg",
}]);
</script>
</div>
<div class="content">
<div class="index-new">
<div class="new">
<div class="new-top-line">
<h2>新闻动态</h2>
<a href="">更多>></a>
</div>
<div class="new-content">
<ul>
<li><a href="">2020女超举行赛前发布会 第二阶段比赛即将拉开大幕</a></li>
<li><a href="">中甲联赛第四轮综述——两支升班马暂居赛区榜首</a></li>
<li><a href="">2019-2020五超联赛复赛动员会在香河赛区举行</a></li>
<li><a href="">时隔295天,2019-2020赛季五超联赛25日复赛</a></li>
<li><a href="">2020中甲联赛第三轮综述——东道主球队表现亮眼</a></li>
<li><a href="">第一阶段比赛顺利结束 资源升级助推女超“耀·绽放”</a></li>
</ul>
</div>
</div>
<div class="ann">
<div class="ann-top-line">
<h2>通知公告</h2>
<a href="">更多>></a>
</div>
<div class="ann-content">
<ul>
<li><a href="">燕京啤酒2020中国足球协会杯(第二至第五轮)公用信号制作合作伙伴征集公告 </a></li>
<li><a href="">关于2020年亚足联-中国足协职业级教练员培训班录取通知</a></li>
<li><a href="">关于2019年亚足联-中国足协职业级教练员培训班考核阶段事宜的通知</a></li>
<li><a href="">关于对武汉车都江大女子足球队及有关人员违规违纪的处罚决定</a></li>
<li><a href="">关于对上海农商银行女子足球队及有关人员违规违纪的处罚决定</a></li>
<li><a href="">2020中国足球协会甲级联赛信号制作竞争性谈判结果公告</a></li>
</ul>
</div>
</div>
</div>
<article class="mt20">
<ul class="plate-list clear">
<li>
<a href="" class='big'>
<img src="images/plate-img01.jpg" class='imgbig' alt="">
<h2>中国之队</h2>
</a>
<a href="">
<img src="images/plate-img02.jpg" class='imgbig' alt="">
<h2>足协杯</h2>
</a>
</li>
<li>
<a href="/caogen/index.html">
<img src="images/plate-img0330.jpg" class='imgbig' alt="">
<h2>全民足球</h2>
</a>
<a href="/qx/index.html" class='big'>
<img src="images/plate-img04.jpg" class='imgbig' alt="">
<h2>青少年</h2>
</a>
</li>
<li>
<!-- <a href="/gzzg/index.html" class='big'>-->
<a href="http://www.csl-china.com/" class='big'>
<img src="images/zclssytp3.jpg" class='imgbig' alt="" style="width: 100%;">
<h2>中超联赛</h2>
</a>
<a href="/gyzx/index.html">
<img src="images/plate-img0808.png" class='imgbig' alt="" width=369 height=281 >
<h2>关于足协</h2>
</a>
</li>
</ul>
</article>
<article class='index-link'>
<h2>相关链接</h2>
<div class="index-link-list">
<div class="index-link-scroll">
<ul class='list' style="width: 983px;">
<li><a href="https://www.fifa.com/" target="_blank"><img src="images/syfifa.png" alt="" ></a></li>
<li><a href="http://www.the-afc.com/" target="_blank"><img src="images/icon11-1.png" alt="" ></a></li>
<li><a href="http://eaff.com" target="_blank"><img src="images/dyzl_logo.png" alt="" style=" width: 70px;" ></a></li>
<li><a href="http://www.sport.org.cn/" target="_blank"><img src="images/icon12-112.png" alt="" ></a></li>
</ul>
</div>
<!--<div class="index-link-more">
<span class="plus"></span><br>More<br><span class="minus"></span>
</div>-->
</div>
</article>
<div class="partner">
<div class="partner_title tac">
<h2>赛事赞助商及合作机构</h2>
</div>
<div class="partner_logo_tab tac">
<div class="partner_logo_scroll">
<ul class="list" style="width: 1131px;">
<li id="li1"><img src="./images/index-partner_01.png" alt="中国之队"></li>
<li id="li2"><img src="./images/index-partner_02.png" alt="中超联赛"></li>
<li id="li3"><img src="./images/index-partner_03.png" alt="足协杯"></li>
<li id="li4"><img src="./images/index-partner_04.png" alt="超级杯"></li>
<li id="li5"><img src="./images/index-partner_05.png" alt="中甲联赛"></li>
<li id="li6"><img src="./images/index-partner_06.png" alt="中乙联赛"></li>
<li id="li7"><img src="./images/index-partner_07.png" alt="中冠联赛"></li>
<li id="li8"><img src="./images/index-partner_08.png" alt="女子赛事"></li>
<li id="li9"><img src="./images/index-partner_11111.jpg" alt="青超联赛"></li>
<li id="li10"><img src="./images/index-partner_12.jpg" alt="五人制足球"></li>
<li id="li11"><img src="./images/index-partner_13.jpg" alt="沙滩足球"></li>
<li id="li12"><img src="./images/index-partner_09.png" alt="我爱足球"></li>
<li id="li13"><img src="./images/index-partner_10.png" alt="其他合作机构"></li>
</ul>
</div>
</div>
<div class="block">
<!-- 中国对 -->
<div class='partner_list partner_block' id="d1">
<img src="images/group_china.png" alt="">
</div>
<!-- 中超 -->
<div class='partner_list' id="d2">
<img src="images/chao_sai.png" alt="">
</div>
<!-- 足协杯 -->
<div class='partner_list' id="d3">
<img src="images/zuxiebei.png" alt="">
</div>
<!-- 超级杯 -->
<div class="partner_list" id="d4">
<img src="images/super_cup.png" alt="">
</div>
<!-- 中甲 -->
<div class='partner_list' id="d5">
<img src="images/zhongjialiansai.png" alt="">
</div>
<!-- 中乙 -->
<div class='partner_list' id="d6">
<dl class='zanzhushang zz-big mt90'>
</dl>
<dl class='zanzhushang'>
<img src="images/zhongyiliansai.png" alt="">
</div>
<!-- 中冠 -->
<div class="partner_list" id="d7">
<img src="images/zhongguanliansai.png" alt="">
</div>
<!-- 女子赛事 -->
<div class='partner_list' id="d8">
<img src="images/womancon.png" alt="">
</div>
<!-- 青少年 -->
<!-- 超级杯 -->
<div class="partner_list" id="d9">
<img src="images/9.png" alt="">
</div>
<!-- 中甲 -->
<div class='partner_list' id="d10">
<img src="images/10.png" alt="">
</div>
<!-- 中乙 -->
<div class='partner_list' id="d11">
<dl class='zanzhushang zz-big mt90'>
</dl>
<dl class='zanzhushang'>
<img src="images/11.png" alt="">
</div>
<!-- 中冠 -->
<div class="partner_list" id="d12">
<img src="images/12.png" alt="">
</div>
<!-- 女子赛事 -->
<div class='partner_list' id="d13">
<img src="images/13.png" alt="">
</div>
<!-- 青少年 -->
</div>
<div class="foot_bottom ">
<div class="foot_bottom_b">
<div class="foot_bottom_list">
<h2 class="foot_bottom_h2"><a href="">新闻</a></h2>
<h2 class="foot_bottom_h2"><a href="">公告</a></h2>
<h2 class="foot_bottom_h2"><a href="">教练员</a></h2>
<h2 class="foot_bottom_h2"><a href="">裁判员</a></h2>
<h2 class="foot_bottom_h2"><a href="">青少年</a></h2>
<h2 class="foot_bottom_h2"><a href="">女足</a></h2>
</div>
<div class="foot_bottom_list">
<h2 class="foot_bottom_h2"><a>队伍</a></h2>
<dl>
<dt><a href="">中国之队</a></dt>
<dd><a href="">中国国家男子足球队</a></dd>
<dd style="color: #999;font-size: 12px;">中国国家U-23男子足球队</dd>
<dd style="color: #999;font-size: 12px;">中国国家U-21男子足球队</dd>
<dd><a href="">中国国家女子足球队</a></dd>
<dd style="color: #999;font-size: 12px;">中国国家青少年足球队</dd>
</dl>
<dl>
<dt><a>其他队伍</a></dt>
<dd style="color: #999;font-size: 12px;">中国国家男子室内五人制足球队</dd>
<dd style="color: #999;font-size: 12px;">中国国家女子室内五人制足球队</dd>
<dd style="color: #999;font-size: 12px;">中国国家U-20男子室内五人制足球队</dd>
<dd style="color: #999;font-size: 12px;">中国国家沙滩足球队</dd>
</dl>
</div>
<div class="foot_bottom_list">
<h2 class="foot_bottom_h2"><a>赛事</a></h2>
<dl>
<dt><a>男子</a></dt>
<dd><a href="">中国足球协会杯</a></dd>
<dd><a href="" target="blank">中国足球协会超级联赛</a></dd>
<dd><a href="">中国足球协会甲级联赛</a></dd>
<dd><a href="">中国足球协会乙级联赛</a></dd>
<dd><a href="">中国足球协会会员协会冠军联赛</a></dd>
<dd><a href="">全国青少年男子足球超级联赛</a></dd>
</dl>
</div>
<div class="foot_bottom_list">
<h2 class="foot_bottom_h2"><a>赛事</a></h2>
<dl>
<dt><a>女子</a></dt>
<dd><a href="">中国足球协会杯赛(女子)</a></dd>
<dd><a href="">中国足球协会女子足球超级联赛</a></dd>
<dd><a href="">中国足球协会女子足球甲级联赛</a></dd>
</dl>
<dl>
<dt><a>五人制</a></dt>
<dd><a href="">中国足球协会室内五人制足球超级联赛</a></dd>
<dd><a href="">中国足球协会室内五人制足球甲级联赛</a></dd>
<dd><a href="">中国足球协会女子室内五人制足球联赛</a></dd>
</dl>
</div>
<div class="foot_bottom_list w120">
<h2 class="foot_bottom_h2"><a>绿茵梦想</a></h2>
<dl>
<dd><a href="">全民足球</a></dd>
<dd><a href="l">我是球迷</a></dd>
</dl>
<h2 class="foot_bottom_h2 mb20"><a href="">商务专区</a></h2>
<h2 class="foot_bottom_h2"><a href="">关于足协</a></h2>
</div>
</div>
<div class="pFooterW">
<footer>
<p>中国足球协会版权所有 本网站由华奥星空(北京)信息技术有限公司提供制作及技术支持</p>
<p>ICP经营许可证:京ICP备17048355号-1 京公网安备11010102000807号</p>
<p>网上传播视听节目许可证 编号:0105094 发证机关:国家广播电影电视总局</p>
<p>客服及报障电话:4008102008 客服及报障邮箱:operationcenter@sports.cn</p>
</footer>
</div>
</div>
</script>
</body>
</html>
部分网页截图