時間：2023-09-21 03:36:01 | 來源：網(wǎng)站運營
時間：2023-09-21 03:36:01 來源：網(wǎng)站運營
學生動漫網(wǎng)頁設計模板下載 海綿寶寶大學生HTML網(wǎng)頁制作作品 簡單漫畫網(wǎng)頁設計成品 dreamweaver學生網(wǎng)站模板 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁設計與制作代碼：HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網(wǎng)站并將其轉換為代碼的過程來實踐設計。
在線咨詢
<!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"> <!--頭部--> <header> <ul class="nav clearfix"> <li><a href="index.html">首頁</a></li> <li><a href="juqing.html">劇情簡介</a></li> <li><a href="juese.html">角色介紹</a></li> <li><a href="tupian.html">圖片鑒賞</a></li> <li><a href="jingchai.html">精彩片段</a></li> </ul> </header> <div class="banner"> <img src="images/banner_1.jpg"/> </div> <!--內(nèi)容--> <div class="con"> <div class="top clearfix"> <div class="text"> <h2>海綿寶寶</h2> <P>《海綿寶寶》（SpongeBob SquarePants）是一部由舍曼·科恩、沃特·杜赫、山姆·亨德森、保羅·蒂比特等導演，湯姆·肯尼、比爾·法格巴克、羅杰·布帕斯等配音的美國喜劇動畫，于1999年7月17日在尼克國際兒童頻道開播 。 <br> 《海綿寶寶》的故事情節(jié)主要圍繞著主角海綿寶寶和他的好朋友派大星、鄰居章魚哥、上司蟹老板等人展開，場景設定于太平洋海底，一座被稱為比奇堡的城市。2005年1月30日，該片榮獲第32屆安妮獎授予的“最佳TV動畫制作”獎 。 <br> 這部動畫除了固定描繪的卡通場景與人物之外，也會穿插一些真實的物件或人物：例如曾出演《海灘游俠》與《霹靂游俠》的大衛(wèi)·哈塞爾霍夫，以本人的身份出演了幾集。但海綿寶寶卡通的內(nèi)容基本上與海洋知識無關，甚至夸大到完全不合乎科學與常識，例如海底生火、海底沖澡等，劇集內(nèi)容也會時不時的嘲笑精致藝術和章魚哥的勞工權益想法。</P> </div> <div class="pic"> <img src="images/img_03.jpg"/> </div> </div> <div class="tupian"> <div class="title"> <h2>圖片鑒賞</h2> </div> <ul class="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> </ul> </div> </div> <!--底部--> <footer> <p>海綿寶寶</p> </footer></div></body></html>/*通用類*/* { margin: 0; padding: 0;}body { margin: 0 auto; font-size: 14px; background: #fff4e8; 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;}div.clear { font: 0px Arial; line-height: 0; height: 0; overflow: hidden; clear: both;}.clearfix::after { content: ""; display: block; clear: both;}/*wrapin 主體容器寬度*/.wrapin { width: 1000px; margin-left: auto; margin-right: auto;}header { height: 50px; background: #feda3b;}.nav li { line-height: 50px; float: left; width: 20%; text-align: center; font-size: 16px;}.nav li a { color: #333;}.banner { display: block;}.banner img { width: 100%; display: block;}.con { padding: 15px; background: #fff;}.top .text { float: left; width: 60%; line-height: 26px;}.top .pic { float: right; width: 38%; margin-top: 20px;}.top .pic img { width: 100%;}.title { padding: 20px 0;}.title h2 { color: #6b4c15;}.tupian ul { margin: 0 -15px;}.tupian ul li { width: 33.33%; float: left; padding: 15px; box-sizing: border-box;}.tupian ul li img { width: 100%; height: 230px; object-fit: cover;}footer { background: #feda3b; text-align: center; line-height: 50px;}.juese li { position: relative; height: 200px;}.juese li .pic { height: 160px; width: 160px; position: absolute; left: 0; top: 20px; border-radius:160px; overflow:hidden; border:1px solid #333;}.juese li .pic img { height: 100%; width: 100%; object-fit:cover;}.juese li .text{ margin-left:180px; padding-top:30px;}.juese li .text h2{ margin-bottom:10px;}.juese li .text p{ line-height:26px;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！??【關注我| 獲取更多源碼 | 優(yōu)質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！關鍵詞：設計,作品,大學生,簡單,漫畫,模板,學生
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
