51.Web前端网页制作 NBA体育主题网页设计实例大学生期末大作业 html+css+js

仙女网页制作

已于 2024-05-11 18:34:27 修改

阅读量1k

点赞数 10

分类专栏： Web网页设计实例体育文章标签：课程设计 javascript html5 css java 3d jquery

于 2024-03-30 18:30:35 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/137179224

版权

Web网页设计实例同时被 2 个专栏收录

601 篇文章 29 订阅

订阅专栏

体育

16 篇文章 0 订阅

订阅专栏

一、前言

本实例以“体育”NBA为主题设计，应用html+css+js，包括图片轮翻效果、视频、表单等，12个子页面，代码简洁明了，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/css.css" />
<title>篮球</title>
</head>
<body>
<div class="wrapin">
<div class="banner">
<div class="banner" id="banner">
<ul id="b_pic">
<li style="display: block;"><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
<li><img src="images/banner4.jpg" alt=""></li>
<li><img src="images/banner5.jpg" alt=""></li>
</ul>
<ul id="b_an">
<li></li>
<li></li>
<li></li>
   <li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/slider.js"></script>
<div class="header">
<ul class="nav">
<li><a href="index.html">主页 </a></li>
<li><a href="history.html">历史 </a></li>
<li><a href="fiba.html">国际篮联 </a></li>
<li><a href="rules.html">规则 </a></li>
<li><a href="players.html">球员 </a></li>
<li><a href="nab.html">NBA </a></li>
<li><a href="video.html">视频 </a></li>
<li><a href="playoff.html">季后赛 </a></li>
<li><a href="team.html">球队 </a></li>
</ul>
</div>
<div class="con">
<div class="con_t clearfix">
<div class="pic"> <img src="images/pic_01.jpg"/> </div>
<div class="text">
<p>篮球是奥运会的核心项目。这是一项以手为中心的身体对抗运动<br>
1891年12月21日，它是由马萨诸塞州斯普林菲尔德基督教青年会训练学校体育教师詹姆斯奈史密斯发明的。1896年，篮球传入中国天津。1904年，圣路易斯奥运会举行了第一场篮球表演赛。1936年，篮球被列为柏林奥运会正式赛事，中国还派出篮球队首次参加奥运会篮球赛。1992年巴塞罗那奥运会开始，专业球员可以参加奥运会篮球赛<br>
国际篮球联合会是篮球运动的最高组织，成立于1932年，总部设在瑞士日内瓦。当代世界篮球联赛最高水平的是美国男篮职业联赛（NBA）。中国篮球联赛的最高水平是中国职业篮球联赛（CBA）。</p>
</div>
</div>
<div class="players">
<div class="title">球员</div>
<ul class="players_box clearfix">
<li>
<div class="pic"><img src="images/q1.png"/> </div>
<p>勒布朗-詹姆斯</p>
       <a href="info1.html">详情</a>
</li>
<li>
<div class="pic"><img src="images/q2.png"/> </div>
<p>詹姆斯-哈登</p>
       <a href="info2.html">详情</a>
</li>
<li>
<div class="pic"><img src="images/q3.png"/> </div>
<p>斯蒂芬-库里</p>
       <a href="info3.html">详情</a>
</li>

</ul>
</div>
<div class="rules">
<div class="title">规则</div>
<img src="images/qc.jpg" width="100%"/>
<h2>格式</h2>
<br>
<P>（1）比赛分四节，每节10分钟。在第一节和第二节之间，第三节和第四节之间，以及在每个决胜期之前，应有2分钟的休息时间。半场休息时间应为15分钟。如果第四节结束时比分持平，则有5分钟的决胜期，或超过5分钟的决胜期，必须打破平局才能继续比赛。在所有决胜阶段，球队应在第四节继续朝着同一个篮筐比赛</P>
<P> （2）交替所有权：交替所有权是一种通过投球而不是跳球使球活起来的方法。在所有跳球的情况下，对方球队将轮流有权在离跳球位置最近的位置将球抛入界内。在第一节开始跳球后在球场上尚未获得球的控制权的球队应开始轮流控球。在任何一节结束时，拥有下一个替补所有权的球队第四节开始时，将球扔进记录表对面中心线延长线的周边。</P>
</div>
</div>
<footer>
<P>篮球</P>
</footer>
</div>
</body>
</html>

......

2.CSS

代码如下（节选示例）：

