时间：2023-10-11 21:48:02 | 来源：网站运营
时间：2023-10-11 21:48:02 来源：网站运营
制作一个简单HTML电影网页设计（HTML+CSS）：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。@TOC
在线咨询
<!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>电影网站</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> 订票 </a> </li> </ul> </div> </div> </div> <!--头部结束--> </header> <!--内容部分开始--> <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"><</a> <a href="javascript:;" class="arrow right">></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> <!--经典电影--> <div class="con_area"> <div class="container"> <div class="jd_con"> <div class="con_top"> <h1> <i class="icofont icofont-film" ></i> 经典电影 </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"> 杭州时代国际影业有限公司 </span> </div> </footer> </body> <script type="text/javascript" src="js/main.js"></script></html>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;}/*详情页标题*/.breadcrumb-area-content h2{ margin-top: 30px;}【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。关键词：设计,电影,简单
