HTML CSS 网页设计作业「动漫小站」
生活随笔
收集整理的這篇文章主要介紹了
HTML CSS 网页设计作业「动漫小站」
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML實例網頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。
文章目錄
- 一、網頁介紹
- 一、網頁效果
- 二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
- 三、個人總結
- 四、精彩推薦
一、網頁介紹
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<!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"><!--頭部--><div class="banner"><div class="box-1"><ul><li> <img src="images/banner_1.jpg"></img> </li><li> <img src="images/banner_2.jpg"></img> </li><li> <img src="images/banner_3.jpg"></img> </li><li> <img src="images/banner_4.jpg"></img> </li></ul></div><div class="box-2"><ul></ul></div><div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div></div><header><ul class="nav clearfix"><li><a href="index.html">首頁</a></li><li><a href="juqing.html">劇情故事</a></li><li><a href="tupian.html">精彩圖集</a></li><li><a href="jingchai.html">劇情解說</a></li><li><a href="lianxi.html">聯系我們</a></li></ul></header><!--內容--><div class="con"><div class="top clearfix"><div class="text"><h2>你的名字。</h2><P>《你的名字?！肥怯尚潞Ｕ\執導，由神木隆之介、上白石萌音擔任主要配音的一部原創日本動畫電影。<br><br>故事發生的地點是在每千年回歸一次的彗星造訪過一個月之前，日本飛驒市的鄉下小町糸守町。在這里女高中生三葉每天都過著憂郁的生活，而她煩惱的不光有擔任町長的父親所舉行的選舉運動，還有家傳神社的古老習俗。在這個小小的町，周圍都只是些愛瞎操心的老人。為此三葉對于大都市充滿了憧憬。</P></div><div class="pic"> <img src="images/15.jpg"/> </div></div><div class="title"><h2>影片評價</h2></div><div class="pinglun"><div class="text">《你的名字。》基于新海的原創劇本，電影圍繞三葉，一個女孩不樂意住在農村，瀧，一個東京的高中生，是一個建筑迷。這兩個人有著命中注定的聯系，但電影以不同尋常的方式實現的，至少可以說：他們在夢里交換著身體。新海誠的電影還展示了青春期真實的尷尬和窘迫，當三葉變為瀧時，發現自己使用女性的“我”的稱呼時朋友表現出的驚訝等，這笑料顯得十分可愛，當然這樣的情景也再其他電視劇中出現過。然而這部電影關于的跨性別，是新海誠的獨特之處，因為他們有著奇特的處境和陌生的渴望。他們互相留下筆記，甚至爭吵。當然，一旦事情來到了這個階段，就知道愛會綻放。但故事神秘之處是在故事開始前一個月的天空中出現一千年一次彗星。也預示著中心人物關系的萌芽。劇情需要很多的曲折，但把焦點集中在三葉和瀧各自的命運。配角人物，如美紀，瀧暗戀的對象，和三葉的祖母一葉、妹妹四葉，主要是為突出兩主人公特點和困境。但作為最高潮的部分，天空中爆發出耀眼的顏色和光，《你的名字。》就像夢幾乎每個人覺得戀人太完美，相遇太短，結局太突然，欣喜溶解在稀薄的空氣以保持清醒的生活。但仍有一些東西保留下來——記憶，盡管如此微弱?！赌愕拿??！返玫降氖且环N痛苦的悲情和超自然美的交融，難以忘懷。</div></div><div class="tupian"><div class="title"><h2>精彩圖集</h2></div><ul class="clearfix"><li><img src="images/8.jpg"/></li><li><img src="images/14.jpg"/></li><li><img src="images/16.jpg"/></li></ul></div></div><!--底部--><footer><p>你的名字</p></footer> </div> <script type="text/javascript" src="js/js.js"></script> <audio controls="controls" autoplay="autoplay" hidden><source src="audio/song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html>2.CSS代碼
/*通用類*/ * {margin: 0;padding: 0; } body {margin: 0 auto;font-size: 14px;background: url(../images/13.jpg) no-repeat fixed;color: #333;position: relative;padding-top: 50px;padding-bottom: 50px; } 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: #fff;border-bottom: 1px solid #ccc; } .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; } .banner {width: 100%;height: 560px;overflow: hidden;position: relative; } .box-1 ul { } .box-1 ul li {width: 100;height: 560px;position: relative;overflow: hidden; } .box-1 ul li img {display: block;width: 100%;height: 100%; } .box-1 ul li h2 {position: absolute;left: 0;bottom: 0;height: 40px;width: 100%;background: rgba(125,125,120,.4);text-indent: 2em;padding-right: 500px;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-weight: normal;color: ghostwhite } .box-2 {position: absolute;right: 10px;bottom: 14px; } .box-2 ul li {float: left;width: 12px;height: 12px;overflow: hidden;margin: 0 5px;border-radius: 50%;background: rgba(0,0,0,0.8);text-indent: 100px;cursor: pointer; } .box-2 ul .on {background:#FF9933; } .box-3 span {position: absolute;color: rgba(255,255,255,0.1);background: rgba(255,255,255,0.1);width: 50px;height: 80px;top: 50%;font-family: "宋體";line-height: 80px;font-size: 60px;margin-top: -40px;border-radius: 5px;text-align: center;cursor: pointer; } .box-3 .prev {left: 10px; } .box-3 .next {right: 10px; } .box-3 span::selection {background: transparent; } .box-3 span:hover {background: rgba(255,255,255,.5);color: rgba(255,255,255,1) } .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 {font-size: 20px;color: #333; } .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: 200px;object-fit: cover;}.pinglun {line-height: 26px;color: #333;font-size: 14px;padding-bottom: 30px; } footer {background: #282828;text-align: center;color: #fff;line-height: 50px; } form {width: 460px;float: right; } form p {margin: 10px 0;font-size: 16px;color: #333; } form .phone {width: 100%;height: 36px;padding: 0 10px;box-sizing: border-box;border: 1px solid #ccc; } form textarea {width: 100%;height: 100px; } form .but {background: #fff;border: 1px solid #ccc;color: #333;margin: 20px auto;display: block;width: 200px;height: 36px; } .lx_pic {float: left;width: 460px;height: 360px; } .lx_pic img {object-fit: cover;height: 100%;width: 100%; }三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
四、精彩推薦
1.看到這里了就 【點贊收藏博文】 三連支持下吧，你的支持是我創作的動力, 【觀注作者 |獲取更多源碼| 優質文章】 。
2.關注我帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題可以相互學習交流
總結
以上是生活随笔為你收集整理的HTML CSS 网页设计作业「动漫小站」的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django配置Bootstrap, j
- 下一篇： E-R概念模型