2017.12.20 静态网页小实战

最新推荐文章于 2023-05-09 08:37:05 发布

AD_ando

最新推荐文章于 2023-05-09 08:37:05 发布

阅读量1.7k

点赞数 4

文章标签：学习记录

本文链接：https://blog.csdn.net/qq_42715745/article/details/81253911

版权

时间：2017.12.20
地点：武汉-学校
项目类型：静态网页-王者荣耀游戏相关网页
制作时间：差不多半个月

主页面html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>刘永江作业主页</title>
</head>
<body>

<!--导航栏-->
<div id="headside">
  <div id="main-nav">
    <ul>
      <li><a href="子页面/游戏攻略.html" target="_blank"><b>游戏攻略</b></a></li>
      <li><a href="子页面/精彩视频.html" target="_blank"><b>精彩视频</b></a></li>
      <li><a href="子页面/赛事介绍.html" target="_blank"><b>赛事介绍</b></a></li>
      <li><a href="子页面/游戏下载.html" target="_blank"><b>游戏下载</b></a></li>
    </ul>
  </div>
</div>
<div id="wrapper"> 

  <!--游戏简介-->
  <div id="introduce">
    <h1>
      <li>游戏介绍</li>
    </h1>
    <p>《王者荣耀》是腾讯第一5V5英雄公平对战手游，于10月28日开启不限号测试！5V5王者峡谷（含迷雾模式）、5V5深渊大乱斗、以及3V3、1V1等多样模式一键体验，热血竞技尽享快感！海量英雄随心选择，精妙配合默契作战！10秒实时跨区匹配，与好友组队登顶最强王者！操作简单易上手，一血、五杀、超神，极致还原经典体验！实力操作公平对战，回归MOBA初心！</p>
  </div>
  <!--模块1-->

  <div id="one">
    <div class="clear"></div>
    <!--英雄图集-->
    <div id="imgs">
      <h1>
        <li>热门英雄</li>
      </h1>
      <table class="hero_img">
        <tr>
          <td><img src="img/hero_img/孙悟空.jpg" class="bigpic"></td>
          <td width="111"><table width="100%">
              <tr>
                <td><img src="img/hero_img/孙悟空.jpg"></td>
              </tr>
              <tr>
                <td><img src="img/hero_img/貂蝉.jpg"></td>
              </tr>
              <tr>
                <td><img src="img/hero_img/明世隐.jpg"></td>
              </tr>
              <tr>
                <td><img src="img/hero_img/苏列.jpg"></td>
              </tr>
              <tr>
                <td><img src="img/hero_img/妲己.jpg"></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </div>
    <div class="word">
      <h1>&nbsp;</h1>
      <div id="gonglue">
        <ul >
          <h3>最新攻略</h3>
          <hr>
          <a href="#">
          <li>【视频教学】瓶子英雄周报：强辅扁鹊治疗伤害...</li>
          </a> <a href="#">
          <li>【视频教学】龍岩解说：鲁班七号隐后排巧妙三...</li>
          </a> <a href="#">
          <li>【攻略指南】百里玄策干货教学：完美诠释收割...</li>
          </a> <a href="#">
          <li>【攻略指南】白起大招隐藏技巧 嘲讽可获得双倍...</li>
          </a> <a href="#">
          <li>【视频教学】月光之女露娜打野套路教学 野区里...</li>
          </a> <a href="#">
          <li>【视频教学】扁鹊上演绝地反击秀 一波拆家强势...</li>
          </a> <a href="#">
          <li>【攻略指南】听说这套铭文和露娜的月下无限连...</li>
          </a> <a href="#">
          <li>【攻略指南】女娲铭文如何选择 女娲顶级铭文搭...</li>
          </a>
          <input type="button" class="button" value="点击查看更多王者荣耀攻略">
        </ul>
      </div>
      <div id="baoliao">
        <h3>爆料站</h3>
        <hr>
        <ul>
          <li>星耀王者局被禁英雄 ...</li>
          <li>体验服一大波新皮肤 ...</li>
          <li>公孙离全技能曝光：  ...</li>
          <li>活动大爆料：逐梦之...</li>
          <li>新皮肤爆料：炫酷弹 ...</li>
          <li>逐梦之星模型特效预 ...</li>
          <li>夏侯惇模型重做抢先 ...</li>
          <li>为维护良好游戏环境 ...</li>
          <li>体验【资格申请活动 ...</li>
        </ul>
        <input type="button" class="button" value="点击查看更多爆料">
      </div>
    </div>
    <div class="clear"></div>

    <!--模块3-->
    <div id="two"> 
      <!--问卷调查表单-->
      <div id="question">
        <h1>
          <li>王者小问卷</li>
        </h1>
        <div class="form">
          <form class="wenjuan">
            <p>请在热门英雄中选出您最喜欢使用的英雄：</p>
            <input type="radio" name="hero" value="孙悟空">
            孙悟空
            <input type="radio" name="hero" value="貂蝉">
            貂蝉
            <input type="radio" name="hero" value="明世隐">
            明世隐
            <input type="radio" name="hero" value="苏烈">
            苏列 <br>
            <input type="submit" class="button" value="提交">
          </form>
          <form class="sousuo">
            <h3>站内搜索</h3>
            <span>
            <input type="text" placeholder="请输入关键词" class="text">
            </span> <span>
            <input type="submit" class="submit" value="搜索">
            </span>
          </form>
        </div>
      </div>
      <!--游戏视频-->
      <div id="medio">
        <h1>
          <li>精彩CG</li>
        </h1>
        <video width="610" height="300" controls autoplay>
          <source src="video/宣传片.mp4" type="video/mp4">
        </video>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <!--模块3图区-->
  <div id="three">
    <h1>
      <li>最新图讯</li>
    </h1>
    <div id="xyx">
      <h3>最新英雄</h3>
      <hr>
      <img src="img/hero_img/新英雄明世隐.jpg"> <img src="img/hero_img/新英雄女娲.jpg"> <img src="img/hero_img/新英雄梦奇.jpg"> </div>
    <div id="xpf">
      <h3>最新皮肤</h3>
      <hr>
      <img src="img/hero_img/逐梦之星.jpg"> <img src="img/hero_img/占星术士.jpg"> <img src="img/hero_img/霸王丸.jpg"> </div>
  </div>
  <div class="clear"></div>
  <!--模块4专栏-->
  <div id="four">
    <h1>
      <li>专栏区</li>
    </h1>
    <div id="dashen">
      <h3>大神专栏</h3>
      <hr>
      <ul>
        <li>新版本貂蝉这么强怎么玩 五个英雄轻松压制</li>
        <li>为何阿轲在高端局难见踪影 死亡之刃高端局</li>
        <li>杀人最优雅的三位英雄 玩家表示遇见他们愿</li>
        <li>大招范围最大的英雄 王昭君排第二它才是最</li>
        <li>知道你的法师为什么没伤害吗 因为你没有出</li>
        <li>超详细铭文推荐 还在纠结配铭文的小伙伴赶</li>
        <li>18888金币孙悟空和吕布如何抉择 英雄性价</li>
        <li>S9赛季星耀局以下超强战士盘点 橘右京勇夺</li>
        <li>王者荣耀为什么会火 1分钟带你看清这款游戏</li>
        <li>3D视角下的英雄面貌 火舞太美上天梦奇是真</li>
      </ul>
    </div>
    <div id="yingxiong">
      <h3>英雄专栏</h3>
      <hr>
      <ul>
        <li>王者荣耀明世隐怎么出装 明世隐出装顺序推荐</li>
        <li>王者荣耀曦技能动态图赏 大招超远射程自带位</li>
        <li>王者荣耀曦多少钱 新英雄曦金币售价全曝光</li>
        <li>王者荣耀曦铭文搭配推荐 带你玩转超强传送法</li>
        <li>王者荣耀新英雄时间表 上线时间曝光</li>
        <li>王者荣耀干将莫邪重做出装推荐 新版暴力出装</li>
        <li>王者荣耀奕星大招重做 群体沉默外加禁锢强势</li>
        <li>王者荣耀最坑英雄排行 遇到他们想赢都难</li>
        <li>王者荣耀最新单挑王梦奇 1V1单挑胜率达到68</li>
        <li>王者荣耀亚瑟新皮肤爆料：最丑尬舞不忍直视</li>
      </ul>
    </div>
    <div id="wenda">
      <h3>玩家问答</h3>
      <hr>
      <ul>
        <li>王者荣耀五军之战什么时候上线体验服 新模</li>
        <li>王者荣耀五军之战什么时候上线正式服 新模</li>
        <li>王者荣耀五军之战有什么亮点 新模式亮点介</li>
        <li>王者荣耀五军之战有什么技能五军之战特有技</li>
        <li>王者荣耀五军之战怎么获取经济新模式地图资</li>
        <li>王者荣耀五军之战怎么获得胜利五军战获胜方</li>
        <li>王者荣耀五军之战好玩吗 新模式玩法大揭秘</li>
        <li>王者荣耀五军之战怎么玩 新模式五军之战全揭</li>
        <li>王者荣耀公孙离怎么出装 新射手英雄出装攻略</li>
        <li>王者荣耀公孙离铭文怎么搭配 公孙离铭文搭配</li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div id="foot">
  <div id="chaolianjie">
    <h4>友情链接</h4>

    <a href="http://pvp.qq.com/">游戏官网</a> <a href="http://pvp.qq.com/history/">文化中心</a> <a href="#">加入我们</a> <a href="#">作者主页</a> </div>
  <div id="footer"> 
  <p>Copyright ©2017 1702软件作业. All rights reserved. 45号刘永江制作</p>

  </div>
