当前位置: 首页 > article >正文

酷黑金色配色 影片素材不过时 色彩丰富 电影主题html

本套大作业共计8个HTML页面,网页中包含:DIV+CSS、下拉菜单栏、banner轮播图、图片放大效果、鼠标滑过效果、视频、小图标及按钮设计、登录注册页等,同时设计了logo;本作品花费大量时间去整理素材,大部分素材均使用PhotoShop裁切或调色,各个子页面的图文混排版式也各不相同,期末作业所需的知识点全覆盖,美观度、充实度极高。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电影资讯网</title>
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/banner.css">
<script type="text/javascript" src="js/banner.js"></script>
<style>
.banquan {
	height: 36px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #f2f2f2;
	background-image: url(http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg);
	background-color: #FFF;
}
</style>
</head>
<body>
<div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg" width="1000" height="36"></a></div>
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写,禁止转售 -->
  <div id="header">
    <div id="login"><a href="html/register.html">注册本站</a></div>
    <div id="logo"><a href="index.html"><img src="images/LOGO.png" width="264" height="71"></a></div>
  </div>
<!-- 横向导航开始 -->
<div id="bar" class="clear">
	<ul>
    <li><a href="index.html" class="white">网站主页</a></li>
    <li><a href="html/list.html" class="white">高分电影</a></li>
    <li><a href="html/recommend1.html" class="white">知名导演</a></li>
    <li><a href="html/recommend2.html" class="white">华语电影</a></li>
    <li><a href="html/news.html" class="white">电影资讯</a></li>
		<li><a href="#" class="white">更多相关 <img src="images/down.svg" width="10" height="10"></a>
		  <ul>
				<li><a href="html/video.html" class="white">在线视频</a></li>
				<li><a href="html/login.html" class="white">登录本站</a></li>          	
		  </ul></li>
    </ul>
</div>

<!-- 横向导航END -->
  
<!-- banner代码开始 -->
	<div class="banner">
    <div class="banner_pic" id="banner_pic">
        <div class="current"><img src="images/01.jpg" alt="tp" /></div>
        <div class="pic"><img src="images/02.jpg" alt="tp" /></div>
        <div class="pic"><img src="images/03.jpg" alt="tp" /></div>
		<div class="pic"><img src="images/04.jpg" alt="tp" /></div>
    </div>
    <ol id="button">
        <li class="current"></li>
        <li class="but"></li>
        <li class="but"></li>
		<li class="but"></li>
    </ol>
</div>
<!-- banner代码END -->

<div class="s-banner">
  <div class="s-banner-text">搜索你想要的...</div>
  <div class="search">
    <div class="search-input"><input name="textfield" type="text" id="textfield" size="67"></div>
    <div class="search-button"><input type="submit" name="button33" id="button33" value="搜索"></div>
  </div>
</div>
<div class="tubiao-box">
<div id="situbiao">
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="images/tubiao01.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">影迷交流</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="images/tubiao02.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">我的收藏</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="images/tubiao03.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">巨制大片</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="images/tubiao04.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">获奖作品</a></div>
      </div>
      
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="images/tubiao05.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">影视原声</a></div>
      </div>
    </div>
</div>

<div class="home">

<div class="home-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 电影资讯网分享最新电影新闻、电影预告片、电影幕后制作特辑,展播最新精彩微电影,长期举办影片首映、全国高校影展、青年电影投资扶持项目。我们的新闻频道拥有最新最全面的内地、港台、欧美、日韩明星八卦、电影资讯、娱乐视频等海量娱乐新闻资讯娱乐事件,还拥有独家策划的视频、图片、写真等娱乐专题。免费VIP影视观看网站,专业全网收集分享全球最新电影资讯,体验最近热播的喜剧片、惊悚片、奇幻片、巨制片、全集免费、最新高清日剧、字幕等资源分享...电影的魅力在于它能够通过图像、音乐、对白等多种元素,将观众带入一个全新的世界,让我们感受到不同于现实生活的情感和体验。电影不仅令观众感到震撼,也能够更好地表达...</div>
<div class="home-vidoe"><video id="video" src="media/video.mp4" width="500" autoplay muted="muted"></video></div>
		</div>