* {
   margin: 0;
   padding: 0;
}
body {
   min-width: 1200px;
   margin: 0 auto;
   font-size: 14px;
   font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
   background: #fff;
   text-align: justify;
   color: #010000;
   position: relative;
}
h1, h2, h3 {
   font-weight: 500;
}
img {
   border: none;
}
a {
   cursor: pointer;
   color: #333;
   text-decoration: none;
   outline: none;
}
ul {
   list-style-type: none;
}
em {
   font-style: normal;
}
.lt {
   float: left;
}
.rt {
   float: right;
}
input.sub, label {
   border: none;
   cursor: pointer;
}
input, textarea {
   font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
   outline: none;
}
table {
   border-collapse: collapse;
}
table td, table th {
   padding: 0;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#ccc;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#ccc;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#ccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#ccc;
}
div.clear {
   font: 0px Arial;
   line-height: 0;
   height: 0;
   overflow: hidden;
   clear: both;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
.wrapin {
   width: 1200px;
   margin-left: auto;
   margin-right: auto;
}
body {
   background: url(../images/bg2.jpg) no-repeat center;
   background-size: cover;
}
.banner {
   width: 100%;
   display: block;
}
.banner img {
   width: 100%;
   display: block;
}
.header {
   background: #f6b70a;
   height: 60px;
   width: 100%;
}
.nav {
   line-height: 60px; height:60px;
}
.nav li {
   text-align: center;
   width: 133px;
   display: inline-block;
   float:left;
}
.nav li a {
   font-size: 16px;
   color: #fff; display:block
}
.nav li a:hover{ background:#FF6633}
.con {
   min-height: 500px;
   background: rgba(255,255,255,1);
   padding: 15px;
}
.title {
   margin: 20px 0;
   font-weight: bold;
   color: #950304;
   font-size: 24px;
   line-height: 40px;
   border-bottom: 1px solid #950304;
}
.con_t {
   padding: 30px 0;
   border-bottom: 1px solid #ccc;
}
.con_t .pic {
   float: left;
   width: 300px;
   border: 1px solid #ccc;
   padding: 15px;
   box-sizing: border-box;
}
.con_t .pic img {
   width: 100%;
}
.con_t .text {
   float: right;
   width: 850px;
   font-size: 14px;
   line-height: 28px;
   color: #333;
}
.players_box {
}
.players_box li {
   width: 33.333%;
   float: left;
   text-align: center;
   margin-bottom: 20px;
}
.players_box li a{ background:#FFCC33; display:inline-block; padding:5px 10px; margin-top:10px}
.players_box li p {
   font-size: 16px;
   color: #333;
   border: 1px solid #ccc;
   line-height: 30px;
   width: 80%;
   display: block;
   margin: 0 auto;
   background: #fff;
   position: relative;
   z-index: 1;
}
.players_box li img {
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
.players_box li img:hover {
   transform: scale(1.1);
   -webkit-transform: scale(1.1); /*兼容-webkit-引擎浏览器*/
   -moz-transform: scale(1.1);
}
.rules h2 {
   color: #000;
   font-weight: bold;
   margin: 10px 0;
}
.rules p {
   font-size: 16px;
   color: #333;
   line-height: 28px;
   margin-bottom: 10px;
}
footer {
   height: 60px;
   line-height: 60px;
   margin-top: 20px;
   text-align: center;
   color: #fff;
   background: #f6b70a;
}
.nba {
   margin: 15px -15px;
}
.nba li {
   float: left;
   width: 33.33%;
   padding: 15px;
   box-sizing: border-box;
}
.nba li .box {
   width: 100%;
   height: 210px;
   overflow: hidden;
}
.nba li .box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
.nba li .box img:hover {
   transform: scale(1.1);
   -webkit-transform: scale(1.1); /*兼容-webkit-引擎浏览器*/
   -moz-transform: scale(1.1);
}
.text_nab {
   font-size: 16px;
   line-height: 28px;
}

#banner {
   width: 100%;
   height: 600px;
   position: relative;
}
#banner ul#b_pic li {
   width: 100%;
   height: 600px;
   overflow: hidden;
   position: absolute;
   top: 0;
   display: none;
}
#banner ul#b_pic li img {
   width: 100%;
   height:600px;
   display: block;
}
#banner ul#b_an {
   position: absolute;
   width: 100%;
   bottom: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
}
#banner ul#b_an li {
   width: 13px;
   height: 13px; border-radius:13px;
   background: #86939b;
   margin: 0 3px;
}

......

3.JS

代码如下（节选示例）：

window.οnlοad=function(){
//第一个幻灯
var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');
var an_lis=document.getElementById('b_an').getElementsByTagName('li');
an_lis[0].style.background='#b31114';
var c=0;

for(var j=0; j<pic_lis.length; j++){
an_lis[j].index=j;
an_lis[j].οnmοuseοver=function(){
index=this.index;
clearInterval(timer);
for(var k=0; k<an_lis.length; k++){
pic_lis[k].style.display='none';
an_lis[k].style.background='#fff';
}
pic_lis[index].style.display='block';
an_lis[index].style.background='#b31114';
}

an_lis[j].οnmοuseοut=function(){
timer=setInterval(h_slide,4000);
}
}
}

......