时间:2023-10-09 13:12:01 | 来源:网站运营
时间:2023-10-09 13:12:01 来源:网站运营
用DIV+CSS技术设计的网页与实现制作【体育文化】dreamweaver学生网页设计:精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业: 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式:【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码:【 echarts大屏展示大数据平台可视化(150套) 】 免费且实用的WEB前端学习指南: 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 坚持原创,热衷分享,初心未改,继往开来!
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。<!doctype html><html><head><meta charset="utf-8"><title>体育文化</title><link href="css/style.css" type="text/css" rel="stylesheet"><script src="js/jquery.js"></script><script src="js/more.js"></script></head><body><div class="banner"></div><div class="main"> <div class="nav"> <ul> <li><a href="index.html" class="active">网站首页</a></li> <li><a href="index1.html">发展历程</a></li> <li><a href="index2.html">文化内涵</a></li> <li><a href="index3.html">体育分类</a></li> <li><a href="index4.html">体育传统</a></li> <li><a href="index5.html">体育文化风采</a></li> </ul> </div> <div class="about"> <div class="about_l"><img src="images/1.jpg"></div> <div class="about_r"> <div class="title"> <h3>体育 <span>(社会文化现象)</span></h3> </div> <div class="wz"> <p>体育(physical education,缩写PE或P.E.),是一种复杂的社会文化现象,它以身体与智力活动为基本手段,根据人体生长发育、技能形成和机能提高等规律,达到促进全面发育、提高身体素质与全面教育水平、增强体质与提高运动能力、改善生活方式与提高生活质量的一种有意识、有目的、有组织的社会活动。随着国际交往的扩大,体育事业发展的规模和水平已是衡量一个国家、社会发展进步的一项重要标志,也成为国家间外交及文化交流的重要手段。体育可分为大众体育、专业体育、学校体育等种类。包括体育文化、体育教育、体育活动、体育竞赛、体育设施、体育组织、体育科学技术等诸多要素。</p> <p>人体是各器官系统构成的有机整体。进行体育活动时,看起来好像只有肌肉在活动。其实身体的呼吸、血液循环等器官都在参加活动,并且都要由大脑皮层来指挥协调。做准备活动正是为了提高大皮层神经细胞的兴奋,准备活动还能使体温略为升高,使肌肉、肌腱都处于良好的状态,弹性、伸展性都很好,不至于因为突然收缩而拉伤或撕裂,这在冬天尤其重要。进行投掷时,如投手榴弹、铅球、实心球、标枪、垒球等,一定要按老师的口令行动,令行禁止,不可有丝毫的马虎。</p> </div> </div> </div> <div class="ts"> <div class="title"> <h3>图说体育</h3> </div> <div id=demo style="overflow:hidden;width:1160px;margin-top:10px;"> <table border=0 align=left cellpadding=0 cellspacing="0" cellspace=0> <tr> <td valign=top id=demo1><table width="1160" border="0" cellspacing="5" cellpadding="0"> <tr> <td><a href="#"><img src="images/t.jpg" height="220" border="0" style="margin-left:15px;"></a></td> <td><a href="#"><img src="images/t1.png" height="220" border="0" style="margin-left:15px;"></a></td> <td><a href="#"><img src="images/t2.png" height="220" border="0" style="margin-left:15px;"></a></td> <td><a href="#"><img src="images/t3.png" height="220" border="0" style="margin-left:15px;"></a></td> <td><a href="#"><img src="images/t4.png" height="220" border="0" style="margin-left:15px;"></a></td> </tr> </table></td> <td id=demo2 valign=top></td> </tr> </table> </div> </div> <div class="list"> <ul> <li> <div class="list_bt"><h3>◆ 大众体育</h3></div> <p>亦称“社会体育”和“群众体育”。是为了娱乐身心,增强体质,防治疾病和培养体育后备人才,在社会上广泛开展的体育活动的总称。</p> <a href="index3.html">查看详情 》</a> </li> <li> <div class="list_bt"><h3>◆ 娱乐体育</h3></div> <p>娱乐体育是指在余暇时间或特定时间所进行的一种以娱悦身心为目的的体育活动。具有业余性、消遣性、文娱性等特点。</p> <a href="index3.html">查看详情 》</a> </li> <li> <div class="list_bt"><h3>◆ 医疗体育</h3></div> <p>指运用体育手段治疗某些疾病与创伤,恢复和改善机体功能的一种医疗方法。“医疗体育”侧重论述体育的医疗效果和实施完成的方式方法,这是体育的主要效应之一。</p> <a href="index3.html">查看详情 》</a> </li> </ul> </div> <div class="jing"> <div class="title"> <h3>精神</h3> </div> <p>体育家精神是指一种追求公平竞争,对于队友和对手谦和有礼,遵守道德,待人真诚,无论输赢始终保持体面的态度。对于此,现代奥林匹克之父皮埃尔·德·顾拜旦曾说过:“最重要的……不是输赢,而是参与”,这是对体育家精神的一个经典表述。</p> <p align="center"><img src="images/2.jpg"></p> </div></div><div class="foot_nav"> <a href="index.html">网站首页</a>- <a href="index1.html">发展历程</a>- <a href="index2.html">文化内涵</a>- <a href="index3.html">体育分类</a>- <a href="index4.html">体育传统</a>- <a href="index5.html">体育文化风采</a></div><div class="bq"></div></body></html>
* { margin: 0; padding: 0;}body { font-family: "微软雅黑"; background: #f7f8e5;}a { font-size: 12px; color: #000; text-decoration: none; border: none; padding: 0; margin: 0;}a:hover { color: #cccccc;}img { border: 0; margin: 0; padding: 0;}ul, li { list-style: none; border: 0; margin: 0; padding: 0;}.clear { clear: both;}.main { width: 1200px; margin: 0 auto; overflow: hidden; margin-top: -150px;}.banner { width: 100%; overflow: hidden; background: url(../images/banner.jpg) center no-repeat; height: 500px;}.nav { width: 100%; overflow: hidden; background: #358518; height: 44px;}.nav li { width: 200px; float: left; text-align: center;}.nav li a { color: #fff; font-size: 16px; display: block; line-height: 44px;}.nav li a:hover { background: url(../images/nav.png) center bottom no-repeat; color: #fbca0d;}.nav li a.active { background: url(../images/nav.png) center bottom no-repeat; color: #fbca0d;}.about { padding: 20px; overflow: hidden; background: #fff;}.about_l { width: 400px; float: left;}.about_l img { width: 100%;}.about_r { width: 740px; float: right;}.title { width: 100%; overflow: hidden; border-bottom: 2px solid #d8d9d8; height: 34px;}.title h3 { color: #f15b25; height: 34px; display: inline-block; border-bottom: 2px solid #79a26b; position: absolute; z-index: 999;}.title h3 span { font-variant: normal; font-size: 14px;}.wz { width: 100%; overflow: hidden;}.wz p { font-size: 14px; color: #555; line-height: 26px; padding: 6px 0;}.ts { padding: 20px; overflow: hidden; background: #fff; margin-top: 10px;}.list { width: 100%; overflow: hidden; margin-top: 10px;}.list li { width: 378px; border: 1px solid #d8d9d8; padding-bottom: 20px; float: left; margin-left: 30px; background: #fff;}.list li:first-child { background: #358518; color: #fff;}.nh li p { padding: 10px; color: #333 !important;}.pic { width: 100%; overflow: hidden;}.pic li { width: 370px; height: 208px; float: left; margin-left: 20px; overflow: hidden;}.pic li:first-child { margin-left: 0;}.pic li img { width: 100%; transition: all 1s;}.pic li:hover img { transform: scale(1.1);}.ct td a:hover img { opacity: 0.8;}.ct td { font-size: 14px; color: #666;}.fl { width: 100%; overflow: hidden; background: #f1f1f1; margin-top: 24px;}.fl_l { width: 360px; float: left; overflow: hidden;}.fl_l img { width: 100%; transition: all 1s;}.fl_r { width: 770px; float: right;}.fl_r h3 { padding: 20px 0 14px 0;}.fl_r p { text-indent: inherit; padding-right: 20px;}.fl:hover img { transform: scale(1.1);}.fl:hover { background: #358518;}.fl:hover h3, .fl:hover p { color: #fff;}.tc { width: 100%; overflow: hidden; margin-top: 30px;}.tc li { width: 350px; padding: 6px; border: 2px solid #666; float: left; margin-left: 26px; margin-bottom: 30px;}.tc li img { width: 100%; opacity: 0.8; height: 240px;}.tc li:hover { border: 2px solid #384c00;}.tc li:hover img { opacity: 1;}
请 “ 点赞” “✍️评论” “ 收藏”
一键三连哦! 【 关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!关键词:设计,体育,文化,学生,实现,技术