HTML期末大作业：DIV简单的篮球网页制作期末作业篮球明星科比js三级页面

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

K31SJ-HC-篮球明星科比js三级页面模板登陆注册表单（9页）

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>科比布莱恩特title>
        <link rel="stylesheet" href="css/style.css">
        <style>
            .ly{
                width: 80px;
                height: 80px;
                background: #bb8f09;
                position: fixed;
                line-height: 80px;
                color: white;
                font-weight: bold;
                top: 30;
                left: 3%;
                cursor: pointer;
                border-radius: 50%;
                text-align: center;
            }
        style>
    head>

     <body>
         
        <div class="top"> 
             <a href="index.html"><img  src="images/logo.jpg" />a> 
         div> 
         
     <a href="./liuyan.html" class="ly">为巨星留言a>
        <div class="daohang"> 
            <div id="nav"> 
                <ul> 
                        <li><a class="host" href="index.html">	网站首页a>li> 
                     <li><a href="about.html">科比简介a>li> 
                     <li><a href="shunjian.html">精彩瞬间a>li> 
                     <li><a href="chengjiu.html">科比成就a>li> 
                     <li><a href="login.html">会员登陆a>li> 
                     <li><a href="zhuce.html">会员注册a>li>
                ul> 
            div> 
        div> 
          
          
      <div class="box" id="box">
    <div class="inner">
        
        <ul>
            <li><a href="#"><img  src="images/banner1.jpg" alt="">a>li>
            <li><a href="#"><img  src="images/banner2.jpg" alt="">a>li>
            <li><a href="#"><img src="images/banner3.jpg" alt="">a>li>

        ul>
 
        <ol class="bar">
 
        ol>
        
        <div id="arr">
                    <span id="left">
                        <
                    span>
            <span id="right">
                        >
                    span>
        div>
 
    div>
div>
<script src="js/banner.js">script>
          
        <div class="main"> 
            <div class="box1"> 
                <div class="shang-left"> 
                    <div class="gk-title">
                         <a href="about.html">
                         <h1>科比简介h1>a>
                    div> 
                    <div class="gk"> 
                         <img src="images/gktu.jpg" /> 
                         <p>科比·布莱恩特（Kobe Bryant，1978年8月23日——），美国职业篮球运动员，司职得分后卫。自1996年起效力于NBA洛杉矶湖人队，是前NBA篮球运动员乔·布莱恩特的儿子。科比是NBA第一个高中生后卫，帮助洛杉矶湖人队拿下5次NBA总冠军，1次NBA年度MVP，连续15次入选NBA全明星赛，2枚奥运会金牌，于2014年11月12日加冕历史第一"打铁王"。2016年4月14日，科比NBA生涯告别战——主场对决爵士......p> 
                    div> 
                div> 
            <div class="xz"> 
               <a href="shunjian.html"><h1>精彩瞬间<span><i>                                更多>>i>span>h1>a> 
               <a href="shunjian.html"><img src="images/xz01.jpg" />a> 
               <a href="shunjian.html"><img src="images/xz02.jpg" />a> 
               <a href="shunjian.html"><img src="images/xz03.jpg" />a> 
               <a href="shunjian.html"><img src="images/xz04.jpg" />a> 
           div> 
             <div class="shang-right"> 
                 <div class="count-title">
                     <a href="chengjiu.html"><h1>科比的成就h1>a>
                 div> 
                 <div class="count"> 
                     <p>      科比是NBA第一个高中生后卫，帮助洛杉矶湖人队拿下5次NBA总冠军，2次成为NBA得分王，2次NBA总决赛MVP，1次NBA年度MVP，连续15次入选NBA全明星赛，于2014年11月12日加冕历史第一"打铁王"。p> 
                     <p>      2014年12月15日，科比职业生涯总得分超越迈克尔·乔丹，升至历史第三位。2016年4月14日，科比NBA生涯告别战——主场对决爵士后，正式退役。2017年12月19日，斯台普斯球馆举行了科比的球衣退役仪式。p> 
                     <p>      2018年3月5日，科比·布莱恩特的退役短片《亲爱的篮球》摘得第90届奥斯卡"最佳动画短片奖"。2019年6月20日，科比第四个女儿出生，取名Capri Kobe Bryant。p> 
                     
                 div> 
             div> 
             div> 
            <div class="meishi"> 
                 <div class="yy-title">
                     <a href="#">
                     <h1>科比的队友h1>a>
                 div> 
                <div class="ms"> 
                     <ul> 
                         <a href="#"> <li><img src="images/meishi1.jpg" /> <p>纳什p> li> a> 
                         <a href="#"> <li><img src="images/meishi2.jpg" /> <p>卡尔-马龙p> li> a> 
                         <a href="#"> <li><img src="images/meishi3.jpg" /> <p>霍华德p> li> a> 
                         <a href="#"> <li><img src="images/meishi4.jpg" /> <p>奥多姆p> li> a> 
                         <a href="#"> <li><img src="images/meishi5.jpg" /> <p>奥尼尔p> li> a> 
                     ul> 
               div> 
            div> 
             
             <div class="bottom"> 
                 <div class="bottom-box"> 
                        <p>2019-2028@版权所有 科比篮球巨星p> 
                 div> 
             div> 
               
         div>

     body>
