国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 制作一個簡單HTML電影網(wǎng)頁設(shè)計（HTML+CSS）

制作一個簡單HTML電影網(wǎng)頁設(shè)計（HTML+CSS）

時間：2023-10-11 21:48:02 | 來源：網(wǎng)站運營

時間：2023-10-11 21:48:02 來源：網(wǎng)站運營

制作一個簡單HTML電影網(wǎng)頁設(shè)計（HTML+CSS）：
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
@TOC

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。

3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。

一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



二、代碼展示

1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>電影網(wǎng)站</title> <link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/icofont.css" /> <link rel="stylesheet" href="css/mian_style.css" /> <script src='./js/jquery.js'></script> </head> <body> <!--頭部開始 --> <header class="header"> <div class="container"> <div class="header_area"> <div class="logo"> <a href="index.html"> <img src="picture/logo.png" alt="logo"/> </a> </div> <div class="meau"> <ul> <li> <a class="active" href="index.html">首頁</a> </li> <li> <a href="movies.html">電影</a> </li> <li> <a href="celebrities.html">明星</a> </li> <li> <a href="hot.html">熱點</a> </li> <li> <a href="news.html">新聞</a> </li> <li style="width: 120px;"> <a href="###" class="theme-btn"> <i class="icofont icofont-ticket"></i> &nbsp;&nbsp;訂票 </a> </li> </ul> </div> </div> </div> <!--頭部結(jié)束--> </header> <!--內(nèi)容部分開始--> <section id="content"> <!--banner開始--> <div class="banner"> <ul class="list"> <li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li> <li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li> <li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li> <li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li> <li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li> </ul> <ul class="btn"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <a href="javascript:;" class="arrow left">&lt</a> <a href="javascript:;" class="arrow right">&gt</a> </div> <!--近期熱播--> <div class="con_area"> <div class="container"> <div class="recent_con"> <div class="con_top"> <h1> <i class="icofont icofont-movie" ></i> 近期熱播 </h1> <a href="index.html" class="more"> MORE>> </a> </div> <div class="con_main"> <ul style="overflow:hidden;margin-bottom: 20px;"> <li class="img_right"> <img src="picture/portfolio1.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <div class="portfolio-content"> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </div> </li> <li class="img_right"> <img src="picture/portfolio2.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> <li class="img_right"> <img src="picture/portfolio2.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> <li> <img src="picture/portfolio4.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> </ul> <ul> <li class="img_right"> <img src="picture/portfolio5.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> <li class="img_right"> <img src="picture/portfolio6.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> <li class="img_right"> <img src="picture/portfolio2.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> <li> <img src="picture/portfolio4.png" alt="1" /> <a> <i class="icofont icofont-ui-play"></i> </a> <h2>Boyz II Men</h2> <div class="review"> <div class="author-review"> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> <b class="icofont icofont-star"></b> </div> <h4>180k voters</h4> </div> </li> </ul> </div> </div> </div> </div> <!--經(jīng)典電影--> <div class="con_area"> <div class="container"> <div class="jd_con"> <div class="con_top"> <h1> <i class="icofont icofont-film" ></i> 經(jīng)典電影 </h1> <a href="index.html" class="more"> MORE>> </a> </div> <div class="row" style="overflow: hidden; width: 100%;"> <div class="col-md-9"> <div class="video-area"> <img src="picture/video1.png" alt="video" /> <a href="###" class="popup-youtube"> <i class="icofont icofont-ui-play"></i> </a> <div class="video-text"> <h2>Angle of Death</h2> <div class="review"> <div class="author-review"> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> </div> <h4>180k voters</h4> </div> </div> </div> <div class="video-area"> <img src="picture/video1.png" alt="video" /> <a href="###" class="popup-youtube"> <i class="icofont icofont-ui-play"></i> </a> <div class="video-text"> <h2>Angle of Death</h2> <div class="review"> <div class="author-review"> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> </div> <h4>180k voters</h4> </div> </div> </div> <div class="video-area"> <img src="picture/video1.png" alt="video" /> <a href="###" class="popup-youtube"> <i class="icofont icofont-ui-play"></i> </a> <div class="video-text"> <h2>Angle of Death</h2> <div class="review"> <div class="author-review"> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> </div> <h4>180k voters</h4> </div> </div> </div> <div class="video-area"> <img src="picture/video1.png" alt="video" /> <a href="###" class="popup-youtube"> <i class="icofont icofont-ui-play"></i> </a> <div class="video-text"> <h2>Angle of Death</h2> <div class="review"> <div class="author-review"> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> <i class="icofont icofont-star"></i> </div> <h4>180k voters</h4> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 最新電影--> <div class="con_area"> <div class="container"> <div class="jd_con"> <div class="con_top"> <h1> <i class="icofont icofont-coffee-cup" ></i> 最新電影 </h1> <a href="index.html" class="more"> MORE>> </a> </div> </div> <div class="news-slide-area"> <div class="news-slider"> <div class="single-news"> <div class="news-bg-1"></div> <div class="news-date"> <h2><span>NOV</span> 25</h2> <h1>2017</h1> </div> <div class="news-content"> <h2>The Witch Queen</h2> <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p> </div> <a href="#">Read More</a> </div> <div class="single-news"> <div class="news-bg-2"></div> <div class="news-date"> <h2><span>NOV</span> 25</h2> <h1>2017</h1> </div> <div class="news-content"> <h2>The Witch Queen</h2> <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p> </div> <a href="#">Read More</a> </div> <div class="single-news"> <div class="news-bg-3"></div> <div class="news-date"> <h2><span>NOV</span> 25</h2> <h1>2017</h1> </div> <div class="news-content"> <h2>The Witch Queen</h2> <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p> </div> <a href="#">Read More</a> </div> </div> </div> </div> </div> </section> <!--end start--> <footer id="end"> <div class="container"> <span class="company"> 杭州時代國際影業(yè)有限公司 </span> </div> </footer> </body> <script type="text/javascript" src="js/main.js"></script></html>

