2017.12.20 静态网页小实战
生活随笔
收集整理的這篇文章主要介紹了
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> </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">作為長安城中備受崇敬的占卜師，他對占卜對象的命運的所做的不只是預言，更是實際的操控。善于審時度勢的他，知道在戰場中誰是最值得輔佐的隊友，誰又是最應該擊破的敵人。在戰場上，他要能夠發現隊友中最銳利的矛，并輔助其變得更加銳利；或者找到最堅固的盾，輔助其變得更牢不可破?；蛘?#xff0c;挫敗對手的矛，擊破對手的盾。甚至，在必要時，犧牲自己的部分生命獲取巨大能量，挽救隊友，或者瞬間擊垮敵人。</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>在戰場上，他要能夠發現隊友中最銳利的矛，并輔助其變得更加銳利;或者找到對堅固的盾，輔助其變得更牢不可破?；蛘?#xff0c;挫敗對手的矛，擊破對手的盾。</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>夕陽西下的路邊，茶棚老板跟客人聊著八卦。“喲，劍客老兄，見識過很多厲害的人物吧?！薄拔矣龅降?#xff0c;好像都是些弱手。”“是嗎?哈哈，聽說武道大會可是高手如云，今年的冠軍……”“哦，那家伙已經掛了?！薄罢媸恰煊胁粶y風云?？瓤?#xff0c;東海島上出現了血族之王，據說他……”“徐福嗎?他也掛了?！薄鞍?#xff0c;扶桑，有個叫宮本武藏的……左手一把長刀，右手一把短劍，神擋殺神，魔擋殺魔……”“哦，那個家伙還是可以一戰的?！薄澳魬疬^?”</p><p>“打起來太無聊了?！薄罢?#xff0c;真的挑戰過!”“當然，我左手一把長刀，右手一把短劍……一直分不出輸贏，是不是很無聊?！薄澳悄笆前?#xff0c;我就是那個武藏。你還知道什么值得我挑戰的對手嗎?”“劍圣大人，只有大唐帝國，那里人才濟濟，一定有人能成為您可敬的對手?！薄按筇茊?正有此意前往?？墒恰薄翱墒?”“我迷路了……”“告訴你個秘密：我，是無敵的!”</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 静态网页小实战的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TL-WR886N密码JS加密
- 下一篇： 闪迪u盘不能识别好办法_闪迪u盘无法识别