时间:2023-06-11 21:36:01 | 来源:网站运营
时间:2023-06-11 21:36:01 来源:网站运营
javascript网站期末作品~电影资讯博客网站模板(HTML+CSS+JavaScript):<!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" /> </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/portfolio3.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/portfolio3.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/jquery-1.7.2.min.js" ></script> <script type="text/javascript" src="js/main.js"></script></html>
关键词:模板,作品,电影