🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