</div>
</body>
</html>

主页面css：

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url(../img/background_img/b.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #FAFAFA;
    font-family: "微软雅黑";
}
h1 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
}
h3 {
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
    color: #686868;
}
li {
    list-style-type: square;
}
.clear {
    clear: both;
}
/*--------导航栏样式--------*/
#headside {
    margin: 0 auto;
    width: 960px;
    margin-bottom: 20px;
    margin-top: 250px;
}
#main-nav {
    background-color: rgba(48,38,77,0.80);
    border-radius: 10px;
}
#main-nav ul {
    list-style-type: none;
    padding: 10px 0 15px 10px;
    text-align: center;
}
#main-nav li {
    display: inline;
    margin: 0 65px 0 20px;
}
#main-nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 28px;
    padding: 10px 10px 10px 10px;
}
#main-nav a:hover {
    background-color: #FFFFFF;
    padding: 5px 10px 10px 10px;
    border-radius: 10px;
    color: #423468;
}
/*--------主体样式--------*/
#wrapper {
    width: 960px;
    background-color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    margin-bottom: 50px;
}
/*--------介绍模块样式--------*/
#introduce {
    background-color: #F9F9F9;
    border-radius: 10px 10px 0 0;
}
#introduce h1 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
    border-radius: 10px 10px 0 0;
}
#introduce p {
    padding: 20px 30px 20px 30px;
    font-size: 17px;
    color: #575757;
}
/*--------图片集样式--------*/
#imgs {
    width: 460px;
    float: left;
}
table.hero_img {
    border-collapse: collapse;
}
table.hero_img table {
    border-collapse: collapse;
}
table.hero_img img {
    vertical-align: bottom;
}
img.bigpic {
    width: 400px;
    height: 350px;
}
table.hero_img td td img {
    width: 60px;
    height: 70px;
    opacity: 1;
    opacity: 0.5;
}
table.hero_img td td img:hover {
    opacity: 1;
}
/*--------文字模块样式--------*/
.word {
    width: 499px;
    font-size: 16px;
    float: left;
}
/*----攻略样式----*/
#gonglue hr {
    width: 300px;
    margin: 0 auto;
    margin-left: 5px;
}
#gonglue {
    float: left;
    width: 300px;
    font-size: 12px;
}
#gonglue ul {
    width: 300px;
}
#gonglue li {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-bottom: 8px;
    margin-top: 1px;
    margin-left: 20px;
    width: 360px;
    list-style-type: none;
}
#gonglue a {
    text-decoration: none;
    color: #000000;
}
#gonglue li:hover {
    background-color: #423468;
    color: #FFFFFF;
    border-radius: 20px;
    width: 280px;
}
#gonglue .button {
    background-color: #838383;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
    width: 250px;
    margin-left: 20px;
}
#gonglue .button:hover {
    background-color: #423468;
    color: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    width: 250px;
}
/*----爆料样式----*/
#baoliao {
    float: left;
    width: 180px;
    margin-left: -5px;
    font-size: 12px;
}
#baoliao li {
    list-style-type: square;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-bottom: 6px;
    margin-top: 1px;
    margin-left: 10px;
    list-style-type: none;
}
#baoliao hr {
    width: 120px;
    margin: 0 auto;
}
#baoliao .button {
    background-color: #838383;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
    width: 180px;
    margin-left: 10px;
    margin-top: 3px;
}
#baoliao .button:hover {
    background-color: #423468;
    color: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    width: 180px;
    margin-left: 10px;
}
/*--------问卷样式--------*/
#question {
    width: 350px;
    float: left;
}
#question p {
    margin-bottom: 20px;
}
.wenjuan {
    padding: 20px 10px 0 20px;
    border-bottom: 10px solid #423468;
}
.wenjuan input {
    margin-bottom: 20px;
    margin-left: 10px;
}
/*----搜索栏样式----*/
.sousuo {
    padding: 50px 50px 50px 50px;
}
.sousuo h3 {
    margin-bottom: 5px;
    margin-top: -50px;
    margin-left: -50px;
    color: #686868;
}
.sousuo .text {
    padding: 10px 10px 10px 10px;
    border-radius: 5px;
}
.sousuo .submit {
    background-color: #838383;
    border: none;
    text-align: center;
    font-size: 18px;
    /*padding: 5px 10px 5px 10px;*/
    font-family: "微软雅黑";
    border-radius: 5px;
    margin-left: 8px;
    padding: 5px 4px 5px 4px
}
.sousuo .submit:hover {
    background-color: #423468;
    color: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
    margin-left: 8px;
    padding: 5px 4px 5px 4px;
}
/*----提交按钮样式----*/
.button {
    background-color: #838383;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;

}
.button:hover {
    background-color: #423468;
    color: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
}
/*--------视频样式--------*/

