1.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。
2.网页作品技术:flex布局,Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件), html: 表单form, 表格table, 图片img, 列表ul(或ol)
css: float+clear布局, position定位(absolute, fixed),文字悬浮于图片上,伪类,伪元素, js:在网页中有效地使用需要的JavaScript脚本(如图片轮播效果)基本期末作业所需的知识点全覆盖。
产品展示!
点击在线网址查看
文件目录
代码展示
<!DOCTYPE html>
<html lang="zh-CN">
<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>Bootstrap 101 Template</title>
<link rel="stylesheet" href="./lib/bootstarp/css/bootstrap.css">
<link rel="stylesheet" href="./css/base.css">
<!-- <link rel="stylesheet" href="./css/login.css"> -->
<link rel="stylesheet" href="./css/wjs.css">
<link rel="stylesheet" href="./css/chart.css">
<!-- <link rel="stylesheet" href="https://unpkg/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg/swiper/swiper-bundle.min.css"> -->
<!--[if lt IE 9]>
<script src="./lib/html5shiv/html5shiv.js"></script>
<script src="./lib/respond/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="wjs_nav_top">
<nav class="navbar navbar-default wjs_nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./wjs.html" class="logo">
<img width="40" src="./images/logo.jpg"/>
倾卿电影
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav hidden-sm">
<li class="active"><a href="./wjs.html">影讯&购票 <span class="sr-only">(current)</span></a></li>
<li><a href="#">选电影</a></li>
<li><a href="#">电视剧</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">影评</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="search"><input type="text"><span>搜索</span></li>
<li><a href="./login.html">登录</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="chart-content">
<h3>倾卿电影排行榜</h3>
<ul class="chart-list">
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
<li>
<div class="left"><img src="https://img9.doubanio/view/photo/s_ratio_poster/public/p2634539726.webp" /></div>
<div class="right">
<h4>法兰西特派 / 法兰西诸事周报(港) / 法兰西特派周报(台)</h4>
<div>2021-07-12(戛纳电影节) / 2021-10-22(美国) / 2021-12-14(美国网络) / 本尼西奥·德尔·托罗 / 艾德里安·布洛迪 / 蒂尔达·斯文顿 / 蕾雅·赛杜 / 弗兰西斯·麦克多蒙德 / 蒂莫西·柴勒梅德 / 琳娜·库德里 / 杰弗里·怀特 / 马修·阿马立克 / 斯蒂夫·朴</div>
<div class="score"> <span>8.7分</span>(24302人评价)</div>
</div>
</li>
</ul>
</div>
<div class="footer">
<ul class="top">
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
</ul>
<ul class="bottom">
<li>用户协议</li>
<li>用户协议</li>
<li>用户协议</li>
</ul>
</div>
<script src="./lib/jquery/jquery.js"></script>
<script src="./lib/bootstarp/js/bootstrap.js"></script>
<script src="./js/iscroll.js"></script>
<script src="./js/template.js"></script>
<!-- <script src="./js/wjs.js"></script> -->
</body>
</html>
源码获取
❉3.以上内容技术相关问题可以相互学习,获取更多源码 👇🏻👇🏻👇🏻 !
更多推荐
(定制版)学生HTML个人网页作业作品 ~ 电影官网 网页设计成品~ 学生网页设计作业源码(首页,二级页面,登录页)
发布评论