2017.12.20 静态网页小实战

时间：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;
}

代码完。

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

2017.12.20 静态网页小实战相关推荐

静态网页爬虫实战（二）
以抽屉网为例,爬取该用户评论,并存入MongoDB数据库 """ 链接mongoDB后,导入数据 """import requests im ...
小米官网静态网页项目实战3
小米商城APP二维码下拉以及过渡效果结构 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
python爬取网页停止_Python爬虫之爬取静态网页
所谓网络爬虫,通俗的讲,就是通过向我们需要的URL发出http请求,获取该URL对应的http报文主体内容,之后提取该报文主体中我们所需要的信息.所以,想要学习python爬虫,需要具备一些http的 ...
Freemarker入门小案例（生成静态网页的其中一种方式）
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
『精品素材』20套免费的网页小图标素材下载
在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用.下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊. Free 16p ...
第二十八篇网页实战之静态网页爬取，四大案例，小说，书，图片等抓取操作
心得:不知道从什么时候开始,喜欢上了思考,完全可以把自己沉浸在自己的程序中,看着自己一点点的累积,慢慢的成长,证明这一天没有白白浪费掉,感谢还在认真的你. 自己在学习过程中总结出来的爬虫的过程: 1. ...
原！神静态网页布局详解，html+css布局实战，附详细代码
代码整体效果展示 1页面布局思路本次界面的布局主要采用定位流的方式来进行布局.因为界面具有很多透视效果,以及背景图片的重叠.接下来我将详细讲解布局第一层定位流: 素材: 此图片作为总体背景应该放在 ...
比德人工智能静态网页
文章目录前言一.比德人工静态网页二.部分代码展示 1.HTML5 2.CSS 前言主要是通过HTML5+CSS3+JS搭建的一个简易的静态的网页,还存在网页自适应问题,虽然不是很完美,但也是自 ...
Esp8266进阶之路10 【小实战下篇】Windows系统搭建8266的本地Mqtt服务器，局域网点亮一盏LED灯。(带Demo)
本系列博客学习由非官方人员半颗心脏潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 序号 SDK版本内容链接 1 nonos2.0 搭建 ...

2017.12.20 静态网页小实战

2017.12.20 静态网页小实战相关推荐

最新文章

热门文章