時(shí)間：2023-10-16 13:24:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-16 13:24:02 來源：網(wǎng)站運(yùn)營
用DIV+CSS技術(shù)設(shè)計(jì)的個(gè)人網(wǎng)頁（web前端期末網(wǎng)頁制作課作業(yè)）HTML+CSS+JS網(wǎng)頁設(shè)計(jì)期末課程大作業(yè) web前端開發(fā)技術(shù) web課程設(shè)計(jì) 網(wǎng)頁規(guī)劃與設(shè)計(jì)：HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
在線咨詢
<!DOCTYPE html><html><head><link href="css/all.css" rel="stylesheet" media="all" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><div class="banner"><img src="images/src=http___inews.gtimg.com_newsapp_bt_0_13944000143_1000.jpg&refer=http___inews.gtimg.webp"></div><nav class="menu"> <ul class="center"> <li><a href="index.html">網(wǎng)站首頁</a></li> <li><a href="juesejieshao.html">人物介紹</a></li> <li><a href="juqingjieshao.html">劇情介紹</a></li> <li><a href="jingcaitupian.html">欣賞</a></li> </ul></nav><div class="content"> <div class="mart"> <div class="bar">圖片</div> <div class="pics scrollleft"> <ul> <li> <p><img src="images/u=1338899499,4277287823&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1501368123,2240755188&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1568150103,216963363&fm=253&fmt=auto&app=138&f=JPG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1673619099,3744613674&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1966880367,2494314778&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=223462742,2583369638&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=2795321423,2235180093&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=3261703896,2491216324&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=3704132047,3084592864&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> </ul> </div> <div class="clear"></div> <div class="bar">基本信息</div> <div class="pad"> <p>鎧甲勇士，電視劇《鎧甲勇士》系列中的召喚人合體鎧甲的總稱。一般指為保護(hù)地球合體鎧甲與邪惡力量進(jìn)行戰(zhàn)斗的特?cái)z英雄。</p> <p> </p> <div> 第一部中鎧甲會根據(jù)召喚者的所有綜合能力而發(fā)揮出不同的威力，所以召喚者越強(qiáng)，鎧甲的威力便越強(qiáng)。每套光影鎧甲都有著一定的能量儲備，當(dāng)光影鎧甲能量耗盡時(shí)，胸口的信號燈便會閃爍起來。</div> <p>系列續(xù)作《BORUTO -火影新世代- 》2017年4月播出。 </p> <p><br> 第二部中鎧甲來自阿瑞斯星球，會根據(jù)召喚者體內(nèi)的，“精”、“氣”、“神”所結(jié)合而成的”意能“而發(fā)揮鎧甲的威力，意能越強(qiáng)則所發(fā)揮的鎧甲威力就越強(qiáng)。意能不足時(shí)就會解除鎧甲，當(dāng)戰(zhàn)斗意能累計(jì)到一定程度時(shí)便可進(jìn)行地獄升級為激斗態(tài)。升級后的鎧甲在武器，力量，速度，防御等會進(jìn)行全方面增強(qiáng)，鎧甲威力也會更加強(qiáng)大。召喚鎧甲需要日月星三奇基因者，簽鎧甲契約。<br data-filtered="filtered"> <br data-filtered="filtered"> </p> </div> </div></div><footer class="end"> <p>網(wǎng)頁底部</p></footer></body></html>@charset "utf-8";/* CSS Document */ul,li,p { padding: 0; margin: 0; list-style: none}a { text-decoration: none; color: #000}html{ background:#ccc}body { width: 1200px; margin: 0 auto; line-height:30px; font-size:16px; background-color: #fff;}.clear { clear: both}.menu li { list-style: none; width: 235px !important;}.logo { position: absolute; top: 50px; width: 250px; height: 100px; margin-left: 40px}.banner { position: relative; height: 530px;}.banner img { width: 100%; height: 100%;}.menu { width: 100%; text-align: center; float: left; background: #000; margin-bottom:20px;}.menu:after{ content:''; display:block; clear:both}.menu li a { color: #fff;padding: 15px 0px; display:block}.menu li { float: left; margin: 2px; background: #666; padding:0 30px; width: 136px}.menu li:hover{ background:#999966}.right { float: right; width: 660px; padding: 20px}.left { min-height: 300px; float: left; width: 260px; padding: 20px}.content { background: #fff; width: 100%; clear:both}.btn{ background:#996666; border:none; color:#fff}.end { clear: both; background: #333; color: #fff; padding: 30px 0; text-align: center;}.produce img { margin: 0 20px 20px 0}.produce { line-height: 30px}.pad { padding: 20px; display: block}.pics p { margin: 1px; text-align: center}.imglist { width: 840px; margin: 0 auto}.imglist li { float: left; width: 400px; margin: 10px; text-align: center}.scrollleft { margin: 0 30px}.scrollleft li { float: left; width:33.33%}.scrollleft li img{}.news li { padding: 5px;}.title { text-align: center; color: #F00; padding: 10px}.fl { float: left}.js div { width: 100%; clear: both; margin-bottom: 20px; float: left}.js div img { float: right; border:#000 dashed 1px; margin-right: 20px}.msg>div { padding: 10px}.vid{ float:right; width:300px; height:200px; padding:30px 0; line-height:50px; font-size:24px; margin-right:20px; color:#fff; float:right ; background:#000; text-align:center}.vid img{ width:100px; border-radius:100px; margin:0 auto }.bar { border: #000 solid 1px; margin: 20px; font-size:20px; clear: both; color: #000; font-weight: bold; padding: 5px}.pad-two { color: #000;}.pad-two p { color: #000;}.pad-two img { width: 250px;}.box1sa { width: 400px; margin: 0 auto;}.box1sa label { display: block; text-align: left; font-size: 16px; color: #000000;}.box1sa input{ width: 100%; height: 40px; margin: 30px 0;}.box1sa textarea{ width: 100%; height:200px; margin: 30px 0;}請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：設(shè)計(jì),作業(yè),技術(shù)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