#medio {
    float: left;
    background-color: #000000;
}
/*--------图区样式--------*/
#three hr {
    width: 920px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-right: 20px;
}
#xyx {
    float: left;
    margin-left: 20px;
}
#xyx img {
    width: 280px;
    margin-left: 20px;
}
#xpf {
    float: left;
    margin-left: 20px;
}
#xpf img {
    width: 280px;
    margin-left: 20px;
    margin-bottom: 30px;
}
/*--------专区样式--------*/
#four ul {
    font-size: 14px;
}
#dashen {
    width: 320px;
    float: left;
}
#dashen hr {
    width: 300px;
    margin: 0 auto;
    margin-bottom: 10px;
}
#dashen li {
    margin-bottom: 14px;
    margin-left: 25px;
}
#yingxiong {
    width: 320px;
    float: left;
}
#yingxiong hr {
    width: 300px;
    margin: 0 auto;
    margin-bottom: 10px;
}
#yingxiong li {
    margin-bottom: 14px;
    margin-left: 25px;
}
#wenda {
    width: 320px;
    float: left;
}
#wenda hr {
    width: 300px;
    margin: 0 auto;
    margin-bottom: 10px;
}
#wenda li {
    margin-bottom: 14px;
    margin-left: 25px;
}
/*--------页脚样式--------*/
/*----超链接样式----*/
#chaolianjie {
    margin-top: 50px;
    padding: 20px 0;
    background-color: #333;
    overflow: hidden;
    padding: 20px 300px 20px 300px;
}
#chaolianjie h4 {
    color: #AAAAAA;
    border-bottom: 1px solid #444;
    height: 24px;
    overflow: hidden;
    font-size: 14px;
    margin-left: 10px;
}
#chaolianjie a {
    line-height: 24px;
    padding: 0 10px;
    font-size: 12px;
    color: #777;
    word-wrap: break-word;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}
