• Dreamweaver教程从入门到精通 html篮球网站制作 学生静态网页作业源码模板

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

    📂文章目录

    二、📚网站介绍

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

    📓网站程序方面：计划采用最新的网页编程语言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.视频演示

    K40SJ 篮球 11页 无js 视频 三级

    🧩 2.图片演示

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    四、💒 网站代码

    🧱HTML结构代码

    
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>篮球title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>

<body>

<div class="main">
    <div class="top"><img src="images/top.jpg">div>
    <div class="nav">
        <a href="index.html" class="on">网站首页a>
        <a href="lishi.html">项目历史a>
        <a href="yaoqiu.html">硬件要求a>
        <a href="guize.html">比赛规则a>
        <a href="saishi.html">重要赛事a>
        <a href="renwu.html">代表人物a>
    div>
    <div class="zuo">
    <div class="left">
        <div class="title">
            <h1>▊ 篮球资讯h1>
        div>
        <p><a href="#" title="盘点詹姆斯NBA总决赛五大对手。">• 盘点詹姆斯NBA总决赛五大对手。a>p>
        <p><a href="#" title="当再谈保罗，依然惊叹小个子能走到现在，曾差点带队登顶！">• 当再谈保罗，依然惊叹小个子能走到现在，曾差点带队登顶！a>p>
        <p><a href="#" title="这个夏天NBA休赛期，神操作接连不断，施罗德去向绝对排第一！">• 这个夏天NBA休赛期，神操作接连不断，施罗德去向绝对排第一！a>p>
        <p><a href="#" title="伦纳德长约留队，快船队将继续以双核冲冠，而这只不过是开始！">• 伦纳德长约留队，快船队将继续以双核冲冠，而这只不过是开始！a>p>
        <p><a href="#" title="当奥运男篮和NBA相遇，不止有奖牌争夺，还有篮球大比拼！">• 当奥运男篮和NBA相遇，不止有奖牌争夺，还有篮球大比拼！a>p>
        <p><a href="#" title="过去两届NBA总决赛，有多少幸运儿，就有多少失意者！">• 过去两届NBA总决赛，有多少幸运儿，就有多少失意者！a>p>
    div>
    <div class="left">
       <img src="images/1.jpg" width="100%">
    div>
    div>
    
    <div class="you">
        <h1>篮球 <span>（球类运动）span>h1>
        <p>篮球（basketball），是以手为中心的身体对抗性体育运动，是奥运会核心比赛项目。p>
        <p>1891年12月21日，由美国马萨诸塞州斯普林菲尔德基督教青年会训练学校体育教师詹姆士·奈史密斯发明 。1896年，篮球运动传入中国天津。1904年，圣路易斯奥运会上第1次进行了篮球表演赛。1936年，篮球在柏林奥运会中被列为正式比赛项目，中国也首次派出篮球队参加奥运会篮球项目。1992年，巴塞罗那奥运会开始，职业选手可以参加奥运会篮球比赛。p>
        <p>篮球的最高组织机构为国际篮球联合会，于1932年成立，总部设在瑞士日内瓦。中国最高组织机构为中国篮球协会，于1956年10月成立。p>
    div>
    <div class="clear">div>
    
    <div class="foot">版权所有：篮球div>
    
div>



body>
html>

    🏠CSS样式代码

    *{ padding:0; margin:0;}
ol, ul {list-style: none;}
body{font-family: "微软雅黑"; background:#16000b;}
a{text-decoration:none;}
a:hover{ color:#cccccc;}
.clear{ clear:both;}
 
.main{ width:1024px; margin:0 auto;}

.top img{ width:100%;}

.nav{ width:100%; height:45px; background:#4c0c16; text-align:center;}
.nav a{ line-height:45px; padding:0 46px; color:#c8bebe; font-size:15px;}
.nav a:hover ,.nav a.on{ color:#fff;}

.zuo{ float:left; width:260px;}
.left{ width:240px; float:left; padding:10px; background:#f1f1f1; border:1px solid #ccc; margin-top:10px;}
.left p{ border-bottom:1px dashed #ccc; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; height:20px; padding:6px 0; margin-top:6px;}
.left a{ font-size:14px; color:#555;}
.left a:hover{ color:#000;}
.title h1{ border-bottom:2px solid #4c0c16; padding-bottom:4px; font-size:18px; color:#4c0c16;}

.you{ width:750px; float:right; background:url(../images/banner.jpg) top no-repeat #FFF;padding-bottom:14px; margin-top:10px;}
.you h1{ padding:420px 0 0 20px;font-size:20px; color:#4c0c16; margin-bottom:3px;}
.you span{ font-weight:normal; font-size:16px;}
.you p{ font-size:15px; color:#555; line-height:26px; padding:10px 14px 0 20px;}

.foot{ width:100%; overflow:hidden; text-align:center;background:#4c0c16; line-height:55px; margin-top:10px; color:#fff; font-size:14px;}

.ls{ padding:14px; background:#fff; overflow:hidden; margin-top:10px;}
.ls p{ font-size:15px; color:#555; line-height:26px; padding-top:8px; text-indent:2em;}

.left p span{ float:right; transition:all .5s; font-size:20px;}
.hd p a{ transition:all .5s; display:block;}
.hd p a:hover{ padding-left:10px;}
.hd p a:hover span{ padding-right:10px;}

.right{ width:720px; padding:15px; background:#fff; overflow:hidden; float:right; margin-top:10px;}
.right p{ font-size:15px; color:#555; line-height:26px; padding-top:8px; text-indent:2em;}

.rw{ padding:14px; background:#fff; overflow:hidden; margin-top:10px;}
.rw li{ width:310px; float:left; margin-left:20px; margin-top:20px;}
.rw li img{ width:100%;}
.rw li h4{ padding:8px 0;}
.rw li p{ font-size:14px; color:#555; line-height:22px;}

    五、🎁更多源码

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

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

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

  • 相关阅读:
    检索增强微调(RAFT)---使语言模型适应特定领域的 RAG
    java计算机毕业设计街舞公司管理系统源码+mysql数据库+系统+lw文档+部署
    和我一起学 Three.js【初级篇】：1. 搭建 3D 场景
    深入理解Nginx~Nginx配置的通用语法
    jsp+ssm+maven大学生就业信息系统
    76-Java的泛型深入、自定义泛型、泛型通配符、上下限
    Java核心编程(20)
    在WSL中使用code . 启动vscode失败 解决
    calc()函数的用法
    有效的字母异位词 C
  • 原文地址：https://blog.csdn.net/p305114466/article/details/126936998