大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 体育强国6个页面带文档

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 体育强国6个页面带文档

网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

获取源码

1,访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90231001
2,点击上方下载

目录1

在这里插入图片描述

目录2

在这里插入图片描述

项目视频

html+css+js网页设计 体育 体育强国6个页面带文档

网页展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

页面3

在这里插入图片描述

页面4

在这里插入图片描述

页面5

在这里插入图片描述

页面6

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>体育</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/footer.css" />
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="top">
        <div class="header">
          <div class="logo">
            <img src="images/logo.png" width="180" />
          </div>
          <div class="search">
            <div class="search-btn">
              <img class="search-1" src="img/icon_2.png" />
              <img class="search-2" src="img/icon_3.png" />
            </div>
            <input type="text" value="" />

            <a href="./login.html">登录</a>
          </div>
        </div>
        <div class="nav">
          <ul>
            <li class="nav-1"><a href="index.html">网站首页</a></li>
            <li class="nav-2"><a href="./html/course.html">课程体系</a></li>
            <li class="nav-3"><a href="./html/about.html">体育强国</a></li>
            <li class="nav-4"><a href="./html/contact.html">加入我们</a></li>
          </ul>
        </div>
      </div>
      <!--top结束-->
      <div class="content">
        <div class="content-1">
          <div class="content-1-main">
            <div class="content-1-pic" id="content_1_pic">
              <div class="content-1-pic-1">
                <img src="images/1.jpg" style="object-fit: cover" height="100%" width="100%" />
              </div>
              <div class="content-1-pic-2">
                <img src="images/2.jpg" style="object-fit: cover" height="100%" width="100%" />
              </div>
              <div class="content-1-pic-3">
                <img src="images/3.jpg" style="object-fit: cover" height="100%" width="100%" />
              </div>
            </div>
            <div class="content-1-pic-tabs" id="content_1_pic_tabs">
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
        <!--content-1结束-->
        <div class="content-2">
          <div class="content-2-main">
            <div class="content-2-title" style="text-align: center">体育强国</div>
            <div class="content-2-line" id="content_2_line">
              <div></div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="content-2-main-box" id="content_2_main_box">
              <div class="content-2-box-wrap" id="content_2_box_wrap">
                <div class="content-2-box">
                  <div class="content-2-box-1">
                    <div class="content-2-box-1-main">
                      <div class="content-2-box-1-pic">
                        <img src="images/4.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-1-text">
                        <p>
                          篮球运动广受青少年喜爱,因为它不仅富有对抗性、集体性,而且集健身性、娱乐性、艺术性、趣味性于一身。打篮球可训练全身的肌肉活动及肌肉力量,同时也能训练耐力、改善体型;训练关节的协调及敏捷度,对於正处於成长期的青少年还可以促进骨骼的发育,让孩子长得更高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-2">
                    <div class="content-2-box-2-main">
                      <div class="content-2-box-2-pic">
                        <img src="images/5.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-2-text">
                        <p>
                          和半路出家的羽毛球爱好者相比,儿童和青少年进行专业的羽毛球训练,好处是显而易见的。羽毛球运动对于青少年身体素质的锻炼非常全面。需要眼、脑、手、脚、肩、腰、胳膊以及腿的综合协调,敏捷性、柔韧性,训练中反应能力将得到充分锻炼,反应速度将明显提高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-3">
                    <div class="content-2-box-3-main">
                      <div class="content-2-box-3-pic">
                        <img src="images/6.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-3-text">
                        <p>
                          满分星启点专为4~14孩子设计专业足球培训,寓教于心,结合孩子自身特色,不同年龄段的专业单体训练方法培养青少年自信,乐观、富有团队精神的品质,增强青少年体质,学习专业的足球技术。帮孩子真切感受到关爱,在足球的乐趣中成长,激发潜能。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-4">
                    <div class="content-2-box-4-main">
                      <div class="content-2-box-4-pic">
                        <img src="images/7.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-4-text">
                        <div>
                          <p>满分中考训练营是满分体育最早开设的项目,旨在稳步提升学员身体素质的同时,让学生获得中考体育满分。</p>
                          <p>进入训练营的学员将经过以下几个阶段:动作模式优化阶段(建立体能基础)、技巧类项目强化阶段(夯实基本功)、体能提升阶段(力量、爆发力、耐力提升)、满分冲刺阶段。</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-5">
                    <div class="content-2-box-5-main">
                      <div class="content-2-box-5-pic">
                        <img src="images/8.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-5-text">
                        <p>
                          培养孩子自我管理能力,强化礼仪;安全地伸展肌肉,提升孩子肢体表达能力;篮球运动基本功训练,同时练习六个重要的动作技能;对篮球运动外的十个动作技能进行补充训练,让孩子建立完整、正确的动作模式,为孩子不断发展的“体能金字塔”打牢基础。
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-2-box">
                  <div class="content-2-box-1">
                    <div class="content-2-box-1-main">
                      <div class="content-2-box-1-pic">
                        <img src="images/9.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-1-text">
                        <p>
                          篮球运动广受青少年喜爱,因为它不仅富有对抗性、集体性,而且集健身性、娱乐性、艺术性、趣味性于一身。打篮球可训练全身的肌肉活动及肌肉力量,同时也能训练耐力、改善体型;训练关节的协调及敏捷度,对於正处於成长期的青少年还可以促进骨骼的发育,让孩子长得更高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-2">
                    <div class="content-2-box-2-main">
                      <div class="content-2-box-2-pic">
                        <img src="images/10.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-2-text">
                        <p>
                          和半路出家的羽毛球爱好者相比,儿童和青少年进行专业的羽毛球训练,好处是显而易见的。羽毛球运动对于青少年身体素质的锻炼非常全面。需要眼、脑、手、脚、肩、腰、胳膊以及腿的综合协调,敏捷性、柔韧性,训练中反应能力将得到充分锻炼,反应速度将明显提高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-3">
                    <div class="content-2-box-3-main">
                      <div class="content-2-box-3-pic">
                        <img src="images/11.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-3-text">
                        <p>
                          满分星启点专为4~14孩子设计专业足球培训,寓教于心,结合孩子自身特色,不同年龄段的专业单体训练方法培养青少年自信,乐观、富有团队精神的品质,增强青少年体质,学习专业的足球技术。帮孩子真切感受到关爱,在足球的乐趣中成长,激发潜能。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-4">
                    <div class="content-2-box-4-main">
                      <div class="content-2-box-4-pic">
                        <img src="images/12.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-4-text">
                        <div>
                          <p>满分中考训练营是满分体育最早开设的项目,旨在稳步提升学员身体素质的同时,让学生获得中考体育满分。</p>
                          <p>进入训练营的学员将经过以下几个阶段:动作模式优化阶段(建立体能基础)、技巧类项目强化阶段(夯实基本功)、体能提升阶段(力量、爆发力、耐力提升)、满分冲刺阶段。</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-5">
                    <div class="content-2-box-5-main">
                      <div class="content-2-box-5-pic">
                        <img src="images/13.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-5-text">
                        <p>
                          培养孩子自我管理能力,强化礼仪;安全地伸展肌肉,提升孩子肢体表达能力;篮球运动基本功训练,同时练习六个重要的动作技能;对篮球运动外的十个动作技能进行补充训练,让孩子建立完整、正确的动作模式,为孩子不断发展的“体能金字塔”打牢基础。
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-2-box">
                  <div class="content-2-box-1">
                    <div class="content-2-box-1-main">
                      <div class="content-2-box-1-pic">
                        <img src="images/14.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-1-text">
                        <p>
                          篮球运动广受青少年喜爱,因为它不仅富有对抗性、集体性,而且集健身性、娱乐性、艺术性、趣味性于一身。打篮球可训练全身的肌肉活动及肌肉力量,同时也能训练耐力、改善体型;训练关节的协调及敏捷度,对於正处於成长期的青少年还可以促进骨骼的发育,让孩子长得更高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-2">
                    <div class="content-2-box-2-main">
                      <div class="content-2-box-2-pic">
                        <img src="images/15.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-2-text">
                        <p>
                          和半路出家的羽毛球爱好者相比,儿童和青少年进行专业的羽毛球训练,好处是显而易见的。羽毛球运动对于青少年身体素质的锻炼非常全面。需要眼、脑、手、脚、肩、腰、胳膊以及腿的综合协调,敏捷性、柔韧性,训练中反应能力将得到充分锻炼,反应速度将明显提高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-3">
                    <div class="content-2-box-3-main">
                      <div class="content-2-box-3-pic">
                        <img src="images/16.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-3-text">
                        <p>
                          满分星启点专为4~14孩子设计专业足球培训,寓教于心,结合孩子自身特色,不同年龄段的专业单体训练方法培养青少年自信,乐观、富有团队精神的品质,增强青少年体质,学习专业的足球技术。帮孩子真切感受到关爱,在足球的乐趣中成长,激发潜能。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-4">
                    <div class="content-2-box-4-main">
                      <div class="content-2-box-4-pic">
                        <img src="images/17.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-4-text">
                        <div>
                          <p>满分中考训练营是满分体育最早开设的项目,旨在稳步提升学员身体素质的同时,让学生获得中考体育满分。</p>
                          <p>进入训练营的学员将经过以下几个阶段:动作模式优化阶段(建立体能基础)、技巧类项目强化阶段(夯实基本功)、体能提升阶段(力量、爆发力、耐力提升)、满分冲刺阶段。</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-5">
                    <div class="content-2-box-5-main">
                      <div class="content-2-box-5-pic">
                        <img src="images/18.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-5-text">
                        <p>
                          培养孩子自我管理能力,强化礼仪;安全地伸展肌肉,提升孩子肢体表达能力;篮球运动基本功训练,同时练习六个重要的动作技能;对篮球运动外的十个动作技能进行补充训练,让孩子建立完整、正确的动作模式,为孩子不断发展的“体能金字塔”打牢基础。
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-2-box">
                  <div class="content-2-box-1">
                    <div class="content-2-box-1-main">
                      <div class="content-2-box-1-pic">
                        <img src="images/19.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-1-text">
                        <p>
                          篮球运动广受青少年喜爱,因为它不仅富有对抗性、集体性,而且集健身性、娱乐性、艺术性、趣味性于一身。打篮球可训练全身的肌肉活动及肌肉力量,同时也能训练耐力、改善体型;训练关节的协调及敏捷度,对於正处於成长期的青少年还可以促进骨骼的发育,让孩子长得更高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-2">
                    <div class="content-2-box-2-main">
                      <div class="content-2-box-2-pic">
                        <img src="images/20.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-2-text">
                        <p>
                          和半路出家的羽毛球爱好者相比,儿童和青少年进行专业的羽毛球训练,好处是显而易见的。羽毛球运动对于青少年身体素质的锻炼非常全面。需要眼、脑、手、脚、肩、腰、胳膊以及腿的综合协调,敏捷性、柔韧性,训练中反应能力将得到充分锻炼,反应速度将明显提高。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-3">
                    <div class="content-2-box-3-main">
                      <div class="content-2-box-3-pic">
                        <img src="images/21.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-3-text">
                        <p>
                          满分星启点专为4~14孩子设计专业足球培训,寓教于心,结合孩子自身特色,不同年龄段的专业单体训练方法培养青少年自信,乐观、富有团队精神的品质,增强青少年体质,学习专业的足球技术。帮孩子真切感受到关爱,在足球的乐趣中成长,激发潜能。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-4">
                    <div class="content-2-box-4-main">
                      <div class="content-2-box-4-pic">
                        <img src="images/22.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-4-text">
                        <div>
                          <p>满分中考训练营是满分体育最早开设的项目,旨在稳步提升学员身体素质的同时,让学生获得中考体育满分。</p>
                          <p>进入训练营的学员将经过以下几个阶段:动作模式优化阶段(建立体能基础)、技巧类项目强化阶段(夯实基本功)、体能提升阶段(力量、爆发力、耐力提升)、满分冲刺阶段。</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content-2-box-5">
                    <div class="content-2-box-5-main">
                      <div class="content-2-box-5-pic">
                        <img src="images/23.jpg" width="100%" height="100%" />
                      </div>
                      <div class="content-2-box-5-text">
                        <p>
                          培养孩子自我管理能力,强化礼仪;安全地伸展肌肉,提升孩子肢体表达能力;篮球运动基本功训练,同时练习六个重要的动作技能;对篮球运动外的十个动作技能进行补充训练,让孩子建立完整、正确的动作模式,为孩子不断发展的“体能金字塔”打牢基础。
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--content-2结束-->
        <div class="content-3">
          <div class="content-3-main">
            <div class="content-3-title" style="text-align: center; color: #fff">校园体育</div>
            <div class="content-3-line" id="content_3_line">
              <div></div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="content-3-box" id="content_3_box">
              <div class="content-3-box-wrap" id="content_3_box_wrap">
                <div class="content-3-box-con">
                  <div class="content-3-box-con-left">
                    <div class="content-3-box-con-left-1">
                      <img src="images/24.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-2">
                      <img src="images/25.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-3">
                      <img src="images/26.jpg" width="100%" height="100%" />
                    </div>
                  </div>
                  <div class="content-3-box-con-right">
                    <ul>
                      <li>
                        <a>国际会展中心校区(会展路181号 7号馆)·······<a class="right">篮球|幼儿篮球|羽毛球</a></a>
                      </li>
                      <li>
                        <a>宁波体育中心校区··························································<a class="right">中兴路360号</a></a>
                      </li>
                      <li>
                        <a>华茂外国语校区························································<a class="right">宁南北路1428弄</a></a>
                      </li>
                      <li>
                        <a>东论运动馆校区··································································<a class="right">科技路1号</a></a>
                      </li>
                      <li>
                        <a>社会体育指导中心校区···················································<a class="right">蓝天路406号</a></a>
                      </li>
                      <li>
                        <a>老年体育活动中心校区···················································<a class="right">泌园街336号</a></a>
                      </li>
                      <li>
                        <a>宁波工程学院西校区 ·······················································<a class="right">翠柏路89号</a></a>
                      </li>
                      <li>
                        <a>富邦八一篮球公园校区··················································<a class="right">卖鱼路109号</a></a>
                      </li>
                      <li>
                        <a>锐邦篮球公园校区 ·······················································<a class="right">明州路418号</a></a>
                      </li>
                      <li>
                        <a>城东校区&nbsp;&nbsp;·······························································<a class="right">人民东路1051号</a></a>
                      </li>
                      <li>
                        <a>城西校区&nbsp;···································································<a class="right">二环西路378号</a></a>
                      </li>
                    </ul>
                    <p>》》更多校区信息更新中</p>
                  </div>
                </div>
                <!--content-3-box-con结束-->
                <div class="content-3-box-con">
                  <div class="content-3-box-con-left">
                    <div class="content-3-box-con-left-1">
                      <img src="images/27.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-2">
                      <img src="images/28.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-3">
                      <img src="images/29.jpg" width="100%" height="100%" />
                    </div>
                  </div>
                  <div class="content-3-box-con-right">
                    <ul>
                      <li>
                        <a>国际会展中心校区(会展路181号 7号馆)·······<a class="right">篮球|幼儿篮球|羽毛球</a></a>
                      </li>
                      <li>
                        <a>宁波体育中心校区··························································<a class="right">中兴路360号</a></a>
                      </li>
                      <li>
                        <a>华茂外国语校区························································<a class="right">宁南北路1428弄</a></a>
                      </li>
                      <li>
                        <a>东论运动馆校区··································································<a class="right">科技路1号</a></a>
                      </li>
                      <li>
                        <a>社会体育指导中心校区···················································<a class="right">蓝天路406号</a></a>
                      </li>
                      <li>
                        <a>老年体育活动中心校区···················································<a class="right">泌园街336号</a></a>
                      </li>
                      <li>
                        <a>宁波工程学院西校区 ·······················································<a class="right">翠柏路89号</a></a>
                      </li>
                      <li>
                        <a>富邦八一篮球公园校区··················································<a class="right">卖鱼路109号</a></a>
                      </li>
                      <li>
                        <a>锐邦篮球公园校区 ·······················································<a class="right">明州路418号</a></a>
                      </li>
                      <li>
                        <a>城东校区&nbsp;&nbsp;·······························································<a class="right">人民东路1051号</a></a>
                      </li>
                      <li>
                        <a>城西校区&nbsp;···································································<a class="right">二环西路378号</a></a>
                      </li>
                    </ul>
                    <p>》》更多校区信息更新中</p>
                  </div>
                </div>
                <!--content-3-box-con结束-->
                <div class="content-3-box-con">
                  <div class="content-3-box-con-left">
                    <div class="content-3-box-con-left-1">
                      <img src="images/30.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-2">
                      <img src="images/31.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-3">
                      <img src="images/32.jpg" width="100%" height="100%" />
                    </div>
                  </div>
                  <div class="content-3-box-con-right">
                    <ul>
                      <li>
                        <a>国际会展中心校区(会展路181号 7号馆)·······<a class="right">篮球|幼儿篮球|羽毛球</a></a>
                      </li>
                      <li>
                        <a>宁波体育中心校区··························································<a class="right">中兴路360号</a></a>
                      </li>
                      <li>
                        <a>华茂外国语校区························································<a class="right">宁南北路1428弄</a></a>
                      </li>
                      <li>
                        <a>东论运动馆校区··································································<a class="right">科技路1号</a></a>
                      </li>
                      <li>
                        <a>社会体育指导中心校区···················································<a class="right">蓝天路406号</a></a>
                      </li>
                      <li>
                        <a>老年体育活动中心校区···················································<a class="right">泌园街336号</a></a>
                      </li>
                      <li>
                        <a>宁波工程学院西校区 ·······················································<a class="right">翠柏路89号</a></a>
                      </li>
                      <li>
                        <a>富邦八一篮球公园校区··················································<a class="right">卖鱼路109号</a></a>
                      </li>
                      <li>
                        <a>锐邦篮球公园校区 ·······················································<a class="right">明州路418号</a></a>
                      </li>
                      <li>
                        <a>城东校区&nbsp;&nbsp;·······························································<a class="right">人民东路1051号</a></a>
                      </li>
                      <li>
                        <a>城西校区&nbsp;···································································<a class="right">二环西路378号</a></a>
                      </li>
                    </ul>
                    <p>》》更多校区信息更新中</p>
                  </div>
                </div>
                <!--content-3-box-con结束-->
                <div class="content-3-box-con">
                  <div class="content-3-box-con-left">
                    <div class="content-3-box-con-left-1">
                      <img src="images/33.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-2">
                      <img src="images/34.jpg" width="100%" height="100%" />
                    </div>
                    <div class="content-3-box-con-left-3">
                      <img src="images/35.jpg" width="100%" height="100%" />
                    </div>
                  </div>
                  <div class="content-3-box-con-right">
                    <ul>
                      <li>
                        <a>·······<a class="right">篮球|幼儿篮球|羽毛球</a></a>
                      </li>
                      <li>
                        <a>体育中心校区··························································<a class="right">中兴路360号</a></a>
                      </li>
                      <li>
                        <a>华茂外国语校区························································<a class="right">宁南北路1428弄</a></a>
                      </li>
                      <li>
                        <a>东论运动馆校区··································································<a class="right">科技路1号</a></a>
                      </li>
                      <li>
                        <a>社会体育指导中心校区···················································<a class="right">蓝天路406号</a></a>
                      </li>
                      <li>
                        <a>老年体育活动中心校区···················································<a class="right">泌园街336号</a></a>
                      </li>
                      <li>
                        <a>宁波工程学院西校区 ·······················································<a class="right">翠柏路89号</a></a>
                      </li>
                      <li>
                        <a>富邦八一篮球公园校区··················································<a class="right">卖鱼路109号</a></a>
                      </li>
                      <li>
                        <a>锐邦篮球公园校区 ·······················································<a class="right">明州路418号</a></a>
                      </li>
                      <li>
                        <a>城东校区&nbsp;&nbsp;·······························································<a class="right">人民东路1051号</a></a>
                      </li>
                      <li>
                        <a>城西校区&nbsp;···································································<a class="right">二环西路378号</a></a>
                      </li>
                    </ul>
                    <p>》》更多校区信息更新中</p>
                  </div>
                </div>
                <!--content-3-box-con结束-->
              </div>
            </div>
          </div>
        </div>
        <!--content-3结束-->
        <div class="content-4">
          <div class="content-4-main">
            <div class="content-4-box">
              <div class="content-4-box-1">
                <div>
                  <p class="text-1">以体育之力增强身体素质</p>
                  <p class="text-2">收获强健“体格”</p>
                  <p class="text-1">以体育之美感染处世为人</p>
                  <p class="text-2">拥有健康“性格”</p>
                  <p class="text-1">以体育之魂塑造坚韧勇敢</p>
                  <p class="text-2">成就完美“人格”</p>
                </div>
              </div>
              <div class="content-4-box-2">
                <img src="images/36.jpg" width="100%" height="100%" />
              </div>
              <div class="content-4-box-3">
                <img src="images/37.jpg" width="100%" height="100%" />
              </div>
              <div class="content-4-box-4">
                <img src="images/38.jpg" width="100%" height="100%" />
              </div>
              <div class="content-4-box-5">
                <img src="images/39.jpg" width="100%" height="100%" />
              </div>
              <div class="content-4-box-6">
                <img src="images/40.jpg" width="100%" height="100%" />
              </div>
              <div class="content-4-box-7">
                <img src="images/41.jpg" width="100%" height="100%" />
              </div>
            </div>
          </div>
        </div>
        <!--content-4结束-->
      </div>
      <!--content结束-->
    </div>
    <div class="footer">
      <div class="footer-content">
        <div class="footer-content-main">
          <div class="footer-weChat">
            <img src="img/index_pic_20.png" />
          </div>
          <div class="footer-line"></div>
          <div class="footer-text">
            <div class="footer-text-1">
              <h5>联系我们</h5>
              <p>999999</p>
              <p>999999</p>
              <p>999999</p>
            </div>
            <div class="footer-text-2">
              <h5>客服热线</h5>
              <p>服务时间:9:30~20:30(周二到周日)</p>
              <img src="img/index_pic_19.png" />
            </div>
            <div class="footer-text-3">
              <div class="footer-text-3-1">
                <a href="javascript:void(0)">品牌故事</a>&nbsp;|&nbsp; <a href="about.html">关于我们</a>&nbsp;|&nbsp;
                <a href="javascript:void(0)">法律申明</a>
              </div>
              <div class="footer-text-3-2">
                <div>
                  <p>Copyright&nbsp;&copy;&nbsp;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--footer结束-->
  </body>
  <script type="text/javascript" src="js/index.js"></script>
</html>

总结

设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;

2.使用方便

要满足使用者的要求,网页适合使用,显示出其功能美;

3.整体性好

围绕一个统一的目标设计,强调整体的功能性;

4.形象突出

尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。

5.交互式强

发挥网络的优势,想方设法使每个使用者都参与到其中来。

更多推荐
【关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅:

html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客

关注作者,点赞收藏博文,获取更多源码,Thanks!5000+完整代码,主题涵盖30+种类型:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

html+css+js网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值