/*----footer----*/
#footer {
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: #252525;
    padding: 25px 0 0;
}
#footer p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
}

主页面js：

<script>
window.onload = function(){
    var pic = document.getElementsByTagName("img");     

    for(var i = 1; i < pic.length; i++){
        pic.item(i).addEventListener("click",changebigpic,0);
    }

    function changebigpic(event){
        var newsrc = event.target.src;
        var bigpic = document.getElementsByClassName("bigpic").item(0);
        bigpic.setAttribute("src",newsrc);
    }
}
</script>

子页面大框架样式：

@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
}
h1 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
    border-radius: 10px 10px 0 0;
}
h3 {
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
    color: #686868;
}
li {
    list-style-type: square;
}
.clear {
    clear: both;
}
/*--------导航样式--------*/
#headside {
    margin: 0 auto;
    width: 960px;
    margin-bottom: 20px;
    margin-top: 250px;
}
#main-nav {
    background-color: rgba(48,38,77,0.80);
    border-radius: 10px;
}
#main-nav ul {
    list-style-type: none;
    padding: 10px 0 15px 10px;
    text-align: center;
}
#main-nav li {
    display: inline;
    margin: 0 65px 0 20px;
}
#main-nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 28px;
    padding: 10px 10px 10px 10px;
}
#main-nav a:hover {
    background-color: #FFFFFF;
    padding: 5px 10px 10px 10px;
    border-radius: 10px;
    color: #423468;
}
/*--------页脚样式--------*/
/*----超链接样式----*/
#chaolianjie {
    margin-top: 50px;
    padding: 20px 0;
    background-color: #333;
    overflow: hidden;
    padding:20px 300px 20px 300px;
}
#chaolianjie h4 {
    color: #AAAAAA;
    border-bottom: 1px #444 solid;
    height: 24px;
    overflow: hidden;
    font-size: 14px;
    margin-left: 10px;
}
#chaolianjie a {
    line-height: 24px;
    padding: 0 10px;
    font-size: 12px;
    color: #777;
    word-wrap: break-word;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}
/*----footer----*/
#footer {
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: #252525;
    padding: 25px 0 0;
}
#footer p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
}

子页面1代码附样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>游戏下载</title>
</head>

<body>
<!--导航栏-->
<div id="headside">
  <div id="main-nav">
    <ul>
      <li><a href="游戏攻略.html" target="_blank"><b>游戏攻略</b></a></li>
      <li><a href="精彩视频.html" target="_blank"><b>精彩视频</b></a></li>
      <li><a href="赛事介绍.html" target="_blank"><b>赛事介绍</b></a></li>
      <li><a href="游戏下载.html" target="_blank"><b>游戏下载</b></a></li>
    </ul>
  </div>
</div>
<div id="wrapper">
  <h5>
    <li>游戏下载</li>
  </h5>
  <h3>版本背景介绍</h3>
  <hr>
  <p class="word">作为长安城中备受崇敬的占卜师，他对占卜对象的命运的所做的不只是预言，更是实际的操控。
    善于审时度势的他，知道在战场中谁是最值得辅佐的队友，谁又是最应该击破的敌人。
    在战场上，他要能够发现队友中最锐利的矛，并辅助其变得更加锐利；或者找到最坚固的盾，辅助其变得更牢不可破。或者，挫败对手的矛，击破对手的盾。
    甚至，在必要时，牺牲自己的部分生命获取巨大能量，挽救队友，或者瞬间击垮敌人。</p>
  <h3>版本说明</h3>
  <hr>
  <p><b>版本名称</b>：盛世长安</p>
  <p><b>游戏大小</b>：565MB</p>
  <p><b>更新日期</b>：2017.8.21</p>
  <div class="icon"> <img src="../img/下载手机.png"> <img src="../img/下载电脑.png"> </div>
  <div class="logo"><img src="../img/logo.png"></div>
