HTML+CSS网页设计期末作业（原创）
效果展示
页面
首页
跳转星穹铁道游戏官方下载页面
视频欣赏
角色展示
登录界面
源码
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript " src="js/j1.js"></script>
<link href="css/c1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="bj">
<div class="daohang">
<div class="log">
<img src="img/log.png" height="50px" width="57%" />
</div>
<div class="nav">
<ul>
<li>
<a href="https://sr.mihoyo.com/" target="_blank">首页</a>
</li>
<li>
<a href="视频.html" target="_blank">视频欣赏</a>
</li>
<li>
<a href="角色.html" target="_blank">角色</a>
</li>
<li>
<a href="登录界面.html" target="_blank">登录</a>
</li>
<li>
<a href="#" target="_blank">世界</a>
</li>
<li>
<a href="#" target="_blank">漫画</a>
</li>
<li>
<a href="#" target="_blank">社区</a>
</li>
<li>
<a href="#" target="_blank">成长关爱系统</a>
</li>
</ul>
</div>
<div class="mylunbo">
<a href="javascript:;" class="arrow-l">
<</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li>
<a href="#"><img src="img/1.jpg" width="1000" height="400" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/2.png" width="1000" height="400" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/3.png" width="1000" height="400" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/轮播1.jpg" width="1000" height="400" alt="" /></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
<div class="zuobian">
<table border="0" cellspacing="60" class="ziti">
<tr>
<td>
<a href="#" target="_blank">攀岩镇</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank">太卜司</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank">流云渡</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank">迥星港</a>
</td>
</tr>
</table>
</div>
<div class="zj" align="center">
<h1 style="font-family: '微软雅黑'; font-size: 26px; color: burlywood;">
<span style="text-decoration: overline ">
希尔儿 </span> <!--上划线长度需要改-->
</h1><br />
<h2 style="color: #e8d9d0;">贝洛伯格的历史文化博物馆</h2><br />
<p>
【姓名】<br /> 希尔.没有姓氏
<br /> 命途：巡猎 属性：量子
<br /> 角色定位：高速单体爆发型输出
</p>
</div>
</div>
</div>
</body>
</html>登录界面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
* {
background-image: url(img/背景.jpg);
}
.header {
width: 100%;
height: 80px;
background: auto;
}
.display-btn {
top: 18px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
width: 80px;
height: 40px;
cursor: pointer;
background: lightsteelblue;
position: absolute;
border-radius: 10px;
transition: 0.3s;
}
.display-btn:hover {
background: black;
color: white;
}
input[type='checkbox']{
display: none;
}
#display:checked ~ .container {
display: block;
}
.container {
display: none;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: whitesmoke;
width: 350px;
height: 400px;
padding: 30px;
position: absolute;
border-radius: 15px;
opacity: 70%;
}
.close-btn {
right: 10%;
position: absolute;
color: black;
font-size: 30px;
cursor: pointer;
font-weight: bold;
background: none;
transition: 0.2s;
}
.close-btn:hover {
color: red;
}
h1 {
background: none;
text-align: center;
margin: 20px 0;
color: black;
/*text transform的话是中文就不需要哦*/
/*text-transform: uppercase;*/
}
form {
background: none;
}
label {
background: none;
color: black;
font-weight: bold;
font-size: 20px;
}
input {
background: none;
display: block;
width: 90%;
font-size: 20px;
border: none;
outline: none;
border-bottom: 2px solid black;
padding: 10px;
}
button {
display: block;
margin-top: 20px;
width: 95%;
color: white;
cursor: pointer;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
background: black;
border: none;
outline: none;
padding: 10px;
transition: 0.3s;
}
button:hover {
background: lightseagreen;
}
form a {
font-weight: bold;
color: lightseagreen;
background: none;
text-decoration: none;
transition: 0.2s;
}
form a:hover {
color: rgb(13, 84, 81);
}
.forgot {
background: none;
text-align: center;
margin: 40px 5px;
color: black;
}
</style>
</head>
<body>
<div class="header">
<input type="checkbox" id="display">
<label for="display" class="display-btn">登陆</label>
<div class="container">
<label for="display" class="close-btn" title="close">×</label>
<h1>登陆账号</h1>
<form action="#">
<label>电子邮箱/电话号码</label>
<input type="text">
<label>密码</label>
<input type="password">
<a href="#">忘记密码？</a>
<button>登陆</button>
<div class="forgot">没有账号？
<a href="#">注册</a>
</div>
</form>
</div>
</div>
</body>
</html>角色代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
background: url(img/bj2.jpg);
height: 2560px;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>视频代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
height: 100%;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<iframe src="//player.bilibili.com/player.html?aid=572032334&bvid=BV1zz4y1v7r8&cid=1157199391&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%"height="100%" > </iframe>
</div>
</body>
</html>
css代码
.daohang {
width: 100%;
height: 50px;
background-color: #656565;
text-indent: 2em;
opacity: 0.8;
position: absolute;
}
.log {
margin-left: 100px;
float: left;
}
a {
text-decoration: none;
}
.nav ul {
position: absolute;
left: 150px;
top: 0px;
}
.nav ul li {
margin-left: 5px;
height: 50px;
list-style: none;
line-height: 50px;
font-size: 20px;
float: left;
}
.nav ul li a {
display: block;
padding: 0 30px;
color: black;
}
.nav ul li a:hover {
/*鼠标滑过特效*/
border-bottom: 2px solid seagreen;
color: seagreen;
}
/*通用选择器，设置边距*/
* {
margin: 0;
padding: 0;
}
/*设置背景属性*/
.bj {
background: url(../img/背景.jpg);
height: 100%;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
* {
margin: 0;
padding: 0;
}
ul,
ol {
/* 去点 */
list-style: none;
}
.focus {
position: relative;
width: 721px;
height: 455px;
overflow: hidden;
}
.focus ul {
/* 添加定位使用动画效果 */
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
/* 左浮动 */
float: left;
}
.focus .left,
.right {
display: none;
position: absolute;
top: 216px;
left: 0;
width: 27px;
height: 20px;
background-color: black;
opacity: 0.5;
text-align: center;
line-height: 20px;
color: #fff;
}
.focus .right {
left: 694px;
}
.circle {
position: absolute;
top: 420px;
left: 20%;
}
.circle li {
float: left;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 10px;
margin-left: 3px;
}
.current {
background-color: #fff;
}
/*//轮播图*/
* {
padding: 0;
margin: 0;
}
.mylunbo {
margin-top: 30%;
left: 15%;
position: relative;
width: 1000px;
height: 300px;
overflow: hidden;
}
.mylunbo ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
ul li {
float: left;
list-style-type: none;
}
ol li {
list-style-type: none;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
/*高度40，上移20*/
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 500px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(240, 120, 120, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
/*//左边的盒子*/
.zuobian {
width: 200px;
height: 400px;
position: absolute;
top: 120px;
left: 7px;
color: white;
/*background-color: #d1cfcf;*/
}
.ziti{
font-size: 25px;
font-family: "微软雅黑";
font-weight: 500;
}
a{
color:black ;
}
a:hover{
color: black;
background-color: aliceblue;
}
/*中间的盒子*/
.zj{
width: 480px;
height: 340px;
top:98px;
left: 268px;
position: absolute;
/*background-color: red;*/
}
p{
font-family: "微软雅黑";
font-size: 26px;
letter-spacing: 2px;
color: #d9ccbc;;
}
js代码
function animate(obj, length, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (length - obj.offsetLeft) / 10; // 缓动效果，步长=（目标值-当前值）/10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == length) {
clearInterval(obj.timer);
if(callback)
callback();
//callback && callback()
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
window.addEventListener('load', function() {
const lunbo = document.querySelector(".mylunbo");
const arrowl = document.querySelector(".arrow-l");
const arrowr = document.querySelector(".arrow-r");
var num = 0; // 左右移动按钮定位图片
var circle = 0; // 定位小圆点
var flag = true; // 节流阀
//1、右侧按钮，左侧按钮
lunbo.addEventListener('mouseenter', function() {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
clearInterval(timer); // 清楚计时器，轮播图不自动播放
//timer=null; // 清楚timer变量
});
lunbo.addEventListener('mouseleave', function() {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
timer = setInterval(function() {
arrowr.click();
}, 2000);
});
//2、创建小圆点
const ul = lunbo.querySelector("ul");
const ol = lunbo.querySelector("ol");
for(let i = 0; i < ul.children.length; i++) { // 根据图片数量生成小圆点
let li = document.createElement("li");
li.setAttribute('index', i); // 添加自定义属性index
ol.appendChild(li);
//3、添加小圆圈点击事件
li.onclick = function() {
for(let i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//4、小圆圈动画
let lunbowidth = lunbo.offsetWidth;
let index = this.getAttribute('index');
num = circle = index; // 点击小圆点时，将num和circle的值赋值为index，即将小圆点顺序和左右按钮的num定位到当前图片
animate(ul, -index * lunbowidth); // 调用动画函数，-index*lunboWidth为终点位置
}
}
//5、克隆子元素-->ABCDA，此时最后一张图为第一张图的复制！！
let child = ul.children[0].cloneNode(true);
ul.appendChild(child);
ol.children[0].className = 'current';
//6、右侧按钮点击事件
arrowr.addEventListener('click', function() {
if(flag) {
flag = false; // 未完成轮播动画，不能轮播，设置为false
if(num == ul.children.length - 1) {
ul.style.left = 0; // 当点击到最后一个图片时，即和第一幅图相同的那张，num为ul.children.length-1,先切换到第一张(很快),执行动画切换到第二张
num = 0; // num重新设为0，后面再加1
}
num++;
animate(ul, -num * lunbo.offsetWidth, function() {
flag = true; // 将flag设置为true，可以再次点击轮播
});
circle++;
if(circle == ol.children.length - 1) // 当小圆圈移动到最后，点击右移，circle+1,此时circle为ol.children.length
circle = 0;
setCurrent();
}
})
//7、左侧点击事件
arrowl.addEventListener('click', function() {
if(flag) {
flag = false;
if(num == 0) {
num = ul.children.length - 1; // 当轮播图为第一张图时，num设为最后一张图的index，之后再减一
ul.style.left = -num * lunbo.offsetWidth + 'px'; // 先切换到最后一张图，之后再调用动画函数到实际倒数第二图
}
num--;
animate(ul, -num * lunbo.offsetWidth, function() {
flag = true;
});
circle--;
if(circle == -1) // 当小圆圈在第一个位置时，点击左移，circle-1，此时circle为-1
circle = ol.children.length - 1;
setCurrent();
}
});
var timer = setInterval(function() {
arrowr.click();
}, 2000);
function setCurrent() {
for(let i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
})注意
如果需要原素材请后台私信我
扫一扫
3295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