2.CSS代碼

body{ line-height: 24px; font-size: 14px; color: #b6b7b9; background: #13151f; font-family: 'Poppins', sans-serif; font-weight: 400; position: relative;/* height: 5000px;*/}.header{ padding: 18px 0; width: 100%; border-bottom: 1px solid #252838; z-index: 99;}.header_area{ overflow: hidden;}.container{ max-width: 1140px; margin: 0 auto;}.logo{ float: left;}.logo a{ display: inline-block;}.meau{ float: right; padding-top: 34px;}.meau li{ float: left; width: 90px; text-align: center;}.meau li a{ font-family: "微軟雅黑"; font-size: 14px; color: #ffffff; text-decoration: none;}.meau li a:hover{ color: #eb315a;}.meau li .active{ color: #eb315a;}.meau li .theme-btn{ background: #eb315a; border: 1px solid #eb315a; color: #fff; border-radius: 35px; padding: 5px 25px; display: inline-block; font-size: 15px; cursor: pointer; font-weight: 500;}.meau li .theme-btn:hover{ color: #eb315a; border: 1px solid #eb315a; background: rgba(235,49,90,0.2);}/*banner*/.banner{ width: 100%; height: 450px; margin: 0px auto; overflow: hidden; position: relative;} .list li{ position: absolute; width: 100%; text-align: center; } .btn{ font:14px/2.5em "微軟雅黑"; text-align: center; position: absolute; left: 50%; transform: translateX(-55%); bottom:40px; z-index: 2; } .btn li{ float: left; width: 30px; line-height: 30px; border-radius: 50%; background: salmon; margin: 0 5px; color: #fff; cursor: pointer; } .btn .on{ background: slateblue; } .list .on{ z-index: 1; } .arrow{ position: absolute; top: 50%; transform: translateY(-40%); width: 30px; text-align: center; line-height: 60px; background: rgba(0,0,0,0.3); color: #fff; text-decoration: none; font-size: 20px; z-index: 2; } .right{ right: 14%; } .left{ left:14%; } .arrow:hover{ background: rgba(0,0,0,0.5); font-weight: bold; text-decoration: none; }/*近期熱播*/.con_area{ padding-top: 30px;}.recent_con{ overflow: hidden;}.con_top{ height: 54px; padding:8px 0; border-bottom: 1px solid #ffffff;}.con_top h1{ float: left;}.con_top h1 i{ color: #fece50; font-size: 40px; margin-right: 5px;}h1{ font-size: 36px; color: #ffffff;}.more{ float: right; line-height: 74px; color: #eb315a;}.con_main{ margin-top: 50px;}.con_main li{ float: left; display: block; position: relative; cursor: pointer; width: 255px;}.con_main li:hover img{ width: 102%; height: 102%;}.con_main li img{ transition: 0.9s}.con_main .img_right{ margin-right: 2.2%;}.con_main li a{ display: block; position: absolute; top: 42%; margin-top: -30px; margin: auto; left: 50%; margin-left: -30px;}.con_main li i{ width: 60px; height: 60px; line-height: 60px; color: #fff; border: 2px solid #fff; border-radius: 50%; text-align: center; font-size: 18px; display: inline-block; transition: all 0.4s; }.con_main li i:hover{ color: orange; border-color: orange;}/*底部*/#end{ margin-top: 30px; background:#202334;}.company{ width: 100%; display: inline-block; padding: 20px 0px; text-align: center;}/*詳情頁標(biāo)題*/.breadcrumb-area-content h2{ margin-top: 30px;}

三、個人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分； 2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成； 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)； 4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)； 5. 要有JS特效，如定時切換和手動切換圖片新聞； 6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用； 7. 頁面清爽、美觀、大方，不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