html>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

🏠CSS样式代码


@charset "utf-8";
body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "宋体",arial;
    line-height: 22px;
}

        .inner img{
            width:1000px;
            height: 335px;
            vertical-align: top
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
	    margin:0px;
	    padding:0px;
        }
        .inner li{
            float: left;
 
        }
 
        ol {
	position: absolute;
	height: 20px;
	right: 20px;
	bottom: 12px;
	text-align: center;
	padding: 5px;
        }
        ol li{
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background-color: #fff;
	margin: 5px;
	cursor: pointer; 
        }
        ol .current{
            background-color: red;
        }
        #arr{
	display: block;
        }
        #arr span{
	width: 30px;
	height: 40px;
	position: absolute;
	left: 14px;
	top: 156px;
	margin-top: -20px;
	background: #fff;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #000;
	opacity: 0.5;
	border: 1px solid #fff;
        }
        #arr #right {
	right: 18px;
	left: auto;
        }
.box1 {
    width: 1000px;
    height: 311px;
    margin: 0 auto;
}

.shang-left {
    float: left;
}

.gk-title {
    width: 308px;
    height: 40px;
    background: #bba709;
}

.gk-title h1 {
    height: 40px;
    line-height: 40px;
    width: 130px;
    margin-left: 20px;
    font-size: 16px;
    color: #FFF;
    font-family: "黑体";
}

.gk {
    width: 296px;
    height: 262px;
    border-left: #8c8c8c 1px solid;
    border-right: #8c8c8c 1px solid;
    border-bottom: #8c8c8c 1px solid;
    background: #FFF;
    padding: 0px 5px;
    padding-top: 10px;
}

.gk span {
    color: #F00;
}

.gk img {
    margin-right: 10px;
    float: left;
}

.xz {
    width: 347px;
    height: 311px;
    padding-left: 5px;
    margin: 0px 15px;
    border: #8c8c8c 1px solid;
    background: #FFF;
    float: left;
    overflow: hidden;
}

.xz h1 {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #333;
    font-family: "黑体";
}

.xz span {
    font-size: 12px;
    color: #333;
    color: #bb8f09;
    font-family: "Courier New", Courier, monospace
}

.xz img {
    width: 160px;
    height: 120px;
    margin: 5px;
    float: left;
}

.shang-right {
    float: left;
}

.count-title {
    width: 308px;
    height: 40px;
    background: #bba709;
}

.count-title h1 {
    height: 40px;
    line-height: 40px;
    width: 130px;
    margin-left: 20px;
    font-size: 16px;
    color: #FFF;
    font-family: "黑体";
}


.biaoti {
    color: #3d2915;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    text-align: center;
    margin-bottom: 10px;
    _margin-bottom: 10px;
}

.neirong {
    padding: 0px 15px 15px 15px;
}

.neirong img {
    margin: 0 auto;
    display: block;
}
.neirong{ text-indent:2em;} 
.shet{ width:100%; height:auto; min-height:230px; margin-bottom:20px; border-bottom:#CCC 1px dashed; padding-bottom:10px;}
.shet h1{ height:45px; line-height:45px; font-size:18px;}
.shet a{ color:#F00;}
.mr{ float:left; margin-right:20px !important; }
.ml{ float:right; margin-left:20px !important;}
 .huiy {
    width: 100%;
    height: 650px;
}
.mc {
    float: left;
    width: 360px;
    margin-left: 100px;
    padding-top: 100px;
}
.reg-other {
    float: left;
    margin-left: 60px;
    height: 605px;
    padding-left: 60px;
    border-left: solid 1px #e6e6e6;
    padding-top: 100px;
}
.reg-other .phone-fast-reg {
    background: url(../images/wz-01.png) no-repeat;
    width: 300px;
    height: 355px;
}
.one{margin:20px 0}
.one label{width: 100px;
float: left;
text-align: right;
height: 20px;
line-height: 20px;}
.one input{border:1px solid #ccc;height:20px}.two{padding-left:100px}
.reda{color:red}
.btn{background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;}
 
/*---bottom-----*/
.bottom {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
}

.bottom img {
    float: left;
}

.bottom p {
    width: 100%;
    height: 30px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    margin-left: 20px;
    float: left;
}
/*---bottom-----*/

























1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

相关阅读:
如何求候选码、属性集的闭包
 【数据结构】排序算法（二）—＞冒泡排序、快速排序、归并排序、计数排序
 粉丝活动：《uni-app跨平台开发与应用从入门到实践》一本（包邮）
Windows 修vscode的插件安装和缓存目录释放C盘空间
 mysql视图
 Java集成支付宝沙箱支付，详细教程（SpringBoot完整版）
如何对珍贵水生物标本提供三维重建，数字化技术助力长江大保护...
JAVA毕业设计Web产品管理系统计算机源码+lw文档+系统+调试部署+数据库
 python3-循环与条件语句
 销售易CRM怎么样？
原文地址：https://blog.csdn.net/m0_73081085/article/details/127130833

HTML期末大作业：DIV简单的篮球网页制作期末作业 篮球明星科比js三级页面