HTML5网页设计 大学生课程设计 电影主题HTML+CSS静态页网页成品

文章目录一、网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码CSS样式代码六、完整源码下载七、更多一、网站题目⭐ HTMLCSS在线电影介绍 电影主题网站4页。❤ 我的主页【获取更多优质源码】二、✍️网站描述️HTML5网页设计 大学生课程设计 电影主题HTMLCSS静态页网页成品。其中标签用到了div、p、h1、a、img、等标签。三、网站介绍网站布局采用DIVCSS进行网页布局兼容各大浏览器保证可以正常展示网站素材图片均采自网络素材符合了页面主题规范网站文件其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果网页编辑如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad)都可修改代码。四、网站演示五、⚙️网站代码HTML结构代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / link hrefcss/style.css relstylesheet / title从你的全世界路过/title /head body embed srcmusic/music.mp3 width0 height0/embed div classcon div classhead div classlogo h1从你的全世界路过电影/h1 /div div classnav ul lia hrefindex.html首nbsp;nbsp;nbsp;nbsp;页/a/li lia hrefpage1.html角色介绍/a/li lia hrefpage2.html幕后花絮/a/li lia hrefpage3.html影片评价/a/li /ul /div div classclear/div /div div classclear/div div classlunboa href#img srcimages/d1.jpg width1024//a/div div classclear/div div classmain h2从你的全世界路过简介/h2 p《从你的全世界路过》是由光线传媒出品的爱情片由张一白执导邓超、张天爱、白百何、杨洋、岳云鹏主演。br / 该片改编自张嘉佳同名小说由光线影业有限公司出品。电影讲述了DJ陈末和一群朋友的都市情感故事。/p h2剧情介绍/h2 divbr / 电影《从你的全世界路过》剧照br / 电影《从你的全世界路过》剧照(11张)br / p陈末邓超饰被称为全城最贱每天和王牌DJ小容杜鹃饰针锋相对谁也不知道他们的仇恨从何而来。陈末的两个兄弟分别是全城最傻的猪头岳云鹏饰全城最纯的茅十八杨洋饰三人每天横冲直撞以为可以自在生活结果都面临人生最大的转折点。陈末相遇了最神秘的幺鸡张天爱饰猪头打造了最惨烈的婚礼茅十八经历了最悲伤的别离这群人的生活一点点崩塌往事一点点揭开。梦想爱情友情都离陈末远去。一个失去所有的人已经弄丢自己的路直到听到来自全世界的一段语音 。br / /div p/p p/p p/p h2电影片段/h2 div classmain_list ul lia href#img srcimages/q1.jpg //a/li lia href#img srcimages/q2.jpg //a/li lia href#img srcimages/q3.jpg //a/li lia href#img srcimages/q4.jpg //a/li lia href#img srcimages/q5.jpg //a/li lia href#img srcimages/q6.jpg //a/li lia href#img srcimages/q7.jpg //a/li lia href#img srcimages/q8.jpg //a/li lia href#img srcimages/q9.jpg //a/li lia href#img srcimages/q10.jpg //a/li /ul /div /div div classclear/div div classfoot p版权所有从你的全世界路过电影/p pAll Rights Reserved/p /div div classclear/div /div /body /htmlCSS样式代码/*----------------------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; }六、完整源码下载关注下方公众号获取完整代码七、更多关注下方公众号获取更多源码~关注下方公众号回复88881000 款 HTML 设计模板免费获取html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业各种设计应有尽有持续更新中..如果我的文章对您有帮助请“点赞”“✍️评论”“收藏” 一键三连哦