四、心得體會

許多開發(fā)人員認(rèn)為攬長設(shè)計是一種天生的能力，而創(chuàng)造力是與生俱來的。但是設(shè)計是一項可以像其他任何東西一樣學(xué)習(xí)的技能。你不必天生就可以創(chuàng)建一個漂亮的網(wǎng)站的藝術(shù)家，這需要實踐，熟不知局限太大，自己想要的內(nèi)容板式也要跟著思路走，越往后看著自己的站點越不順眼，沒有一點成就感。

①在人群中脫穎而出。許多開發(fā)都喜歡搬運其它站點頁面，很容易看出它不是自己設(shè)計的。如果個人網(wǎng)站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，自己設(shè)計的獨特風(fēng)格，讓你站點在眾多的站點中脫潁而出。

②練習(xí)技巧。設(shè)計它會幫助你練習(xí)設(shè)計原則，工具，HTML和CSS。你將更容易開發(fā)用戶界面并將其引入網(wǎng)絡(luò)。設(shè)計出獨特且符合現(xiàn)代潮流的個人站點。

以前接私活的時侯，不會設(shè)計頁面，搬運其它站點頁面，導(dǎo)致自己修改圖片和部分頁面的時候，不會使用工具，設(shè)計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

③更好的應(yīng)用程序性能。你的網(wǎng)站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括U庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發(fā)送給用戶，則會對你網(wǎng)站的性能產(chǎn)生負(fù)面影響。加載慢，打開網(wǎng)頁慢，被很多人不接受。

④發(fā)展職業(yè)技能。在Wb開發(fā)角色中，你可能不必從頭開始實現(xiàn)完整的網(wǎng)站設(shè)計，但是你應(yīng)該能夠制作與現(xiàn)代設(shè)計一致的外觀精美的界面。成為“全棧開發(fā)人員”通常意味著精通后端語言或前端JavaScript框架，同時能夠熟悉設(shè)計，產(chǎn)品方面的知識。全棧開發(fā)人員應(yīng)具有些基本的設(shè)計知識，并能夠為用戶提供一致的體驗。當(dāng)然從中學(xué)習(xí)到很多的技能知識，這是毋雨置疑的。

⑤可能會很有趣。創(chuàng)造出令自己感到驕做的東西是一種有趣的經(jīng)歷。如果您花一些時間練習(xí)它，琢磨它，打迄礎(chǔ)廂自君胸乘學(xué)矯錄更好，生活中發(fā)現(xiàn)美是一件很美好的事，但我覺得創(chuàng)造美更讓人覺得驕傲。

五、精彩推薦

看到這里了就 【點贊，好評，收藏】 三連 支持下吧，你的支持是我創(chuàng)作的動力。

關(guān)鍵詞：設(shè)計,電影,簡單

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