HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
文章目錄
- 一、網(wǎng)頁(yè)介紹
- 一、網(wǎng)頁(yè)效果
- 二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
- 三、個(gè)人總結(jié)
- 四、精彩推薦
一、網(wǎng)頁(yè)介紹
1 網(wǎng)頁(yè)簡(jiǎn)介：此作品為學(xué)生個(gè)人主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁(yè)制作，畫(huà)面精明，代碼為簡(jiǎn)單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁(yè)編輯：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁(yè)知識(shí)中的: Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁(yè)效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" /> <title>從你的全世界路過(guò)</title> </head><body> <embed src="music/music.mp3" width="0" height="0"></embed> <div class="con"><div class="head"><div class="logo"><h1>從你的全世界路過(guò)電影</h1></div><div class="nav"><ul><li><a href="index.htm">首 頁(yè)</a></li><li><a href="page1.htm">角色介紹</a></li><li><a href="page2.htm">幕后花絮</a></li><li><a href="page3.htm">影片評(píng)價(jià)</a></li></ul></div><div class="clear"></div></div><div class="clear"></div><div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/></a></div><div class="clear"></div><div class="main"><h2>從你的全世界路過(guò)簡(jiǎn)介</h2><p>《從你的全世界路過(guò)》是由光線傳媒出品的愛(ài)情片，由張一白執(zhí)導(dǎo)，鄧超、張?zhí)鞇?ài)、白百何、楊洋、岳云鵬主演。<br />該片改編自張嘉佳同名小說(shuō)，由光線影業(yè)有限公司出品。電影講述了DJ陳末和一群朋友的都市情感故事。</p><h2>劇情介紹</h2><div><br />電影《從你的全世界路過(guò)》劇照<br />電影《從你的全世界路過(guò)》劇照(11張)<br /><p>陳末（鄧超飾）被稱(chēng)為全城最賤，每天和王牌DJ小容（杜鵑飾）針?shù)h相對(duì)，誰(shuí)也不知道他們的仇恨從何而來(lái)。陳末的兩個(gè)兄弟，分別是全城最傻的豬頭（岳云鵬飾），全城最純的茅十八（楊洋飾），三人每天橫沖直撞，以為可以自在生活，結(jié)果都面臨人生最大的轉(zhuǎn)折點(diǎn)。陳末相遇了最神秘的幺雞（張?zhí)鞇?ài)飾），豬頭打造了最慘烈的婚禮，茅十八經(jīng)歷了最悲傷的別離，這群人的生活一點(diǎn)點(diǎn)崩塌，往事一點(diǎn)點(diǎn)揭開(kāi)。夢(mèng)想，愛(ài)情，友情都離陳末遠(yuǎn)去。一個(gè)失去所有的人，已經(jīng)弄丟自己的路，直到聽(tīng)到來(lái)自全世界的一段語(yǔ)音 。<br /></div><p></p><p></p><p></p><h2>電影片段</h2><div class="main_list"><ul><li><a href="#"><img src="images/q1.jpg" /></a></li><li><a href="#"><img src="images/q2.jpg" /></a></li><li><a href="#"><img src="images/q3.jpg" /></a></li><li><a href="#"><img src="images/q4.jpg" /></a></li><li><a href="#"><img src="images/q5.jpg" /></a></li><li><a href="#"><img src="images/q6.jpg" /></a></li><li><a href="#"><img src="images/q7.jpg" /></a></li><li><a href="#"><img src="images/q8.jpg" /></a></li><li><a href="#"><img src="images/q9.jpg" /></a></li><li><a href="#"><img src="images/q10.jpg" /></a></li></ul></div></div><div class="clear"></div><div class="foot"><p>版權(quán)所有：從你的全世界路過(guò)電影</p><p>All Rights Reserved</p></div><div class="clear"></div> </div> </body> </html>2.CSS代碼
/*----------------------common-------------------------*/ *{ margin:0; padding:0; font-family:Microsoft YaHei;} .clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} li{ list-style-type:none;} .ofh{overflow:hidden;} .center{ text-align:center;} .em{ text-indent:2em;} .p5{ padding:5px;} .pl50{ padding-left:50px;} body{background-attachment: fixed;background-color: #000;background-image: url(../images/bj.jpg);background-repeat: no-repeat;background-position: center top; }/*----------------------con-------------------------*/ .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;} /*----------------head-----------------*/ .head{ width:960px; height:auto; margin:auto;} .logo{ width:550px; height:60px;} .logo h1{ font-size:36px; line-height:60px; color:#300; font-family:黑體;} .nav{width: 960px;height: 40px;margin: 5px auto;background-color: #000;-moz-border-radius: 5px;border-radius: 5px; } .nav ul{ padding-left:10px;} .nav li{ float:left; padding:5px 20px; } .nav li a{ font-size:20px; line-height:30px; color:#fff;} .nav li a:hover{ color:#fff; text-decoration:none;} .nav li:hover{ background-color:#f97255} .nav li:hover a{ color:#fff;}.lunbo{ width:960px; height:350px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;} /*----------------main-----------------*/ .main{ width:960px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;} .main h2{font-size:18px; line-height:46px; color:#333;} .main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;} .main_list{ width:960px; height:auto; } .main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;} .main_list li:hover{border:2px solid #ffca2c;} .main_list li img{ width:150px; height:100px; }/*----------------foot-----------------*/ .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;} .foot{font-size: 14px;line-height: 24px;color: #CCC; } .con .main p img {float: right; } .con .main ul li {float: left;list-style-type: none;padding-left: 10px; } .con .main span {width: 300px;height: 200px;display: block;float: left;padding-left: 10px;padding-right: 5px;line-height: 30px; } .con .main ul li {float: left;height: auto;width: 170px;padding-left: 12px; } .con .main ul li p {font-size: 12px;color: #000; }三、個(gè)人總結(jié)
一套合格的網(wǎng)頁(yè)應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
四、精彩推薦
1.看到這里了就 【點(diǎn)贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動(dòng)力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】 。
2.關(guān)注我?guī)鷮W(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題可以相互學(xué)習(xí)交流
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 机房监控系统的功能特点以及工作原理!
- 下一篇： 谷粒商城高级篇上（未完待续）