</div>
<div id="foot">
  <div id="chaolianjie">
    <h4>友情链接</h4>
    <a href="http://pvp.qq.com/">游戏官网</a> <a href="http://pvp.qq.com/history/">文化中心</a> <a href="#">加入我们</a> <a href="#">作者主页</a> </div>
  <div id="footer">
    <p>Copyright ©2017 1702软件作业. All rights reserved. 45号刘永江制作</p>
  </div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body {
    background-image: url(../img/background_img/c.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;
    font-family: "微软雅黑";
}
#wrapper {
    margin: 0 auto;
    width: 960px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding-bottom: 30px;
}
h5 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
    border-radius: 12px 12px 0 0;
}
hr {
    margin: 0 auto;
    width: 920px;
}
h3 {
    margin-top: 20px;
}
/*--------主体--------*/
#wrapper b {
    margin-left: 20px;
    font-size: 16px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #4f4f4f;
}
.word {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
    width: 900px;
    margin-left: 25px;
    margin-right: 40px;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 14px;
}
.icon {
    margin: 0 auto;
    padding: 50px 0px 20px 50px;
}
.icon img {
    margin-left: 140px;
    border: 1px solid #000000;
    border-radius: 18px;
}
.logo {
    padding:100px 50px 50px 375px;

}

子页面2代码附样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>游戏攻略</title>
</head>

<body>
<!--导航栏-->
<div id="headside">
  <div id="main-nav">
    <ul>
      <li><a href="游戏攻略.html" target="_blank"><b>游戏攻略</b></a></li>
      <li><a href="精彩视频.html" target="_blank"><b>精彩视频</b></a></li>
      <li><a href="赛事介绍.html" target="_blank"><b>赛事介绍</b></a></li>
      <li><a href="游戏下载.html" target="_blank"><b>游戏下载</b></a></li>
    </ul>
  </div>
</div>
<!--主体-->
<div id="wrapper">
  <h1>
    <li>热门英雄攻略</li>
  </h1>
  <!--模块1-->
  <div id="one"> 
    <!--英雄资料--> 
    <img class="hero" src="../img/hero_img/明世隐.jpg">
    <div class="shuju">
      <p class="h"><b>英雄名称：</b>明世隐</p>
      <p class="h"><b>英雄作用：</b>辅助</p>
      <p class="h"><b>英雄定位：</b>近战/法术</p>
      <p class="h"><b>英雄属性：</b></p>
      <p class="w">生存能力：
        <star>★★★</star>
      </p>
      <p class="w">攻击伤害：
        <star>★★★★</star>
      </p>
      <p class="w">技能效果：
        <star>★★★★★★★</star>
      </p>
      <p class="w">上手难度：
        <star>★★★★★</star>
      </p>
    </div>
    <div class="beijing">
      <h4>英雄背景：</h4>
      <p>作为长安城中备受崇敬的占卜师，他对占卜对象的命运的所做的不只是预言，更是实际的操控。</p>
      <p>善于审时度势的他，知道在战场中谁是最值得辅佐的队友，谁又是最应该击破的敌人。</p>
      <p>在战场上，他要能够发现队友中最锐利的矛，并辅助其变得更加锐利;或者找到对坚固的盾，辅助其变得更牢不可破。或者，挫败对手的矛，击破对手的盾。</p>
      <p>甚至，在必要时，牺牲自己的部分生命获取巨大能量，挽救队友，或者瞬间击垮敌人。</p>
    </div>
    <div class="clear"></div>
    <img class="hero" src="../img/hero_img/苏列.jpg">
    <div class="shuju">
      <p class="h"><b>英雄名称：</b>苏烈隐</p>
      <p class="h"><b>英雄作用：</b>坦克</p>
      <p class="h"><b>英雄定位：</b>近战/物理</p>
      <p class="h"><b>英雄属性：</b></p>
      <p class="w">生存能力：
        <star>★★★★★★★★★</star>
      </p>
      <p class="w">攻击伤害：
        <star>★★★★★</star>
      </p>
      <p class="w">技能效果：
        <star>★★★★★</star>
      </p>
      <p class="w">上手难度：
        <star>★★★★★</star>
      </p>
    </div>
    <div class="beijing">
      <h4>英雄背景：</h4>
      <p>青年时代的苏烈于科举中拔得头筹之时，似乎便注定了人生的坦途：出身世家望族，才华横溢又深得老师赏识，前途无量。然而同窗们大跌眼镜的是，他选择了投笔从戎。</p>
      <p>自幼生活于长安，见惯东市和西市的繁华，无数次想象来自远方的珍奇异物，如何经过漫长的丝绸之路被送到长安。碧眼的异乡商人，讲述着惊心动魄引人入胜的旅途故事。摇曳的驼铃，汗血的宝马，绿洲之上的古老城池……还有长城，守护一路繁荣的长城，遥遥看到它的屹立，就能让长途跋涉的旅人们心安。对此心驰神往的青年，放弃仕途，作为长城守卫军一员在边塞度过十年时光。</p>
    </div>
    <div class="clear"></div>
    <img class="hero" src="../img/hero_img/霸王丸.jpg">
    <div class="shuju">
      <p class="h"><b>英雄名称：</b>宫本武藏</p>
      <p class="h"><b>英雄作用：</b>战士</p>
      <p class="h"><b>英雄定位：</b>近战/物理</p>
      <p class="h"><b>英雄属性：</b></p>
      <p class="w">生存能力：
        <star>★★★</star>
      </p>
      <p class="w">攻击伤害：
        <star>★★★★★★★★★★</star>
      </p>
      <p class="w">技能效果：
        <star>★★★★</star>
      </p>
      <p class="w">上手难度：
        <star>★★★★★★★★★★</star>
      </p>
    </div>
    <div class="beijing">
      <h4>英雄背景：</h4>
      <p>夕阳西下的路边，茶棚老板跟客人聊着八卦。
        “哟，剑客老兄，见识过很多厉害的人物吧。”
        “我遇到的，好像都是些弱手。”
        “是吗?哈哈，听说武道大会可是高手如云，今年的冠军……”
        “哦，那家伙已经挂了。”
        “真是……天有不测风云。咳咳，东海岛上出现了血族之王，据说他……”
        “徐福吗?他也挂了。”
        “啊，扶桑，有个叫宫本武藏的……左手一把长刀，右手一把短剑，神挡杀神，魔挡杀魔……”
        “哦，那个家伙还是可以一战的。”
        “您挑战过?”</p>
      <p>“打起来太无聊了。”
        “真，真的挑战过!”
        “当然，我左手一把长刀，右手一把短剑……一直分不出输赢，是不是很无聊。”
        “莫非您……
        “是啊，我就是那个武藏。你还知道什么值得我挑战的对手吗?”
        “剑圣大人，只有大唐帝国，那里人才济济，一定有人能成为您可敬的对手。”
        “大唐吗?正有此意前往。可是……”
        “可是?”
        “我迷路了……”
        “告诉你个秘密：我，是无敌的!”</p>
    </div>
  </div>
  <div id="two">
    <h5>其它攻略</h5>
    <ul>
      <li>【视频教学】瓶子英雄周报</li>
      <li>【视频教学】龍岩解说：鲁</li>
      <li>【攻略指南】百里玄策干货</li>
      <li>【攻略指南】白起大招隐藏</li>
      <li>【视频教学】月光之女露娜</li>
      <li>【视频教学】扁鹊上演绝地</li>
      <li>【攻略指南】听说这套铭文</li>
      <li>【攻略指南】女娲铭文如何</li>

    </ul>
    <h5>王者小问卷</h5>
    <div class="form">
      <form class="wenjuan">
        <p>请在热门英雄中选出您最喜欢使用的英雄：</p>
        <input type="radio" name="hero" value="孙悟空">
        孙悟空
        <input type="radio" name="hero" value="貂蝉">
        貂蝉
        <input type="radio" name="hero" value="明世隐">
        明世隐
        <input type="radio" name="hero" value="苏烈">
        苏列 <br>
        <input type="submit" class="button" value="提交">
      </form>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div id="foot">
  <div id="chaolianjie">
    <h4>友情链接</h4>
    <a href="http://pvp.qq.com/">游戏官网</a> <a href="http://pvp.qq.com/history/">文化中心</a> <a href="#">加入我们</a> <a href="#">作者主页</a> </div>
  <div id="footer">
    <p>Copyright ©2017 1702软件作业. All rights reserved. 45号刘永江制作</p>
  </div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body {
    background-image: url(../img/background_img/c.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;
    font-family: "微软雅黑";
}
#wrapper {
    margin: 0 auto;
    width: 960px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding-bottom: 30px;
}
h5 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
    border: 1px solid #B5B5B5;
}
/*--------模块1样式--------*/
/*----框架元素样式----*/

