時(shí)間：2023-10-15 13:36:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-15 13:36:02 來源：網(wǎng)站運(yùn)營
使用HBuilder制作一個(gè)簡單的HTML5動(dòng)漫網(wǎng)頁——小林家的龍女仆 HTML+CSS學(xué)生個(gè)人網(wǎng)頁制作 學(xué)生靜態(tài)HTML網(wǎng)頁源碼 dreamweaver網(wǎng)頁作業(yè) 簡單網(wǎng)頁課程成品：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><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="css/style.css" /><title></title></head><body><div class="wrapin"> <!--頭部--> <a href="#" class="logo"><img src="images/logo.png"/> </a> <header> <ul class="nav"> <li><a href="index.html">首頁</a></li> <li><a href="juqing.html">劇情故事</a></li> <li><a href="tupian.html">圖片鑒賞</a></li> <li><a href="lianxi.html">聯(lián)系我們</a></li> </ul> </header> <div class="banner"><img src="images/banner_02.jpg"/></div> <!--內(nèi)容--> <div class="con"> <div class="title"> <h2>小林家的龍女仆</h2> </div> <div class="text">《小林家的龍女仆》是由酷教信徒創(chuàng)作的漫畫作品，于2013年5月在《月刊Action》上開始連載。單行本由雙葉社出版。 2016年5月宣布動(dòng)畫化。該作品講述主人公·白領(lǐng)小林居住在一個(gè)公寓當(dāng)中，在一次醉酒后無意走到山里救了被寶劍刺中的龍托爾的命，后來天龍·托爾為了報(bào)答小林前往了小林的家里成為了女仆并開始了跟她的同居生活。2018年8月16日，《小林家的龍女仆》與手游《牧羊人之心》達(dá)成聯(lián)動(dòng)，其中康娜、托爾、露科亞、艾露瑪以原本的形象進(jìn)入游戲成為游戲中魔物娘中的一員，小林則作為劇情人物出現(xiàn) 。</div> <div class="top"> <ul class="pic_top clearfix"> <li><img src="images/img_03.jpg"/></li> <li><img src="images/img_04.jpg"/></li> <li><img src="images/img_05.jpg"/></li> <li><img src="images/img_06.jpg"/></li> <li><img src="images/img_07.jpg"/></li> <li><img src="images/img_08.jpg"/></li> </ul> <div class="title"> <h2>分集劇情</h2> </div> <div class="index"> <h3>第1集</h3> <p>早上，正要去公司的時(shí)候卻發(fā)現(xiàn)了只龍。在茫然的小林的眼前，那只龍變身為有角有尾巴穿著女仆裝的美少女。那個(gè)名為托爾的龍姑娘提出“從今天起讓我作為女仆工作吧！”不知何故而詢問起來，似乎昨晚喝醉的小林有邀請她到家中。小林以“沒打算雇人”拒絕她，但卻注意到了時(shí)間上班要遲到了。</p> <p><img src="images/img_12.jpg"/></p> <h3>第2集</h3> <p>正當(dāng)小林和托爾的共同生活親密起來時(shí)。小林和托爾一起出門買東西。親眼看到托爾與商店街的人們關(guān)系很好，托爾的社交能力之高而驚嘆。但是當(dāng)事人卻說“只是我隨便表現(xiàn)得親切一點(diǎn)”。看來還是無法理解人類的感情的樣子。在那樣一個(gè)假日，小林一人在家，有人來找人。一打開門只見那里有個(gè)帶著角和尾巴的幼女——！？</p> <p><img src="images/img_11.jpg"/></p> <h3>第3集</h3> <p>托爾除外康娜也住了進(jìn)來。雖然變得熱鬧起來挺好，但無奈三個(gè)人在小公寓里比較拘束。于是小林決定搬家。在搬家的地方叫上滝谷開聚會(huì)，然而托爾的熟人在洞窟居住的法夫納，和從太古來到這邊的世界居住的太古爾科亞，新的龍們來小林家拜訪……。</p> <p><img src="images/img_08.jpg"/></p> </div> </div> </div> <!--底部--> <footer>小林家的龍女仆 </footer></div></body></html>/*通用類*/* { margin: 0; padding: 0;}body { margin: 0 auto; font-size: 14px; background: #fff; color: #333; position: relative;}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;}.clearfix::after { content: ""; display: block; clear: both;}/*wrapin 主體容器寬度*/.wrapin { width: 1000px; margin-left: auto; margin-right: auto;}body { background: url(../images/bg.jpg) no-repeat top; background-size: cover;}.logo { width: 360px; margin: 10px 0; display: block;}.logo img { width: 100%;}header { height: 50px; background: #fab1ce;}.nav li { text-align: center; width: 25%; float: left; line-height: 50px;}.nav li:hover { background: #fb96be;}.nav li a { font-weight: bold; font-size: 16px; color: #fff;}.banner img { width: 100%; display: block;}.con { padding: 15px; background: #fff;}.title { padding: 10px 0; border-bottom: 3px solid #fab1ce;}.title h2 { color: #fab1ce;}.pic_top { margin: 10px 0; border: 3px solid #fab1ce;}.pic_top li { float: left; width: 16.66%;}.pic_top li img { width: 100%; display: block;}.index { margin: 30px 0; line-height: 26px; color: #fff; color: #333; font-size: 16px;}.text { margin: 10px 0; line-height: 26px; color: #fff; color: #333; font-size: 16px;}.index img { display: block; margin: 20px auto; width: 400px;}footer { line-height: 50px; text-align: center; color: #fff; background: #fab1ce;}.juqing { margin: 30px 0;}.juqing .pic { width: 300px; float: left;}.juqing .pic img { width: 100%;}.juqing .text { float: right; width: 640px;}.tipian { margin: 10px 0;}.tipian li { float: left; width: 25%; padding: 10px; box-sizing: border-box;}.tipian li img { width: 100%; height: 125px;}form { width: 400px; margin: 0 auto;}form p { margin: 10px 0; font-size: 16px; color: #333;}form .phone { width: 100%; height: 36px;}form textarea { width: 100%; height: 100px;}form .but { background:#fab1ce; border: none; color: #fff; margin: 20px auto; display: block; width: 200px; height:36px;}請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：學(xué)生,簡單,使用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
