时间：2023-06-11 23:06:02 | 来源：网站运营
时间：2023-06-11 23:06:02 来源：网站运营
HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。@TOC
在线咨询
<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>/*----------------------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;}【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】。关键词：电影,世界,设计,路过,带音
