注意：本网页为自定义字体不能直接使用 想看效果自行删除自定义字体 或者去下载自定义字体（https: //font.chinaz.com/）
1、注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url("https://pic.kts.g.mi.com/3d1358b0bc7fef1e4497493964e2e38f1790956218722870038.png");
background-size: cover;
background-repeat: no-repeat;
margin-left: 0px;
padding: 0px;
font-size: 50px;
}
.in-body {
height: 500px;
width: 500px;
margin-top: 200px;
margin-left: 300px;
}
.excl {
margin: 10px;
}
.div1 {
height: 20%;
margin: 3px;
}
.div2 {
height: 10%;
margin: 3px;
}
.div3 {
height: 10%;
margin: 3px 60px;
}
.span {
margin-left: 110px;
}
.div1 input[type="text"],
.div2 input[type="password"] {
height: 30px;
width: 200px;
}
.div3 button {
height: 35px;
width: 100px;
}
div {
font-family: MyFont;
}
@font-face {
font-family: MyFont;
src: url(../作业/aoyagireisyosimo-ttf-2-01-2.ttf
)
}
</style>
</head>
<body>
<div class="in-body">
<div class="excl">
<div class="span"><span>注册用户</span></div>
<form action="../小琳同学计划/day1.html" method="get">
<div class="div1">用户名:<input type="text" value=""></div>
<div class="div2">密码 :<input type="password" value=""></div>
<div class="div3"><button tyle="submit">提交</button> <button tyle="reset">重新填写</button>
</div>
</div>
</form>
</div>
</body>
</html>
效果如下：
2.官网制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(https://stzb.res.netease.com/pc/gw/20180601170149//img/swiperI/1_fe02c2e.jpg);
margin: 0px;
background-size: cover;
background-repeat: no-repeat;
}
.top {
height: 100px;
width: 80%;
margin-left: 20%;
background-color: black;
}
.top>li {
display: inline-block;
font-size: large;
width: 16%;
text-align: center;
margin-top: 35px;
color: rgb(142, 135, 135);
}
.div121>li {
display: inline-block;
font-size: large;
width: 16%;
text-align: center;
margin-top: 15px;
color: white;
}
.top>li:hover {
color: rgb(255, 255, 255);
}
.div121>li:hover {
color: red;
}
.video {
margin-left: 250px;
margin-top: 0px;
}
video {
height: 60%;
width: 80%;
}
.div1 {
height: 300px;
width: 80%;
margin: 10px 10%;
}
.div11 {
width: 45%;
margin: 3px;
float: left;
}
.div1-in {
margin-left: 5%;
width: 100%;
height: 100%;
}
.div12 {
width: 45%;
height: 100%;
margin: 3px;
float: right;
background-color: antiquewhite;
}
.div121 {
background-color: gray;
}
.div122,
.div123,
.div124,
.div125,
.div126 {
height: 40px;
margin: 5px;
font-size: 18px;
}
/* 在CSS中添加新的`.fixed-image`类的样式 */
.fixed-image {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: url(https://stzb.res.netease.com/pc/gw/20180601170149//img/xtjh_bg_8c7e68a.png) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="top">
<li>官网首页</li>
<li>赛事汇总</li>
<li>品牌站</li>
<li>游戏库</li>
<li>网易支付</li>
<li>玩家相关</li>
</div>
<div class="video">
<video id="myVideo" src="https://nie.v.netease.com/nie/2022/1027/93e9cee3880bf6de4da168bf0c6851b1qt.mp4" muted
controls autoplay></video>
</div>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('ended', function () {
this.parentNode.removeChild(this);
});
</script>
<div class="div1">
<div class="div11"><img class="div1-in"
src="https://nie.res.netease.com/r/pic/20220919/6ffea0c0-ae64-47b3-8c48-28e56626a60b.jpg" alt=""></div>
<div class="div12">
<div class="div121">
<li>最新</li>
<li>新闻</li>
<li>公告</li>
<li>战报</li>
<hr>
</div>
<div class="div122">【新闻】全新陈寿特性卡更新预告</div>
<div class="div123">【公告】《率土之滨》07月10日例行更新预告</div>
<div class="div124">【新闻】《赤壁鏖兵》赛季调整预告</div>
<div class="div125">【新闻】《率土之滨》2024校友策略挑战赛预告</div>
<div class="div126">【新闻】全新征服赛季《决战夷陵》赛季预告（上篇）</div>
</div>
</div>
<div class="fixed-image"></div>
</body>
</html>
效果如下：
视频播放完自动关闭
3.玩家界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(https://stzb.res.netease.com/pc/qt/20170323200251/img/card_bg2_741bf37.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.div1 {
float: left;
}
.div2 {
float: right;
}
.div1,
.div2 {
width: 150px;
height: 500px;
border: 2px solid black;
margin: 100px 40px;
}
.div3 {
height: 80px;
width: 750px;
border: 2px solid red;
margin-left: 340px;
color: rgb(142, 135, 135);
background-color: black;
}
.div3>li:hover {
color: white;
}
.div3>li {
display: inline-block;
font-size: large;
text-align: center;
margin: 13px;
margin-top: 30px;
list-style-type: none;
font-size: 23px;
}
div>li {
list-style-type: none;
}
.left-top,
.right-top {
font-size: 24px;
text-align: center;
margin: 20px;
}
.in {
text-align: center;
margin-top: 20px;
height: 30px;
width: 100%;
font-size: 18px;
}
.in:hover {
background-color: antiquewhite;
color: red;
}
div {
font-family: MyFont;
}
@font-face {
font-family: MyFont;
src: url(../作业/huangkaihuaLawyerfont-2.ttf
)
}
.div4 {
height: 310px;
width: 700px;
border: 2px solid black;
margin: 0px 25%;
}
.div41 {
height: 250px;
width: 700px;
margin-top: 10px;
}
.div411,
.div412,
.div413 {
height: 240px;
width: auto;
float: left;
margin: 3px;
}
.div42 {
height: 40px;
width: auto;
margin: 3px;
}
.div42>li {
list-style-type: none;
display: inline-block;
text-align: center;
margin-top: 8px;
height: 30px;
width: 24%;
font-size: 25px;
}
.word {
float: left;
margin: 110px 25px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="div1">
<li class="left-top">英雄选择</li>
<hr>
<li class="in">曹操</li>
<li class="in">刘备</li>
<li class="in">孙权</li>
<li class="in">马超</li>
<li class="in">吕蒙</li>
<li class="in">张机</li>
<li class="in">张辽</li>
<li class="in">吕布</li>
</div>
<div class="div2">
<li class="right-top">战法选择</li>
<hr>
<li class="in">垒石迎击</li>
<li class="in">击势</li>
<li class="in">乘胜追击</li>
<li class="in">妖术</li>
<li class="in">一骑当千</li>
<li class="in">始计</li>
<li class="in">神兵天降</li>
<li class="in">大赏三军</li>
</div>
<div class="div3">
<li>强势英雄</li>
<li>强势战法</li>
<li class="li2" style="color: white;">热门阵容</li>
<li>明星直播</li>
<li>备战大厅</li>
<li>游戏手册</li>
</div>
<div class="div4">
<div class="div41">
<div><img class="div411" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100479.jpg"
alt="">
</div>
<div><img class="div412" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100526.jpg"
alt="">
</div>
<div><img class="div413" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100030.jpg"
alt="">
</div>
<div class="word">鬼吕 流氓</div>
</div>
<div class="div42">
<li>吕布</li>
<li>张机</li>
<li>孙权</li>
</div>
</div>
<div class="div4">
<div class="div41">
<div><img class="div411" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100615.jpg"
alt="">
</div>
<div><img class="div412" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100451.jpg"
alt="">
</div>
<div><img class="div413" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100620.jpg"
alt="">
</div>
<div class="word">蜀骑 破敌</div>
</div>
<div class="div42">
<li>马岱</li>
<li>关羽</li>
<li>张绣</li>
</div>
</div>
<div class="div4">
<div class="div41">
<div><img class="div411" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100013.jpg"
alt="">
</div>
<div><img class="div412" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100027.jpg"
alt="">
</div>
<div><img class="div413" src="https://cbg-stzb.res.netease.com/game_res/cards/cut/card_medium_100023.jpg"
alt="">
</div>
<div class="word">砍王 横扫</div>
</div>
<div class="div42">
<li>马超</li>
<li>张辽</li>
<li>曹操</li>
</div>
</div>
</body>
</html>
效果如下
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
