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

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/240078

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

截图演示

08.png

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

        
        
        
    

     
         
        
 
              
         
 
         
     为巨星留言
        
 
            
 
                
 
                        
  网站首页
 
                     
科比简介
 
                     
精彩瞬间
 
                     
科比成就
 
                     
会员登陆
 
                     
会员注册
                
 
            
 
        
 
          
          
      

    

        
        

            

            

            


        
 
        

 
        
        
        

                    
                        <
                    
            
                        >
                    
        
 
    


          
        
 
            
 
                
 
                    

                         
                         
科比简介
                    
 
                    
 
                          
                         
科比·布莱恩特（Kobe Bryant，1978年8月23日——），美国职业篮球运动员，司职得分后卫。自1996年起效力于NBA洛杉矶湖人队，是前NBA篮球运动员乔·布莱恩特的儿子。科比是NBA第一个高中生后卫，帮助洛杉矶湖人队拿下5次NBA总冠军，1次NBA年度MVP，连续15次入选NBA全明星赛，2枚奥运会金牌，于2014年11月12日加冕历史第一"打铁王"。2016年4月14日，科比NBA生涯告别战——主场对决爵士......
 
                    
 
                
 
            
 
               
精彩瞬间                                更多>> 
                
                
                
                
           
 
             
 
                 

                     
科比的成就
                 
 
                 
 
                     
      科比是NBA第一个高中生后卫，帮助洛杉矶湖人队拿下5次NBA总冠军，2次成为NBA得分王，2次NBA总决赛MVP，1次NBA年度MVP，连续15次入选NBA全明星赛，于2014年11月12日加冕历史第一"打铁王"。
 
                     
      2014年12月15日，科比职业生涯总得分超越迈克尔·乔丹，升至历史第三位。2016年4月14日，科比NBA生涯告别战——主场对决爵士后，正式退役。2017年12月19日，斯台普斯球馆举行了科比的球衣退役仪式。
 
                     
      2018年3月5日，科比·布莱恩特的退役短片《亲爱的篮球》摘得第90届奥斯卡"最佳动画短片奖"。2019年6月20日，科比第四个女儿出生，取名Capri Kobe Bryant。
 
                     
                 
 
             
 
             
 
            
 
                 

                     
                     
科比的队友
                 
 
                
 
                     
 
                          
 
纳什
 
  
                          
 
卡尔-马龙
 
  
                          
 
霍华德
 
  
                          
 
奥多姆
 
  
                          
 
奥尼尔
 
  
                     
 
               
 
            
 
             
             
 
                 
 
                        
2019-2028@版权所有 科比篮球巨星
 
                 
 
             
 
               
         

     

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-----*/

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app