HTML5期末大作业：电影网站设计——电影介绍(11页) 大学生电影网页作品
文章目录
- HTML5期末大作业：电影网站设计——电影介绍(11页) 大学生电影网页作品
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="author" content="order by dede58/" />
<title>Demo</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/iconfont.css">
</head>
<body style=" height: 2000px; ">
<!---------- 顶部页面 ---------->
<div id="header">
<!-- 最顶部 -->
<div class="header-top">
<div class="auto-width">
<h1 class="logo fl"><a href="#"><img src="picture/logo.png" alt="#"></a></h1>
<div class="search-box fl">
<form action="#">
<input type="text" class="fl search-text" placeholder="Search here...">
<button class="fl search-btn">
<i class="iconfont icon-search"></i>
</button>
</form>
<div class="search-feedback">
<span class="search-hot">今日热搜</span>
<div class="search-menu">
<a href="#" class="item item-cur">
<span>1</span>
<em>OverWatch</em>
</a>
<a href="#" class="item item-cur">
<span>2</span>
<em>电影知道答案</em>
</a>
<a href="#" class="item item-cur">
<span>3</span>
<em>S6</em>
</a>
<a href="#" class="item">
<span>4</span>
<em>夏目友人帐</em>
</a>
<a href="#" class="item">
<span>5</span>
<em>微小而确实的幸福</em>
</a>
<a href="#" class="item">
<span>6</span>
<em>神盾局特工</em>
</a>
<a href="#" class="item">
<span>7</span>
<em>天凉好个秋</em>
</a>
</div>
</div>
</div>
<ul class="header-guide fr">
<li class="guide-item download">
<a href="#">
<i class="iconfont icon-app"></i>
<span>下载客户端</span>
</a>
<div class="guide-hover">
<img src="picture/app-download.png" alt="#">
</div>
</li>
<li class="guide-item login">
<a href="#">登录/注册</a>
</li>
<li class="guide-item history">
<a href="#">
<i class="iconfont icon-history"></i>
</a>
<div class="guide-hover">
<span class="text">尚未记录任何历史信息。</span>
<a href="#" class="more">More</a>
</div>
</li>
<li class="guide-item upload">
<a href="#">
<i class="iconfont icon-upload"></i>
</a>
<div class="guide-hover">
<ul>
<li><a href="#">投视频</a></li>
<li><a href="#">投文章</a></li>
</ul>
</div>
</li>
<li class="guide-item collect">
<a href="#">
<i class="iconfont icon-collect"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- 焦点图 -->
<div class="header-banner">
<a href="#" class="bg"></a>
<span class="text">这辆车……到底能不能上啊！！！</span>
<a href="#" class="link"></a>
</div>
<!-- 导航 -->
<div class="header-nav">
<div class="nav-wrap auto-width clearfix">
<a href="#" class="nav-item nav-cur">首页</a>
<a href="#" class="nav-item">番剧</a>
<a href="#" class="nav-item nav-item_hover">动画</a>
<a href="#" class="nav-item nav-item_hover">音乐</a>
<a href="#" class="nav-item nav-item_hover">舞蹈</a>
<a href="#" class="nav-item nav-item_hover">游戏</a>
<a href="#" class="nav-item nav-item_hover">娱乐</a>
<a href="#" class="nav-item nav-item_hover">科技</a>
<a href="#" class="nav-item nav-item_hover">影视</a>
<a href="#" class="nav-item nav-item_hover">体育</a>
<a href="#" class="nav-item nav-item_hover">彼女</a>
<a href="#" class="nav-item nav-item_hover">鱼塘</a>
<a href="#" class="nav-item nav-item_hover">文章</a>
<a href="#" class="nav-item nav-item_hover">合辑</a>
<a href="#" class="nav-rank">
<i class="iconfont icon-rank"></i>
全站排行榜
</a>
</div>
<div class="subNav">
<ul class="auto-width">
<li class="subNav-item">
<a href="#">动画短片</a>
<a href="#">动画资讯</a>
<a href="#">旧番补档</a>
<a href="#">新番连载</a>
<a href="#">MAD·AMV</a>
<a href="#">MMD·3D</a>
<a href="#">2.5次元</a>
<a href="#">国产动画</a>
</li>
<li class="subNav-item">
<a href="#">原创·翻唱</a>
<a href="#">演奏</a>
<a href="#">Vocaloid</a>
<a href="#">日系音乐</a>
<a href="#">综合音乐</a>
<a href="#">演唱会</a>
</li>
<li class="subNav-item">
<a href="#">宅舞</a>
<a href="#">综合舞蹈</a>
</li>
<li class="subNav-item">
<a href="#">主机单机</a>
<a href="#">游戏集锦</a>
<a href="#">电子竞技</a>
<a href="#">LOL</a>
<a href="#">守望先锋</a>
<a href="#">桌游卡牌</a>
<a href="#">Mugen</a>
</li>
<li class="subNav-item">
<a href="#">生活娱乐</a>
<a href="#">鬼畜调教</a>
<a href="#">萌宠</a>
<a href="#">美食</a>
<a href="#">综艺</a>
</li>
<li class="subNav-item">
<a href="#">SF</a>
<a href="#">黑科技</a>
<a href="#">数码</a>
<a href="#">广告</a>
<a href="#">白科技</a>
<a href="#">自我发电</a>
<a href="#">科学技术</a>
<a href="#">汽车</a>
</li>
<li class="subNav-item">
<a href="#">电影</a>
<a href="#">日剧</a>
<a href="#">美剧</a>
<a href="#">国产剧</a>
<a href="#">网络剧</a>
<a href="#">韩剧</a>
<a href="#">布袋·特摄</a>
<a href="#">纪录片</a>
<a href="#">其他</a>
</li>
<li class="subNav-item">
<a href="#">综合体育</a>
<a href="#">足球</a>
<a href="#">篮球</a>
<a href="#">搏击</a>
<a href="#">11区体育</a>
<a href="#">惊奇体育</a>
</li>
<li class="subNav-item">
<a href="#">造型</a>
<a href="#">西皮</a>
<a href="#">爱豆</a>
<a href="#">其他</a>
</li>
<li class="subNav-item">
<a href="#">军事</a>
<a href="#">历史</a>
<a href="#">焦点</a>
</li>
<li class="subNav-item">
<a href="#">文章综合</a>
<a href="#">工作·情感</a>
<a href="#">漫画·轻小说</a>
<a href="#">游戏</a>
</li>
<li class="subNav-item">
<a href="#">AcFun专题</a>
</li>
</ul>
</div>
</div>
</div>
<!---------- 主体内容 ---------->
<div id="main">
<div class="auto-width clearfix">
<!-- 幻灯片部分 -->
<section class="area clearfix area-slider">
<div id="sliderBox" class="slider-box fl">
<ul class="slider">
<li data-title="Picture 1" class="slider-item"><img src="picture/slider-1.jpg" alt="#"></li>
<li data-title="Picture 2" class="slider-item"><img src="picture/slider-2.jpg" alt="#"></li>
<li data-title="Picture 3" class="slider-item"><img src="picture/slider-3.jpg" alt="#"></li>
<li data-title="Picture 4" class="slider-item"><img src="picture/slider-4.jpg" alt="#"></li>
<li data-title="Picture 5" class="slider-item"><img src="picture/slider-5.jpg" alt="#"></li>
</ul>
<div class="btn-box">
<a href="javascript:;" class="btn-item btn-item__active"></a>
<a href="javascript:;" class="btn-item"></a>
<a href="javascript:;" class="btn-item"></a>
<a href="javascript:;" class="btn-item"></a>
<a href="javascript:;" class="btn-item"></a>
</div>
</div>
<ul class="slider-menu fl">
<li class="slider-menu__item">
<a href="#" class="item">
<img src="picture/slider-menu__1.jpg" alt="#">
<div class="mask-gradient">
<p>嗨呀！好气啊！OW堡傻缺集锦</p>
<div class="text-box">
<em>UP: AcFun出品</em>
<span class="info">
<i class="iconfont icon-collect">14.9万</i>
<i class="iconfont icon-collect">165</i>
</span>
</div>
</div>
</a>
</li>
<li class="slider-menu__item">
<a href="#" class="item">
<img src="picture/slider-menu__2.jpg" alt="#">
<div class="mask-gradient">
<p>嗨呀！好气啊！OW堡傻缺集锦</p>
<div class="text-box">
<em>UP: AcFun出品</em>
<span class="info">
<i class="iconfont icon-collect">14.9万</i>
<i class="iconfont icon-collect">165</i>
</span>
</div>
</div>
</a>
</li>
<li class="slider-menu__item">
<a href="#" class="item">
<img src="picture/slider-menu__3.jpg" alt="#">
<div class="mask-gradient">
<p>嗨呀！好气啊！OW堡傻缺集锦</p>
<div class="text-box">
<em>UP: AcFun出品</em>
<span class="info">
<i class="iconfont icon-collect">14.9万</i>
<i class="iconfont icon-collect">165</i>
</span>
</div>
</div>
</a>
</li>
<li class="slider-menu__item">
<a href="#" class="item">
<img src="picture/slider-menu__4.jpg" alt="#">
<div class="mask-gradient">
<a href="#" class="userName">UP: iphone猫</a>
</div>
</li>
<li class="area-menu__item">
<div class="footer-middle clearfix">
<div class="item">
<a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
<a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
</div>
<div class="item">
<span>京8888888888号</span>
</div>
<div class="item">
<span>节目制作经营许可证66666666666号</span>
</div>
</div>
<div class="footer-bottom">
<img src="picture/logo-gray.png" alt="#">
<p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p>
</div>
</div>
</div>
<a href="javascript:;" id="back_top" class="iconfont icon-up"></a>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/sliderbox.js"></script>
<script src="js/tab.js"></script>
</body>
</html>
更多推荐
HTML+CSS大作业 电影网站设计——电影介绍(11页) 大学生电影网页作品 电影网页设计作业模板 学生网页制作源代码下载
发布评论