🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。
二、✍️网站描述
🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML结构代码
<!DOCTYPE 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>
💒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;
}
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
![[附源码]计算机毕业设计springboot校园招聘系统设计](https://img-blog.csdnimg.cn/49f4da80027749e1833ea970e086d699.png)
![[SpringMVC1]简介与快速入门案例详解](https://img-blog.csdnimg.cn/412745a8085c462ab9c7c0f1904daf8d.png)
![[附源码]计算机毕业设计JAVA鞋店销售管理](https://img-blog.csdnimg.cn/0e323f090faf4b87b3b754db927c968b.png)
![[附源码]计算机毕业设计右脑开发教育课程管理系统Springboot程序](https://img-blog.csdnimg.cn/62c857eb302c4321b37417c0a1eb8adc.png)