.hero {
    width: 350px;
    margin: 30px 0 30px 20px;
    float: left;
    height: 283px;
}
/*--英雄数据文字框架样式--*/
.w {
    margin: 0px 0 5px 20px;
}
star {
    color: #F7D700;
    font-size: 18px;
}
.shuju {
    float: left;
    border: 1px solid #B5B5B5;
    width: 270px;
    height: 283px;
    margin-top: 30px;
    margin-left: 30px;
}
.h {
    font-size: 20px;
    margin: 10px 0 10px 20px;
}
/*--英雄背景文字框架样式--*/
.beijing {
    font-size: 15px;
    border: 1px solid #B5B5B5;
    float: left;
    margin: 0 0 10px 20px;
    width: 650px;
    padding-bottom: 10px;
}
.beijing h4 {
    font-size: 20px;
    margin: 20px 0 20px 20px;
}
.beijing p {
    margin: 0 20px 25px 20px;
    color: #424242;
}
/*--------div样式--------*/
#one {
    float: left;
    width: 680px;
}
#two {
    float: left;
    width: 250px;
    border: 1px solid #B5B5B5;

    margin-top: 30px;
    margin-left: 10px;
}
#two ul {
    margin-left: 30px;
}
#two li {
    margin-top: 10px;
    margin-bottom: 30px;

}
/*----问卷样式----*/
.form {
    font-size: 16px;
    padding: 20px 10px 10px 10px;
}
.wenjuan p {
    margin-bottom: 20px;
    font-size: 16px;

}
.wenjuan {
    font-size: 14px;
}
.button {
    background-color: #F1F1F1;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
    margin:20px 0 0 80px
}
.button:hover {
    background-color: #423468;
    color: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    font-family: "微软雅黑";
    border-radius: 5px;
}

子页面3代码附样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>赛事介绍</title>
<link type="text/css" rel="stylesheet" href="../style/3style.css">
</head>

<body>
<!--导航栏-->
<div id="headside">
  <div id="main-nav">
    <ul>
     <li><a href="游戏攻略.html" target="_blank"><b>游戏攻略</b></a></li>
      <li><a href="精彩视频.html" target="_blank"><b>精彩视频</b></a></li>
      <li><a href="赛事介绍.html" target="_blank"><b>赛事介绍</b></a></li>
      <li><a href="游戏下载.html" target="_blank"><b>游戏下载</b></a></li>
    </ul>
  </div>
