HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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" /> <link href="css/style.css" rel="stylesheet" /> <title>從你的全世界路過</title> </head><body> <embed src="music/music.mp3" width="0" height="0"></embed> <div class="con"><div class="head"><div class="logo"><h1>從你的全世界路過電影</h1></div><div class="nav"><ul><li><a href="index.htm">首 頁</a></li><li><a href="page1.htm">角色介紹</a></li><li><a href="page2.htm">幕后花絮</a></li><li><a href="page3.htm">影片評價</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>從你的全世界路過簡介</h2><p>《從你的全世界路過》是由光線傳媒出品的愛情片，由張一白執導，鄧超、張天愛、白百何、楊洋、岳云鵬主演。<br />該片改編自張嘉佳同名小說，由光線影業有限公司出品。電影講述了DJ陳末和一群朋友的都市情感故事。</p><h2>劇情介紹</h2><div><br />電影《從你的全世界路過》劇照<br />電影《從你的全世界路過》劇照(11張)<br /><p>陳末（鄧超飾）被稱為全城最賤，每天和王牌DJ小容（杜鵑飾）針鋒相對，誰也不知道他們的仇恨從何而來。陳末的兩個兄弟，分別是全城最傻的豬頭（岳云鵬飾），全城最純的茅十八（楊洋飾），三人每天橫沖直撞，以為可以自在生活，結果都面臨人生最大的轉折點。陳末相遇了最神秘的幺雞（張天愛飾），豬頭打造了最慘烈的婚禮，茅十八經歷了最悲傷的別離，這群人的生活一點點崩塌，往事一點點揭開。夢想，愛情，友情都離陳末遠去。一個失去所有的人，已經弄丟自己的路，直到聽到來自全世界的一段語音 。<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>版權所有：從你的全世界路過電影</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; }三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
四、精彩推薦
1.看到這里了就 【點贊收藏博文】 三連支持下吧，你的支持是我創作的動力, 【觀注作者 |獲取更多源碼| 優質文章】 。
2.關注我帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題可以相互學習交流
總結
以上是生活随笔為你收集整理的HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机房监控系统的功能特点以及工作原理!
- 下一篇： 工业互联网新发展：基于 HTML5 We