2017.12.20 静态网页小实战
时间：2017.12.20
地点：武汉-学校
项目类型：静态网页-王者荣耀游戏相关网页
制作时间：差不多半个月
主页面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>
<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> 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>
<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>精彩CGli>
h1>
<video width="610" height="300" controls autoplay>
<source src="video/宣传片.mp4" type="video/mp4">
video>
div>
<div class="clear">div>
div>
div>
<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>
<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单挑胜率达到68li>
<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代码附样式：
<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>：565MBp>
<p><b>更新日期b>：2017.8.21p>
<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代码附样式：
<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>
<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代码附样式：
<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、YTGp>
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代码附样式：
<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;
}
代码完。
总结：
第一次自己写静态的网页，是大一上学期的期末作业。