散文網(wǎng) » 生活 »日常 » 大三學生HTML個人網(wǎng)頁作業(yè)作品——電影動漫言葉之庭

大三學生HTML個人網(wǎng)頁作業(yè)作品——電影動漫言葉之庭

2022-12-30 23:36 作者:ChatGPT云炬學長 0人讀過 | 我要投稿

{"ops":[{"insert":"詳情介紹"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"HTML"},{"attributes":{"color":"#666666","link":"https://yunjunet.cn/tag/%e5%ae%9e%e4%be%8b"},"insert":"實例"},{"attributes":{"color":"#666666","link":"https://yunjunet.cn/tag/%e7%bd%91%e9%a1%b5"},"insert":"網(wǎng)頁"},{"attributes":{"color":"#666666"},"insert":"代碼, 本實例適合于初學HTML的同學。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"一、網(wǎng)頁介紹"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"insert":"1?"},{"attributes":{"bold":true},"insert":"網(wǎng)頁簡介"},{"insert":"：此作品為學生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"2."},{"attributes":{"bold":true},"insert":"網(wǎng)頁編輯"},{"insert":"：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如："},{"attributes":{"bold":true},"insert":"Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++"},{"insert":"?等任意"},{"attributes":{"color":"#666666","link":"https://yunjunet.cn/tag/html"},"insert":"html"},{"insert":"編輯軟件進行運行及修改編輯等操作）。"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"3."},{"attributes":{"bold":true},"insert":"知識應(yīng)用"},{"insert":"：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設(shè)計了Logo（源文件）所需的知識點。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"attributes":{"color":"#333333"},"insert":"一、網(wǎng)頁效果"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"class":"normal-img"},"insert":{"native-image":{"alt":"read-normal-img","url":"https://b2.sanwen.net/b_article/4d1a22151dbd1fcf62a139b97ffb259299e378c1.jpg","width":947,"height":2166,"size":699866,"status":"loaded"}}},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"二、代碼展示"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"1.HTML代碼"},{"attributes":{"align":"justify","header":3},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"代碼如下（示例）：以下僅展示部分代碼供參考~"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"言葉之庭"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

言葉之庭

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

首頁
角色介紹
幕后花絮
影片評價

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

言葉之庭簡介

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

《言葉之庭》是新海誠執(zhí)導的動畫電影，由入野自由，花澤香菜擔任配音。

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

該動漫主要講述的是一心想當制鞋師的高中生與神秘年長女性之間的愛情物語。故事源于萬葉集開篇的"孤悲"之戀，作品中透露出鞋、萬葉集、日本庭園、雨等因素。

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

影片于2013年5月31日在臺灣、香港、日本同步上映。

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

劇情介紹

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

“作品以"孤悲"來表達"戀"的主題，講述以鞋匠為目標的高中生高雄，在某個下著雨的早上從學校逃課出來，在日本庭院中描繪著鞋的草圖，在那里他與神秘的年長女性雪乃相遇了。在此以后兩人即使沒任何約定但都會心有靈犀地在下著綿綿細雨的日子再會，然而梅雨季節(jié)卻即將要結(jié)束了……
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"寧
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"電影《言葉之庭》劇照
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"電影《言葉之庭》劇照(11張)
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"生活在東京的15歲高中生秋月孝雄（入野自由配音），為了貼補家用常年奔走在學校和打工場所兩端，在家中照顧母親和哥哥的衣食起居不得閑暇。這一年的梅雨季節(jié)如約而至，走出電車的秋月決定逃課，盤桓來至位于東京中央的日本庭園。秋月在一處亭子內(nèi)坐下，用筆繪出他所設(shè)計的女鞋草圖以及他的夢想。此時此刻，亭子內(nèi)還有一名喝啤酒吃巧克力的職腸女性--27歲的雪野百香里（花澤香菜?配音）。
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"在之后的日子里，每值清晨時分，細雨綿綿，秋月和雪野便不約而同聚首這座亭子。他們漸漸熟稔，秋月談起自己志愿成為手工鞋匠的夢想，雪野也嘗試笨拙地做起了并不好吃的便當。現(xiàn)實生活中各自遭遇著種種困頓的他們，兩顆疲憊的心不知不覺相互吸引。
"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"仿佛突然進入了另一個世界一般，梅雨過后沒有止境的艷陽高照，秋月和雪野似乎也失去了逃課與逃班的理由，然而他們的故事并未就此結(jié)束……

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

電影片段

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

版權(quán)所有：言葉之庭

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"

"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":""},{"attributes":{"align":"justify"},"insert":"\n\n"},{"attributes":{"color":"#333333"},"insert":"2.CSS代碼"},{"attributes":{"align":"justify","header":3},"insert":"\n"},{"insert":"/*----------------------common-------------------------*/"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"*{ margin:0; padding:0; font-family:Microsoft YaHei;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".clear{ clear:both;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".fl{ float:left;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".fr{ float:right;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"img{ border:none;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"a{ text-decoration:none;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"a:hover{ text-decoration:underline;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"li{ list-style-type:none;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".ofh{overflow:hidden;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".center{ text-align:center;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".em{ text-indent:2em;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".p5{ padding:5px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".pl50{ padding-left:50px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"body{"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-attachment: fixed;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-color: #000;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-image: url(../images/bj.jpg);"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-repeat: no-repeat;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-position: center top;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"/*----------------------con-------------------------*/"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con{ width:960px; padding:20px; height:auto; margin:10px auto; background:#fff; background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"/*----------------head-----------------*/"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".head{ width:960px; height:auto; margin:auto;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".logo{ width:550px; height:60px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".logo h1{ font-size:36px; line-height:60px; color:#300; font-family:黑體;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav{"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? width: 960px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? height: 40px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? margin: 5px auto;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? background-color: #000;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? -moz-border-radius: 5px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? border-radius: 5px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav ul{ padding-left:10px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav li{ float:left; padding:5px 20px; }"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav li a{ font-size:20px; line-height:30px; color:#fff;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav li a:hover{ color:#fff; text-decoration:none;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav li:hover{ background-color:#f97255}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".nav li:hover a{ color:#fff;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".lunbo{ width:960px; height:350px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"/*----------------main-----------------*/"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main{ width:960px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main h2{font-size:18px; line-height:46px; color:#333;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main_list{ width:960px; height:auto; }"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main_list li:hover{border:2px solid #ffca2c;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".main_list li img{ width:150px; height:100px; }"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"/*----------------foot-----------------*/"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".foot{ width:960px; height:50px; margin:10px auto; padding-top:10px; border-top:3px solid #600; text-align:center; font-size:14px; line-height:24px; color:#666;}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".foot{"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? font-size: 14px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? line-height: 24px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? color: #CCC;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con .main p img {"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? float: right;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con .main ul li {"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? float: left;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? list-style-type: none;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? padding-left: 10px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con .main span {"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? width: 300px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? height: 200px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? display: block;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? float: left;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? padding-left: 10px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? padding-right: 5px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? line-height: 30px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con .main ul li {"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? float: left;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? height: auto;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? width: 160px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? padding-left: 20px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".con .main ul li p {"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? font-size: 12px;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"??? color: #000;"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"三、個人總結(jié)"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"color":"#666666","bold":true},"insert":"一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)"},{"attributes":{"color":"#666666"},"insert":"?1. 頁面分為頁頭、菜單導航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；3. 頁面樣式風格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)；4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；5. 要有JS特效，如定時切換和手動切換圖片新聞；6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；7. 頁面清爽、美觀、大方，不雷同。"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"四、精彩推薦"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"1.看到這里了就?"},{"attributes":{"color":"#f0506e","background":"#f8f8f8","code":true},"insert":"【點贊收藏博文】"},{"attributes":{"color":"#666666"},"insert":"?三連支持下吧，你的支持是我創(chuàng)作的動力,?"},{"attributes":{"color":"#f0506e","background":"#f8f8f8","code":true},"insert":"【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】"},{"attributes":{"color":"#666666"},"insert":"。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"2.關(guān)注我?guī)鷮W習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業(yè)HTML模板、期末大作業(yè)模板、等! 「在這里有好多前端開發(fā)者，一起探討前端 Node 知識，互相學習」！"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學習交流"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"\n"}]}

標簽：