</div>
<!--主体-->
<div id="wrapper">
  <h1>
    <li>KPL介绍</li>
  </h1>
  <div id="logo"> <img src="../img/kpl.png">
    <p>《王者荣耀》职业联赛（简称：KPL）是官方最高规格专业竞技赛事，2017年春季赛由雪碧冠名赞助，官方赛事用机vivo Xplay6，赛事用车全新BMW 1系运动轿车，总决赛冠军戒指由六福珠宝提供赞助</p>
  </div>
  <div id="team">
    <h5>
      <li>队伍介绍</li>
    </h5>
    <div class="img"> <img src="../img/team_img/qghappy.png"> <img src="../img/team_img/agteam.png"> <img src="../img/team_img/as.png"> <img src="../img/team_img/rngm.png"> <img src="../img/team_img/jc.png"> <img src="../img/team_img/edgm.png"> <img src="../img/team_img/estar.png"> <img src="../img/team_img/gk.png"> <img src="../img/team_img/xq.png"> <img src="../img/team_img/ytg.png"> <img src="../img/team_img/wf.png"> </div>
    <div id="w">
      <p> 此次出征KPL春季赛的12支战队是：AG超玩会、AS仙阁、eStar、GK、JC、QG.HAPPY、sViper、WF、XQ、YTG</p>
    </div>
    <div class="clear"></div>
  </div>
  <div id="m">
    <h5>
      <li>奖励介绍</li>
    </h5>
    <p> 《王者荣耀》官方对外公布了马上就要在2016年9月17日开战的《王者荣耀》KPL职业联赛的总奖金，这一次的KPL职业联赛，腾讯方面可谓是下了血本，总奖金高达185万，也创下了移动电竞赛事奖金的新的记录!要知道，就算是举办了四年的LOL联赛，目前冠军的奖金池也就是150万，而《王者荣耀》KPL联赛一上来第一届的冠军奖金就高达80万，也可谓是史无前例了!</p>
    <p> 2016年度，问鼎总决赛的冠军战队将获得800000人民币奖金，亚军战队将获得400000人民币奖金，季军战队将获得200000人民币奖金，殿军战队将获得150000人民币奖金，第5及第6名的战队将获得100000人民币奖金，第7及第8名的战队将获得50000人民币。</p>
    <p>2017年王者荣耀职业联赛春季赛，问鼎总决赛的冠军战队将获得1000000人民币奖金，亚军战队将获得500000人民币奖金，季军及殿军战队将获得200000人民币奖金，第5及第8名的战队将获得75000人民币奖金，合计220万（税前）。</p>
  </div>
</div>
<div id="foot">
  <div id="chaolianjie">
    <h4>友情链接</h4>
    <a href="http://pvp.qq.com/">游戏官网</a> <a href="http://pvp.qq.com/history/">文化中心</a> <a href="#">加入我们</a> <a href="#">作者主页</a> </div>
  <div id="footer">
    <p>Copyright ©2017 1702软件作业. All rights reserved. 45号刘永江制作</p>
  </div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*--------大框架--------*/
* {
    margin: 0;
    padding: 0;
}
body {
    background-image:url(../img/background_img/赛事背景.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #FFFFFF;
    font-family: "微软雅黑";
}
h1 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
    border-radius: 10px 10px 0 0;
}
h3 {
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
    color: #686868;
}
h5 {
    background-color: #423468;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0 10px 20px;
}
li {
    list-style-type: square;
}
.clear {
    clear: both;
}
/*--------导航样式--------*/

#headside {
    margin: 0 auto;
    width: 960px;
    margin-bottom: 20px;
    margin-top: 475px;
}
#main-nav {
    background-color: rgba(48,38,77,1);
    border-radius: 10px;
}
#main-nav ul {
    list-style-type: none;
    padding: 10px 0 15px 10px;
    text-align: center;
}
#main-nav li {
    display: inline;
    margin: 0 65px 0 20px;
}
#main-nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 28px;
    padding: 10px 10px 10px 10px;
}
#main-nav a:hover {
    background-color: #FFFFFF;
    padding: 5px 10px 10px 10px;
    border-radius: 10px;
    color: #423468;
}
/*--------页脚样式--------*/
/*----超链接样式----*/
#chaolianjie {
    margin-top: 50px;
    padding: 20px 0;
    background-color: #333;
    overflow: hidden;
    padding: 20px 300px 20px 300px;
}
#chaolianjie h4 {
    color: #AAAAAA;
    border-bottom: 1px #444 solid;
    height: 24px;
    overflow: hidden;
    font-size: 14px;
    margin-left: 10px;
}
#chaolianjie a {
    line-height: 24px;
    padding: 0 10px;
    font-size: 12px;
    color: #777;
    word-wrap: break-word;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}
