{"ops":[{"insert":"web網(wǎng)頁設(shè)計——?指環(huán)王：護(hù)戒使者(13頁) 電影網(wǎng)頁設(shè)計 在線電影制作 個人設(shè)計web前端大作業(yè)"},{"attributes":{"header":1},"insert":"\n"},{"insert":"詳情介紹"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"HTML實例"},{"attributes":{"color":"#666666","link":"https://yunjunet.cn/tag/%e7%bd%91%e9%a1%b5"},"insert":"網(wǎng)頁"},{"attributes":{"color":"#666666","link":"https://yunjunet.cn/tag/%e4%bb%a3%e7%a0%81"},"insert":"代碼"},{"attributes":{"color":"#666666"},"insert":", 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"文章目錄"},{"attributes":{"align":"justify","header":3},"insert":"\n"},{"insert":"?一、網(wǎng)頁介紹"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"?一、網(wǎng)頁效果"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"?二、代碼展示"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"?"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"o1.HTML代碼"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"o2.CSS代碼"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"?三、個人總結(jié)"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"?四、精彩推薦"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"一、網(wǎng)頁介紹>"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"1?"},{"attributes":{"bold":true},"insert":"網(wǎng)頁簡介"},{"insert":"：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。"},{"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":"編輯軟件進(jìn)行運行及修改編輯等操作）。"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"3."},{"attributes":{"bold":true},"insert":"知識應(yīng)用"},{"insert":"：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"一、網(wǎng)頁效果>"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"attributes":{"class":"normal-img"},"insert":{"native-image":{"alt":"read-normal-img","url":"https://b1.sanwen.net/b_article/08eed601baf366905b6942cb9050d5333c5c714e.jpg","width":980,"height":2084,"size":755286,"status":"loaded"}}},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"二、代碼展示>"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#333333"},"insert":"1.HTML代碼"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"代碼如下（示例）：以下僅展示部分代碼供參考~"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":"??"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#eeeeee"},"insert":" ?????????123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"attributes":{"color":"#333333"},"insert":"2.CSS代碼"},{"attributes":{"align":"justify","header":2},"insert":"\n"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"/*三、個人"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"/* Browser Resets */.flex-container a:active,"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".flexslider a:active {outline: none;}.slides,"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".flex-control-nav,"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":".flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"*********************************/ .flexslider {width: 100%; margin: 0; padding: 0;}.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides img {}.flex-pauseplay span {text-transform: capitalize;}/* Clearfix for the .slides element */.slides:after {content: \".\"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":" * include js that eliminates this class on page load */.no-js .slides > li:first-child {display: block;}/* FlexSlider Default Theme"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"*********************************/.flexslider {position: relative; margin-top:10px; padding-top:10px; margin-left:10px; zoom: 1;}.flexslider .slides {zoom: 1;}.flexslider .slides > li {position: relative;}/* Suggested container for \"Slide\" animation setups. Can replace this with your own, if you wish */.flex-container {zoom: 1; position: relative;}/* Caption style *//* IE rgba() hack */.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}/* Direction Nav */.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../image/bg_direction_nav.png) no-repeat 0 0; position: absolute; top:150px; cursor: pointer; text-indent: -9999px;}.flex-direction-nav li a.next {background-position: -52px 0; right: -51px;}.flex-direction-nav li a.prev {background-position: 0 0; left: -60px;}.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}/* Control Nav */.flex-control-nav {width: 100%; position: absolute; bottom: -30px; *bottom: -0px;*bottom: -0px\\9; text-align: center;}.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}.flex-control-nav li:first-child {margin: 0;}.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../image/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}.flex-control-nav li a:hover {background-position: 0 -13px;}.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"insert":"總結(jié)>"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"三、個人總結(jié)>"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666","bold":true},"insert":"一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"1.頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"2.所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"3.頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"4.菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"5.要有JS特效，如定時切換和手動切換圖片新聞；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"6.頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"7.頁面清爽、美觀、大方，不雷同。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"8.網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。"},{"attributes":{"align":"justify"},"insert":"\n\n\n"},{"insert":"四、精彩推薦>"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"attributes":{"color":"#666666"},"insert":"1.看到這里了就?"},{"attributes":{"color":"#f0506e","background":"#f8f8f8"},"insert":"【點贊收藏博文】"},{"attributes":{"color":"#666666"},"insert":"?三連支持下吧，你的支持是我創(chuàng)作的動力,?"},{"attributes":{"color":"#f0506e","background":"#f8f8f8"},"insert":"【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】?"},{"attributes":{"color":"#666666"},"insert":"。"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"2.關(guān)注我?guī)鷮W(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！"},{"attributes":{"align":"justify"},"insert":"\n"},{"attributes":{"color":"#666666"},"insert":"3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)交流"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"加微信19966519194專業(yè)代查代找各大高校專業(yè)課真題"},{"attributes":{"align":"justify","code-block":true},"insert":"\n"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"\n"}]}