HTML 第十章 开心网游戏页面
HTML代码:
开心网游戏页面
首页
征战四方
龙将
弹弹堂
凡人修真2
一骑当先
宫廷计
神仙道
三国题材横版RPG网游，丰富的
武将系统
类型：角色扮演
游戏人气：470921
一款不建主城不等CD，不占资
源，全程战斗
类型：战征策略
游戏人气：8745221
-
角色扮演
游戏人气：1765314
游戏状态：22区开启
游戏人气：1245814
游戏状态：23区开启
游戏人气：1232158
游戏状态：25区开启
游戏人气：123745
游戏状态：18区开启
游戏人气：178501
游戏状态：火爆开启
游戏人气：983014
游戏状态：2服开启
游戏人气：745214
游戏状态：4服开启
游戏人气：654814
游戏状态：火爆开启
-
新闻公告
CSS样式:
* {
margin: 0px auto;
}
header {
width: 65%;
padding-top: 8px;
border-radius: 10px;
background-color: #D13551;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
header img {
margin-bottom: -12px;
}
header .box {
display: inline-block;
width: 50px;
font-size: 16px;
margin-left: 60px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px 35px 10px 35px;
text-align: center;
font-weight: bold;
color: #D13551;
background: white;
}
header ul {
position: relative;
top: -5px;
margin-left: 550px;
font-family: "微软雅黑";
font-size: 14px;
color: white;
display: inline-block;
}
header ul li {
margin-right: 5px;
display: inline-block;
}
header ul li a {
color: white;
text-decoration: none;
}
header ul li a:hover {
color: black;
}
section .box2 {
width: 190px;
height: 240px;
float: left;
margin-top: 35px;
margin-left: 340px;
border: 1px solid gray;
border-radius: 5px;
}
section ul li {
background-image: url(../img/游戏列表灰色渐变.jpg);
background-repeat: no-repeat;
margin-left: -40px;
line-height: 35px;
}
section ul li img {
margin-right: 15px;
margin-bottom: -3px;
}
section ul li span {
color: gray;
}
section ul li:hover {
background-image: url(../img/游戏列表鼠标移入的渐变.jpg);
}
.img {
float: left;
margin-top: 20px;
margin-left: 20px;
width: 726px;
height: 272px;
overflow: hidden;
}
.box3 {
margin-left: 0px;
width: 3630px;
animation: switch 25s ease-out infinite;
}
.box3 img {
margin-right: -4px;
border-radius: 5px;
}
@keyframes switch {
0%,
20% {
margin-left: 0px;
}
25%,
45% {
margin-left: -726px;
}
50%,
70% {
margin-left: -1452px;
}
75%,
95% {
margin-left: -2178px;
}
100% {
margin-left: 0;
}
}
#num {
position: relative;
font-size: 14px;
font-family: "微软雅黑";
font-weight: 900;
bottom: 35px;
right: -5px;
text-align: center;
}
#num ul {
margin-right: 80px;
color: white;
list-style-type: none;
}
#num li {
opacity: 0.8;
width: 30px;
border-radius: 5px;
margin-top: -3px;
margin-left: 10px;
display: inline-block;
text-align: center;
height: 35px;
background: dimgray;
}
#num a {
text-decoration: none;
color: white;
}
#num ul a:hover li {
background: orangered;
}
.box4 {
position: absolute;
top: 55px;
right: -15px;
font-size: 15px;
color: gray;
font-weight: bold;
border: 1px solid gray;
border-radius: 10px;
margin-right: 340px;
margin-top: 35px;
width: 280px;
height: 240px;
}
h6 {
font-size: 15px;
color: gray;
margin: 25px 0 30px 25px;
}
.box4 span {
margin-left: 25px;
}
.box4 input {
text-indent: 0.3em;
width: 170px;
border: 1px solid gray;
line-height: 20px;
border-radius: 2px;
margin-bottom: 20px;
}
.img2 {
background-image: url(../img/btnLogin.jpg);
background-repeat: no-repeat;
border: none;
cursor: pointer;
width: 63px;
height: 24px;
margin-left: 110px;
}
.box4 p a {
text-decoration: none;
position: relative;
bottom: -12px;
margin-left: 55px;
font-size: 14px;
font-weight: 500;
}
.box5 {
margin-left: 340px;
border-radius: 5px;
width: 935px;
height: 290px;
border: 1px solid gray;
margin-top: 320px;
}
.box5 ul {
border-radius: 5px;
border: 1px solid #E4E4E4;
width: 893px;
display: inline-block;
background: #F4F4F3;
}
.box5 h3 {
margin-left: -40px;
margin-right: 25px;
font-family: "微软雅黑";
font-size: 16px;
color: #D13551;
}
.box5 li {
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
display: inline-block;
}
.box5 a {
color: gray;
}
.box5 a:hover {
color: orangered;
}
.box6 {
display: inline-block;
border-radius: 8px;
margin-left: 60px;
margin-top: 25px;
margin-right: -45px;
width: 400px;
height: 180px;
font-size: 13px;
border: 1px solid gray;
}
.box6 img {
margin: 25px 0 0 10px;
}
#box6 {
float: right;
margin-top: 20px;
}
p {
margin-bottom: 10px;
margin-right: 12px;
}
.span {
color: #D13551;
font-weight: bold;
}
.button1 {
cursor: pointer;
border: 1px solid gray;
background: white;
margin-top: 5px;
width: 50px;
height: 25px;
border-radius: 5px;
}
.button1:hover {
background: orangered;
}
.button2 {
border: 1px solid #34679A;
color: white;
background-color: #4E8AB0;
margin-top: 5px;
height: 25px;
border-radius: 5px;
}
.button2:hover {
cursor: pointer;
background: orange;
}
.box7 {
width: 935px;
border: 1px solid gray;
border-radius: 5px;
margin-top: 20px;
margin-left: 340px;
}
.box7 ul {
border-radius: 5px;
border: 1px solid #E4E4E4;
width: 893px;
display: inline-block;
background: #F4F4F3;
}
.box7 li {
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
display: inline-block;
}
.box7 h3 {
margin-left: -40px;
margin-right: 25px;
font-family: "微软雅黑";
font-size: 16px;
color: #D13551;
}
.div-box {
display: inline-block;
font-size: 14px;
font-family: "微软雅黑";
margin-left: 70px;
margin-top: 20px;
margin-bottom: 20px;
}
.div-aox {
display: inline-block;
font-size: 14px;
margin-right: 3px;
font-family: "微软雅黑";
margin-left: 75px;
margin-top: 20px;
margin-bottom: 20px;
}
.div-aox span {
font-size: 13px;
color: #d13551;
}
.div-aox p {
margin-top: 3px;
margin-bottom: 3px;
}
.box7 img{
transition: all 0.5s;
}
.box7 a:hover img{
transform: translate(-8px,0);
}
.div-box p {
margin-top: 3px;
margin-bottom: 3px;
}
.div-box span {
font-size: 13px;
color: #d13551;
}
.div-box2 {
position: absolute;
width: 280px;
top: 375px;
right: 325px;
border-radius: 5px;
border: 1px solid gray;
}
.div-box2 .ul {
border-radius: 5px;
border: 1px solid #E4E4E4;
width: 238px;
display: inline-block;
background: #F4F4F3;
}
.div-box2 .ul li {
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
display: inline-block;
}
.div-box2 h3 {
margin-left: -40px;
margin-right: 25px;
font-family: "微软雅黑";
font-size: 16px;
color: #D13551;
}
.ul-box {
font-size: 12px;
}
.box-li {
border-bottom: 1px dashed;
}
.ul-box li {
transition: all 0.3s;
line-height: 35px;
background: url(../img/rightTwo.png)0 15px no-repeat;
width: 260px;
text-indent: 3.5em;
margin-left: -30px;
}
.ul-box li:hover {
transform: translate(0,4px) scale(1.1);
}
.ul-box a:hover {
color: red;
}
.ul-box a {
text-decoration: none;
color: gray;
}
a img{
transition: all 0.5s;
}
a:hover img {
transform: translate(-10px,0);
}
.box-img{
float: right;
position: relative;
top: -440px;
left: -325px;
}
.box-img2{
float: right;
position: relative;
top: -345px;
left: -40px;
}
.box-div{
border: 1px solid gray;
position: relative;
top: -255px;
right: -485px;
border-radius: 5px;
width: 280px;
}
.box-div ul {
border-radius: 5px;
border: 1px solid #E4E4E4;
width: 238px;
display: inline-block;
background: #F4F4F3;
}
.box-div li {
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
display: inline-block;
}
.box-div h3 {
margin-left: -40px;
margin-right: 25px;
font-family: "微软雅黑";
font-size: 16px;
color: #D13551;
}
.dis{
padding: 10px 0 8px 8px;
font-size: 14px;
border-bottom: 1px dashed gray;
height: 90px;
}
.box-div p{
color: #3267A8;
position: relative;
top: -85px;
right: -140px;
}
.dis2{
padding: 10px 0 8px 8px;
font-size: 14px;
height: 90px;
}
.dis img{
transition: all 0.5s;
}
footer{
font-size: 15px;
margin-top: -225px;
margin-right: 360px;
float: right;
color: gray;
font-family: "微软雅黑";
}
footer li{
color: #6EAFE8;
margin-right: 10px;
display: inline-block;
}
.li{
margin-right: 100px;
}
.img3{
display: block;
left: 794px;
position: relative;
top: -1200px;
z-index: 10;
animation: lyar 6s ease-out;
}
@keyframes lyar{
0%{
transform: translate(0px);
}
50%{
transform: translate(-900px,600px);
}
}