/*----footer----*/
#footer {
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: #252525;
    padding: 25px 0 0;
}
#footer p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
}
/*--------主体--------*/
#wrapper {
    margin: 0 auto;
    width: 960px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding-bottom: 30px;
}
#logo img {
    width: 700px;
    margin-left: 120px;
    margin-top: 20px;
    margin-bottom: -80px;
}
#logo p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
    width: 800px;
    margin-left: 70px;
}
.img img {
    width: 45px;
    float: left;
    margin: 50px 10px 20px 30px;
}
#w p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
    width: 850px;
    margin-left: 40px;
    margin-top: 200px;
    margin-bottom: 50px;
}
#m h5 {
    margin-bottom: 50px;
}
#m p {
    text-align: center;
    line-height: 20px;
    color: #4f4f4f;
    padding-bottom: 25px;
    width: 850px;
    margin-left: 40px;
    margin-top: 30px;
    margin-bottom: 15px;
}

子页面4代码附样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>精彩视频</title>
<link type="text/css" rel="stylesheet"  href="../style/2style.css">
<link type="text/css" rel="stylesheet" href="../style/大框架.css">
</head>

<body>
<!--导航栏-->
<div id="headside">
  <div id="main-nav">
    <ul>
      <li><a href="游戏攻略.html" target="_blank"><b>游戏攻略</b></a></li>
      <li><a href="精彩视频.html" target="_blank"><b>精彩视频</b></a></li>
      <li><a href="赛事介绍.html" target="_blank"><b>赛事介绍</b></a></li>
      <li><a href="游戏下载.html" target="_blank"><b>游戏下载</b></a></li>
    </ul>
  </div>
</div>
<div id="wrapper">
  <h1>
    <li>视频中心</li>
  </h1>
  <div id="head">
    <ul class="u1">
      <li class="l1"><b>职业视频</b></li>
      <li>坦克视频</li>
      <li>法师视频</li>
      <li>战士视频</li>
      <li>刺客视频</li>
      <li>射手视频</li>
      <li>辅助视频</li>
    </ul>
    <ul class="u2">
      <li class="l1"><b>热门解说</b></li>
      <li>美人鱼头</li>
      <li>月爱解说</li>
      <li>瓶子解说</li>
      <li>九天解说</li>
      <li>筱妖解说</li>
      <li>klaus解说</li>
      <li>轻声轻语</li>
      <li>嗨氏解说</li>
      <li>Bobo解说</li>
    </ul>
    <ul class="u3">
      <li class="l1"><b>热门栏目</b></li>
      <li>鱼嘴滑舌</li>
      <li>欢乐王者</li>
      <li>立即开车</li>
      <li>英雄学院</li>
      <li>王者女叫兽</li>
      <li>王者最前线</li>
      <li>荣耀大拷问</li>
      <li>跟我上王者</li>
    </ul>
  </div>
  <div class="clear"></div>
  <div id="vimg"> <img class="jpg" src="../img/video_img/1.jpg"><img class="jpg" src="../img/video_img/2.jpg"><img class="jpg" src="../img/video_img/3.jpg"><img class="jpg" src="../img/video_img/4.jpg"><img class="jpg" src="../img/video_img/5.jpg"> <img class="jpg" src="../img/video_img/6.jpg"><img class="jpg" src="../img/video_img/7.jpg"><img class="jpg" src="../img/video_img/8.jpg"><img class="jpg" src="../img/video_img/9.jpg"><img class="jpg" src="../img/video_img/10.jpg"> <img class="jpg" src="../img/video_img/11.jpg"><img class="jpg" src="../img/video_img/12.jpg"><img class="jpg" src="../img/video_img/13.jpg"><img class="jpg" src="../img/video_img/14.jpg"><img class="jpg" src="../img/video_img/15.jpg"> </div>
</div>
<div id="foot">
  <div id="chaolianjie">
    <h4>友情链接</h4>
    <a href="http://pvp.qq.com/">游戏官网</a> <a href="http://pvp.qq.com/history/">文化中心</a> <a href="#">加入我们</a> <a href="#">作者主页</a> </div>
  <div id="footer">
    <p>Copyright ©2017 1702软件作业. All rights reserved. 45号刘永江制作</p>
  </div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body {
    background-image: url(../img/background_img/c.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;
    font-family: "微软雅黑";
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding-bottom: 30px;
}
/*--------头部样式--------*/
#head {
    font-size: 14px;
    padding-top: 20px
}
#head ul {
    list-style-type: none;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}
#head li {
    text-decoration: none;
    display: inline;
    margin-left: 10px;
}
.l1 {
    border: 1px solid #423468;
    background-color: #423468;
    color: #FFFFFF;
    padding: 2px 5px 2px 5px;
}
.u1 {
    float: left;
    width: 940px;
}
.u2 {
    float: left;
    width: 940px;
}
.u3 {
    float: left;
    width: 940px;
}
/*--------视频简略图样式--------*/
#vimg {
    width: 900px;
    margin: 0 auto;
    margin-top: 20px;
}
.jpg {
    width: 165px;
margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
}

代码完。

总结：
第一次自己写静态的网页，是大一上学期的期末作业。

AD_ando

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
2017.12.20 静态网页小实战

时间：2017.12.20 地点：武汉-学校项目类型：静态网页-王者荣耀游戏相关网页主页面html代码：&amp;lt;!doctype html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;&amp;lt;title&amp;gt;刘永江作业主页
复制链接

扫一扫