時(shí)間：2023-10-14 03:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-14 03:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
游戲網(wǎng)頁(yè)設(shè)計(jì)成品 學(xué)校班級(jí)網(wǎng)頁(yè)制作模板 大學(xué)生靜態(tài)HTML網(wǎng)頁(yè)源碼 dreamweaver網(wǎng)頁(yè)作業(yè) 簡(jiǎn)單網(wǎng)頁(yè)課程成品：HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
在線咨詢
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>夢(mèng)幻西游</title> </head> <body class="body"> <header> <div class="main clearfix"> <div class="logo"> <img src="images/logo.png" width="200"> </div> <nav> <ul class="clearfix"> <li><a href="index.html">首頁(yè)</a></li> <li><a href="tupian.html">游戲截圖</a></li> <li><a href="jiaose.html">游戲角色</a></li> <li><a href="denglu.html">登錄</a></li> </ul> </nav> </div> </header> <div class="main"> <div class="kuai1"> <img src="images/1.png"> </div> <div class="kuai2 clearfix"> <div class="zou"> <img src="images/ttt.jpg"> </div> <div class="you"> <h3>夢(mèng)幻西游</h3> <p> 《夢(mèng)幻西游》將中國(guó)古典建筑的凝厚與Q版的意趣風(fēng)格糅合在一起，將游戲場(chǎng)景打造成一幅“游戲畫(huà)卷”。游戲中所有人物的3D造型都顯得異常的圓潤(rùn)。相比起韓國(guó)網(wǎng)絡(luò)游戲慣用的場(chǎng)景貼圖手法而造成的視覺(jué)單調(diào)而言，《夢(mèng)幻西游》中所有場(chǎng)景都由美工手繪完成。無(wú)論是干澀少雨的沙漠，還是濕潤(rùn)凝重的綠洲，在游戲中都栩栩如生。 《夢(mèng)幻西游》中的版圖非常的龐大，一共有四個(gè)大洲、五組迷宮及十二個(gè)門(mén)派以供玩家來(lái)探險(xiǎn)，每一個(gè)地方都有獨(dú)特的特色。有一望無(wú)垠的邊境沙漠、盛世大唐的長(zhǎng)安城、終年冰雪覆蓋的北俱蘆洲、陰森詭異的陰曹地府、波濤洶涌的東海龍宮等，各個(gè)地方的建筑均獨(dú)具特色，并都有其不同的文化韻味。 《夢(mèng)幻西游》的世界中仙、人、魔三族各有傳承。為了讓自己的門(mén)派弟子橫行天下，各派師傅都不吝一己之私，紛紛將壓箱底的功夫拿出來(lái)教育門(mén)徒。同時(shí)《夢(mèng)幻西游》中首次鮮明地引入了門(mén)派克制系統(tǒng)，三族十二派相互克制，每個(gè)門(mén)派都有一招必殺技來(lái)克制另外一個(gè)門(mén)派，環(huán)環(huán)相扣，成為了一個(gè)結(jié)構(gòu)嚴(yán)謹(jǐn)?shù)摹伴T(mén)派克制鏈”，從根本上杜絕了一派過(guò)于壯大的可能性。 </p> </div> </div> <div class="kuai3"> <h3 class="title">游戲玩法</h3> <ul class="clearfix"> <li> <div class="pic"> <img src="images/d1.jpg" > </div> <div class="text"> <h3>東海秘境</h3> </div> </li> <li> <div class="pic"> <img src="images/d2.jpg" > </div> <div class="text"> <h3>時(shí)尚外觀</h3> </div> </li> <li> <div class="pic"> <img src="images/d3.jpg" > </div> <div class="text"> <h3>親密社交</h3> </div> </li> <li> <div class="pic"> <img src="images/d4.jpg" > </div> <div class="text"> <h3>策略PK</h3> </div> </li> </ul> </div> </div> <footer> 夢(mèng)幻西游 </footer> </body></html>/*通用類(lèi)*/* { margin: 0; padding: 0;}body { margin: 0 auto; font-size: 14px; background: #fff; color: #333; position: relative;}.body { background: url(../images/bg.jpg) no-repeat; background-size: 100% cover;}img { border: none;}a { cursor: pointer; color: #333; text-decoration: none; outline: none;}ul { list-style-type: none;}em { font-style: normal;}.lt { float: left;}.rt { float: right;}div.clear { font: 0px Arial; line-height: 0; height: 0; overflow: hidden; clear: both;}.clearfix::after { content: ""; display: block; clear: both;}.main { width: 1200px; margin-left: auto; margin-right: auto;}.logo { float: left;}header { padding: 10px 0; background-color: rgba(255, 255, 255, .5);}nav { float: left; margin-left: 200px;}nav ul li { float: left; width: 200px; line-height: 100px;}nav ul li a { display: block; height: 100%; text-align: center; font-size: 20px; color: #346; font-weight: bold;}.kuai1 { text-align: center;}.kuai1 img { margin-top: 100px;}.kuai2 .zou { width: 50%; float: left;}.kuai2 .zou img { width: 100%;}.kuai2 .you { width: 50%; float: left; padding: 0 20px; box-sizing: border-box;}.kuai2 .you h3 { font-size: 30px; text-align: center; color: #334466; padding-bottom: 20px;}.kuai2 .you p { font-size: 12px; line-height: 26px;}.title { text-align: center; font-size: 50px; font-family: "楷體"; text-align: center; padding: 30px 0;}.kuai3 ul { margin-left: -10px; margin-right: -10px;}.kuai3 ul li { width: 50%; float: left; margin-bottom: 10px; padding: 0 10px; box-sizing: border-box;}.kuai3 ul li img { width: 100%; height: 300px;}.kuai3 ul li .text { padding: 20px 0; text-align: center; font-size: 16px; color: #334466;}footer { width: 100%; height: 60px; background-color: #334466; text-align: center; line-height: 60px; color: #fff; font-size: 16px;}.head { position: absolute; top: 0; width: 100%; left: 0;}.tupian ul { margin-left: -10px; margin-right: -10px; padding-top: 30px;}.tupian ul li { padding: 0 10px; width: 33.33%; float: left; box-sizing: border-box; margin-bottom: 30px;}.tupian ul li img { width: 100%; height: 300px; display: block; object-fit: cover; border-radius: 30px;}.xiangqing ul li { width: 100%; height: 400px; background: url(../images/kuai2.png) no-repeat center; background-size: 100% auto; position: relative; margin: 50px 0;}.xiangqing ul li .text { padding: 60px 60px; width: 100%; box-sizing: border-box;}.xiangqing ul li .text a { display: inline-block; width: 110px; line-height: 30px; height: 30px; margin-right: 30px; background: url(../images/bg.png) no-repeat center; background-size: 100% 100%; text-align: center; color: #fff; font-size: 14px;}.xiangqing ul li h3 { text-align: left; font-size: 70px; margin-left: 450px; font-family: "楷體";}.xiangqing ul li img { position: absolute; top: 0; right: 0; width: 330px;}/**/.smart-green { margin-left: auto; margin-right: auto; max-width: 500px; background: #F8F8F8; padding: 30px 30px 20px 30px; font: 12px Arial, Helvetica, sans-serif; color: #666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}.smart-green h1 { font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 20px 0px 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background: #334466; text-shadow: 1px 1px 1px #949494; border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-bottom: 1px solid #89AF4C; }.smart-green h1>span { display: block; font-size: 11px; color: #FFF;}.smart-green label { display: block; margin: 0px 0px 5px;}.smart-green label>span { float: left; margin-top: 10px; color: #5E5E5E;}.smart-green input[type="text"],.smart-green input[type="email"],.smart-green textarea,.smart-green select { color: #555; height: 30px; line-height: 15px; width: 100%; padding: 0px 0px 0px 10px; margin-top: 2px; border: 1px solid #E5E5E5; background: #FBFBFB; outline: 0; -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); font: normal 14px/14px Arial, Helvetica, sans-serif;}.smart-green textarea { height: 100px; padding-top: 10px;}.smart-green .button { background-color: #334466; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-border-radius: 5px; border: none; padding: 10px 25px 10px 25px; color: #FFF; text-shadow: 1px 1px 1px #949494;}.smart-green .button:hover { background-color: #334466;}.error-msg { color: red; margin-top: 10px;}.success-msg { color: #80A24A; margin-top: 10px; margin-bottom: 10px;}.liuyan{ margin: 50px 0;}/**/.xq .left{ width: 50%; float: left;}.xq .left .text{ width: 50%; float: left;}.xq .text h3{ text-align: center; padding: 50px 0; font-size: 40px; font-weight: bold; color: #FF0000;}.xq .text img{ margin: 0 auto; display: block;}.xq .text p{ line-height: 26px; font-size: 18px; text-indent: 2rem; margin-top: 50px;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：靜態(tài),大學(xué)生,模板,成品,設(shè)計(jì),學(xué)校,游戲,班級(jí)
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