<div id="tuijian-new">
  <div id="tuijian-new01">
    <div id="tuijian-newtu"><img src="images/suggest1.jpg" width="587" height="210"></div>
    <div id="tuijian-newwenzi">
      <p><span class="bbiaoti">肖申克的救赎</span>-当年的奥斯卡颁奖礼上,被如日中天的《阿甘正传》掩盖了...</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
  
  <div id="tuijian-new01">
    <div id="tuijian-newtu"><img src="images/suggest2.jpg" alt="" width="587" height="210"></div>
    <div id="tuijian-newwenzi">
      <p><span class="bbiaoti">泰坦尼克号</span>-号称 “世界工业史上的奇迹”的豪华客轮泰坦尼克号开始了自己...</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
</div>

<div id="tuijian">
  <div id="tuijian01">
    <div id="tuijiantu"><img src="images/tuijian01.jpg" width="281" height="210"></div>
    <div id="tuijianwenzi">
      <p>这个杀手不太冷</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
  
  <div id="tuijian01">
    <div id="tuijiantu"><img src="images/tuijian02.jpg" width="281" height="210"></div>
    <div id="tuijianwenzi">
      <p>美丽人生</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
  
  <div id="tuijian01">
    <div id="tuijiantu"><img src="images/tuijian03.jpg" width="281" height="210"></div>
    <div id="tuijianwenzi">
      <p>盗梦空间</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
  
  <div id="tuijian01">
    <div id="tuijiantu"><img src="images/tuijian04.jpg" width="281" height="210"></div>
    <div id="tuijianwenzi">
      <p>海上钢琴师</p>
      <p class="a-wenzi">了解更多</p>
    </div>
  </div>
</div>
<div id="footer">
  <img src="images/LOGO-down.png" alt="" width="118" height="32">
  <h4><a href="#top" class="white">返回顶部</a>&nbsp; &nbsp;&nbsp;&nbsp; Copyright 电影资讯网</h4>
  </div>

</body>
</html>


http://www.kler.cn/a/447489.html

相关文章:

  • 京准电钟:电厂自控NTP时间同步服务器技术方案
  • 【自动化】Python SeleniumUtil 工具 开启开发者模式 自动安装油猴用户脚本等
  • go mod tidy 命令
  • CTF学习24.12.21[隐写术进阶]
  • shutil 标准库: Python 文件操作的万用刀
  • 【学习总结|DAY021】Java 多线程
  • 前端的Python应用指南(一):快速构建 Web 服务器 - Flask vs Node.js 对比
  • 智能语音识别模块与声音传感器模块对比分析:原理、优缺点、性价比与应用领域
  • Flutter/Dart:使用日志模块Logger Easier
  • 分析excel硕士序列数据提示词——包含对特征的筛选,非0值的过滤
  • 洛谷 P1595 信封问题 C语言递归
  • Ajax中的axios
  • MySQL外连接
  • HTML 图像标签使用陷阱
  • 渗透实录-01
  • 【数字化】华为数字化转型架构蓝图-2
  • 当你爬着数据,程序突然报JSON格式化异常...(论如何修复异常的JSON)
  • HarmonyOS NEXT 技术实践-基于基础视觉服务实现骨骼点识别
  • Java CountDownLatch 用法和源码解析
  • 3354. 使数组元素等于零
  • 基于Transformer的自编码器模型在故障检测中的应用
  • springmvc的拦截器,全局异常处理和文件上传
  • 蓝桥杯 2024 国 B【选数概率】(AC)
  • 【java面向对象编程】第六弹----封装、继承、多态
  • Androidstudio点击按钮播放声音
  • 如何优雅的关闭GoWeb服务器