1、注册页面
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
)
}
效果如下:
2.官网制作
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;
}
var video = document.getElementById('myVideo');
video.addEventListener('ended', function () {
this.parentNode.removeChild(this);
});
src="https://nie.res.netease.com/r/pic/20220919/6ffea0c0-ae64-47b3-8c48-28e56626a60b.jpg" alt="">
效果如下:
视频播放完自动关闭
3.玩家界面
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;
}
alt="">
alt="">
alt="">
alt="">
alt="">
alt="">
alt="">
alt="">
alt="">
效果如下