大学生影视主题网页制作 腾龙电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作
生活随笔
收集整理的這篇文章主要介紹了
大学生影视主题网页制作 腾龙电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/jquery.superslide.2.1.1.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script src="js/common.js" type="text/javascript"></script> <title>首頁</title> </head><body class="background_color"><div class="Slideshow_style" id="Slideshow"> <div class="header_top"> <div class="header clearfix"><a href="#" class="logo_style"><img src="picture/logo.png" /></a><div class="search_stye"><input name="" type="text" class="search"/><button name="" type="button" class=" btn-success button_submit" onclick="submit_btn()"><i class="icon_search"></i>搜索</button></div></div> </div><div class="wrapper" id="wrapper_slideBox"><div class="hd Switch_operation"><ul class=" clearfix"><li><a href="#"><img src="picture/x-banner1.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li><li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li></ul></div><div class="bd"><ul><li style="background:url(images/banner2.jpg) no-repeat center; text-align:center; height:600px;"><a href="#" class=""></a></li><li style="background:url(images/banaer.png) no-repeat center; text-align:center; height:600px;"><a href="#" class=""></a></li></ul></div></div><script>jQuery("#wrapper_slideBox").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000});</script> </div> <div class="home_style Channel"> <!--欄目--><div class="home_Column_style"><div class="Column_list clearfix navigation_list"><ul class=""><li class="Channel_name"><a href="index.tml" ><i class="icon_TV"></i>首頁</a></li><li class="Channel_name1"><a href="list_page.html" ><i class="icon_TV"></i>娛樂</a></li><li class="Channel_name2"><a href="#" ><i class="icon_TV"></i>電視劇</a></li><li class="Channel_name3"><a href="#"><i class="icon_TV"></i>電影</a></li><li class="Channel_name4"><a href="#" ><i class="icon_TV"></i>網絡電影</a></li><li class="Channel_name5"><a href="#" ><i class="icon_TV"></i>綜藝</a></li><li class="Channel_name6"><a href="#" ><i class="icon_TV"></i>動漫</a></li><li class="Channel_name7"><a href="#" ><i class="icon_TV"></i>紀錄片</a></li><li class="Channel_name8"><a href="#" ><i class="icon_TV"></i>公開課</a></li></ul></div><a href="#" class="pic " target="_blank"><img src="picture/4.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >43集</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/4.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >43集</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/4.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新4集</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li></ul></div><!--右--><div class="Launch_style bg" id="picMarquee-top2"><div class="label_title"><span class="name">即將上線</span></div><div class="bd"><ul class="Launch_list"><li class="video_name"><div class="clearfix"><a href="#" class="link_name"><img src="picture/5.jpg"/></a><span class="Introduction"><a href="#" title="愿有人陪你顛沛流離" class="p_title_name">愿有人陪你顛沛流離</a><p class="set_number">集數：23集</p></span></div><p class="time">上線時間：2017-03-30</p></li><li class="video_name"><div class="clearfix"><a href="#" class="link_name"><img src="picture/5.jpg"/></a><span class="Introduction"><a href="#" title="愿有人陪你顛沛流離" class="p_title_name">愿有人陪你顛沛流離</a><p class="set_number">集數：23集</p></span> </div><p class="time">上線時間：2017-03-30</p></li><li class="video_name"><div class="clearfix"><a href="#" class="link_name"><img src="picture/5.jpg"/></a><span class="Introduction"><a href="#" title="愿有人陪你顛沛流離" class="p_title_name">愿有人陪你顛沛流離</a><p class="set_number">集數：23集</p></span></div><p class="time">上線時間：2017-03-30</p></li><li class="video_name"><div class="clearfix"><a href="#" class="link_name"><img src="picture/5.jpg"/></a><span class="Introduction"><a href="#" title="愿有人陪你顛沛流離" class="p_title_name">愿有人陪你顛沛流離</a><p class="set_number">集數：45集</p></span></div><p class="time">上線時間：2017-03-30</p></li><li class="video_name"><div class="clearfix"><a href="#" class="link_name"><img src="picture/5.jpg"/></a><span class="Introduction"><a href="#" title="愿有人陪你顛沛流離" class="p_title_name">愿有人陪你顛沛流離</a><p class="set_number">集數：23集</p></span></div><p class="time">上線時間：2017-03-30</p></li></ul></div></div><script>jQuery("#picMarquee-top2").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50,trigger:"click"});</script></div><!--預告--><div class="Notice_style"><div class="Notice_title"><span class="name">電視劇預告</span></div><div class="clearfix list_v_content"><ul class="Notice_list"><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/11.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/13.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/12.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li></ul></div></div></div><!--其他--><div class="Channels margintb"><div class="title_name clearfix"><i class="icon_title"><img src="picture/icon_title_tv.png" /></i>其他 <span class="link_name"><a href="#">歐美</a>| <a href="#">古裝</a>| <a href="#">更多</a></span></div><div class="clearfix list_v_content"><ul class="Notice_list"><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/14.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/11.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/13.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li><li class="first_content bg"><a href="#" class="pic " target="_blank"><img src="picture/12.jpg" width="100%"/><span class="first_bg"><i class="icon_bf"></i></span></a><a target="_blank" href="#" class="bq" >更新預告</a><div class="tc"><p class="tit"><a target="_blank" href="#" >轎車公路上行駛被閃電劈中</a></p><p class="des">巨響過后冒出濃煙</p></div></li></ul></div> </div><!----><div class="l_f width50"><div class="bg mr10"><div class="n_title_name"><em class=""></em>網站公告</div><ul class="notice_list clearfix"><li><a href="#"><i class="icon_yuan"></i>通知公告內容是什么的內容的介紹信息</a> </li><li><a href="#"><i class="icon_yuan"></i>通知公告內容是什么的內容的介紹信息</a> </li><li><a href="#"><i class="icon_yuan"></i>通知公告內容是什么的內容的介紹信息</a> </li><li><a href="#"><i class="icon_yuan"></i>通知公告內容是什么的內容的介紹信息</a> </li><li><a href="#"><i class="icon_yuan"></i>通知公告內容是什么的內容的介紹信息</a> </li></ul></div></div><div class="l_f width50"><div class="bg ml10"> <div class="n_title_name">合作伙伴</div><div class="notice_list clearfix"><a href="#" class="Cooperation_name">華數</a><a href="#" class="Cooperation_name">萬達電影網</a><a href="#" class="Cooperation_name">華誼兄弟</a><a href="#" class="Cooperation_name">星美</a><a href="#" class="Cooperation_name">光線影業</a><a href="#" class="Cooperation_name">電影網</a><a href="#" class="Cooperation_name">華策影視</a><a href="#" class="Cooperation_name">百度視頻</a><a href="#" class="Cooperation_name">百度百科</a><a href="#" class="Cooperation_name">微博視頻臺</a><a href="#" class="Cooperation_name">百度貼吧</a><a href="#" class="Cooperation_name">央廣網</a><a href="#" class="Cooperation_name">hao123</a><a href="#" class="Cooperation_name">愛奇藝</a><a href="#" class="Cooperation_name">天貓店</a></div></div></div></div> </div> <!--底部樣式--> <div class="footer_style"> <div class="footer"><div class="copys copys-list clearfix"><a href="#">網絡文化經營許可證 京網文[2014]xxxxx-236號</a><a href="#">京衛網審[2013]第0209號 網絡110報警服務</a><a href="#">藥品服務許可證(京)-經營2222-0029</a><a href="#">節目制作經營許可證京字670號</a></div> <div class="link_name"> <a href="#">關于我們</a>|<a href="#">媒體合作</a>|<a href="#">開放平臺</a>|<a href="#">廣告服務</a>|<a href="#">聯系我們</a>|<a href="#">工作機會</a>|<a href="#">友情鏈接</a></div> <div class="Copyright">Copyright ? 2004-2017 視頻名稱（xx.com）All rights reserved.</div> <div class="align clearfix"><a href="#"><img src="picture/ghs.png" />京公網安備：xxxxxxxxxxxxxxxx號</a> <a href="#"><img src="picture/xy.png" />中國互聯網誠信聯盟</a> </div> </div></div> <!-- 代碼 開始 --> <div class="go-top dn" id="go-top"><a href="zhuce.html" target="_blank" class="feedback"></a><a href="javascript:;" class="go"></a> </div> </body> </html>2.CSS代碼
root {display: block;} html, body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td ,img,textarea{border: 0px;margin: 0px;outline: 0px;padding: 0px;} fieldset, img { border: 0; } img { display:inline-block; } :focus { outline: 0; } li {display: list-item;text-align: -webkit-match-parent;} em, i, u {font-style: normal;} h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family:"Microsoft YaHei" } abbr, acronym { border: 0; font-variant: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } code, kbd, samp, tt { font-size:100%; } m:20px; color:#ffffff; margin-top:20px;} .footer_style .link_name{ padding:20px; color:#999; text-align:center; border-top:1px solid #3D3D3D} .footer_style .link_name a{ margin:0px 15px;} .footer_style .g_f_name{ float:left; width:300px; padding:20px 0px} .footer_style .g_f_name a{ font-size:12px; line-height:24px;} .footer_style .Copyright{ color:#666; text-align:center; margin:10px 0px;font-size:12px;} .footer_style .copys {text-align: center;padding:20px 0px;font-size:12px } .footer_style .copys a{ margin:0px 5px;} /* 返回頂部 */ .go-top{position: fixed;bottom: 40px;right: 20px;width: 46px;z-index: 999;} .go-top a{display: block;width: 46px;height: 46px;margin-bottom: 10px;background-image: url(../images/go-top.png); border:1px solid #f0f0f0} .go-top a:last-child{margin-bottom: 0;} .go-top .go{background-position: 0 -150px;} .go-top .go:hover{background-position: 0 -250px;} .go-top .feedback{background-position: 0 -100px;} .go-top .feedback:hover{background-position: 0 -300px;} .go-top .uc-2vm{background-position: 0 0;} .go-top .uc-2vm:hover{background-position: 0 -350px;} /* .go-top .share{background-position: 0 -50px;} .go-top .share:hover{background-position: 0 -200px;} */ .go-top .uc-2vm-pop{position: absolute;right: 60px;top: -100px;width: 240px;box-shadow: 0px 1px 4px rgba(0,0,0,.1);background: #fff; }background-color: #272728;color: #699f00; } #playerlist .bd .Episodes_list li a {display: block;width: 48px;height: 48px;background-color: #2f2f2f;color: #c3c3c3;line-height: 48px;text-align: center;border: 2px solid #2f2f2f; } #playerlist .bd .Episodes_list li .icon_b {background: url(../images/base_common.png) no-repeat;position: absolute;width: 17px;height: 21px;top: -10px;right: -15px;z-index: 123; } #playerlist .bd .Episodes_list li .icon_xin { background-position: right -94px;} #playerlist .bd .information_img{ width:100px; margin-right:10px;} #playerlist .bd .information_img img{ width:100%; height:100%;} #playerlist .bd .play_information_b { width:165px;} #playerlist .bd .play_information_b dl dt{ font-size:14px; margin-bottom:10px;} #playerlist .bd .jieshao{ color:#999; line-height:24px;} #playerlist .bd .play_information_b dl dd label{ color:#666; float:left; width:40px;} #playerlist .bd .play_information_b dl dd a{ margin-right:5px; color:#FFF} #playerlist .bd .play_information_b dl dd span{ width:125px;} .play_video_b {height: 48px;background: #ededed;position: relative; } .play_video_b .frequency{display: inline-block;height: 48px;line-height: 48px;position:relative;color: #454545;font-weight: 700;padding-left: 30px;padding-right: 15px;cursor: default; } .icon_tup{background: url(../images/base_common.png) no-repeat right -220px;position:absolute; width: 15px;height: 15px;top: 16px;left: 8px; }.play_video_b .frequency i {font-style: normal;margin-left: 3px;margin-right: 8px; }三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
四、心得體會
許多開發人員認為攬長設計是一種天生的能力，而創造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以創建一個漂亮的網站的藝術家，這需要實踐，熟不知局限太大，自己想要的內容板式也要跟著思路走，越往后看著自己的站點越不順眼，沒有一點成就感。
①在人群中脫穎而出。許多開發都喜歡搬運其它站點頁面，很容易看出它不是自己設計的。如果個人網站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，自己設計的獨特風格，讓你站點在眾多的站點中脫潁而出。
②練習技巧。設計它會幫助你練習設計原則，工具，HTML和CSS。你將更容易開發用戶界面并將其引入網絡。設計出獨特且符合現代潮流的個人站點。
以前接私活的時侯，不會設計頁面，搬運其它站點頁面，導致自己修改圖片和部分頁面的時候，不會使用工具，設計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。
③更好的應用程序性能。你的網站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括U庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發送給用戶，則會對你網站的性能產生負面影響。加載慢，打開網頁慢，被很多人不接受。
④發展職業技能。在Wb開發角色中，你可能不必從頭開始實現完整的網站設計，但是你應該能夠制作與現代設計一致的外觀精美的界面。成為“全棧開發人員”通常意味著精通后端語言或前端JavaScript框架，同時能夠熟悉設計，產品方面的知識。全棧開發人員應具有些基本的設計知識，并能夠為用戶提供一致的體驗。當然從中學習到很多的技能知識，這是毋雨置疑的。
⑤可能會很有趣。創造出令自己感到驕做的東西是一種有趣的經歷。如果您花一些時間練習它，琢磨它，打迄礎廂自君胸乘學矯錄更好，生活中發現美是一件很美好的事，但我覺得創造美更讓人覺得驕傲。
五、精彩推薦
看到這里了就 【點贊，好評，收藏】 三連 支持下吧，你的支持是我創作的動力。
總結
以上是生活随笔為你收集整理的大学生影视主题网页制作 腾龙电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React开发（124）:ant des
- 下一篇： 一个帮助我100%拿offer的面试学习