这是刚刚学习CSS的时候，做的Steam商店主页，仅有一个简单的轮播图，和一些简单的hover样式。
效果图
下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的 Steam</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
/* 头部 */
.Header {
height: 100px;
min-width: 940px;
background-color: #171a21;
font-family: "Motiva Sans", Sans-serif;
font-weight: normal;
font-size: 14px;
}
.Header .HeaderContent {
width: 940px;
height: 100px;
margin: 0 auto;
color: #c6d4df;
position: relative;
}
.Header .HeaderContent .Headerlogo {
width: 176px;
padding-top: 30px;
height: 44px;
}
.Header .HeaderContent .HeaderMenu {
width: 168px;
height: 68px;
position: absolute;
left: 200px;
top: 0px;
/* background-color: red; */
}
.Header .HeaderContent .HeaderMenu a {
text-decoration: none;
color: #b8b6b4;
padding-top: 45px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
line-height: 16px;
float: left;
font-size: 14px;
}
.Header .HeaderContent .HeaderMenu a:hover {
color: #ffffff;
}
.Header .HeaderContent .HeaderMenu a:first-child:hover~.secondOne {
display: block;
}
/* .Header .HeaderContent .HeaderMenu .secondOne{
display: block;
} */
/* .Header .secondOne:hover{
display: block;
} */
.Header .HeaderContent .HeaderMenu a:nth-child(2):hover~.secondTwo {
display: block;
}
/* .Header .secondTwo:hover{
display: block;
} */
.Header .HeaderContent .HeaderMenu .secondOne {
width: 68px;
height: 168px;
background: #171a21;
padding: 10px 10px 5px 10px;
position: absolute;
top: 60px;
z-index: 8;
box-shadow: 3px 3px 5px -3px #000;
text-align: left;
display: none;
}
.Header .HeaderContent .HeaderMenu .secondTwo {
width: 68px;
height: 148px;
background: #171a21;
padding: 10px 10px 5px 10px;
position: absolute;
top: 60px;
left: 45px;
z-index: 8;
box-shadow: 3px 3px 5px -3px #000;
text-align: left;
display: none;
}
.Header .HeaderContent .HeaderMenu .secondOne>a {
font-size: 11px;
color: #b8b6b4;
padding: 6px 10px 6px 0;
cursor: pointer;
}
.Header .HeaderContent .HeaderMenu .secondTwo>a {
font-size: 11px;
color: #b8b6b4;
padding: 6px 20px 6px 0;
cursor: pointer;
}
.Header .HeaderContent .HeaderMenu .secondOne>a:hover {
color: #ffffff;
}
.Header .HeaderContent .HeaderMenu .secondTwo>a:hover {
color: #ffffff;
}
.Header .HeaderContent .HeaderLoginMenu {
position: absolute;
right: 100px;
top: 6px;
/* background-color: red; */
line-height: 24px;
width: 200px;
height: 24px;
width: 107px;
background-color: #5c7e10;
background-image: url("./steam Website/btn_header_installsteam_download.png");
background-position: 10px 5px;
background-repeat: no-repeat;
}
.Header .HeaderContent .HeaderLoginMenu a {
font-size: 11px;
font-family: "Motiva Sans", Sans-serif;
padding-left: 35px;
padding-right: 9px;
color: #e5e4dc;
font-weight: normal;
text-decoration: none;
width: 66px;
position: absolute;
left: 0;
}
.Header .HeaderContent .HeaderLoginMenu a:hover{
color: #ffff;
}
.Header .HeaderContent .HeaderLoginMenu .login {
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #b8b6b4;
padding: 0 4px;
cursor: pointer;
position: absolute;
left: 110px;
width: 40px;
max-height: 24px;
}
.Header .HeaderContent .HeaderLoginMenu .login:hover{
color: #ffffff;
}
.Header .HeaderContent .HeaderLoginMenu .lang {
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #b8b6b4;
padding: 0 4px;
cursor: pointer;
position: absolute;
left: 150px;
width: 50px;
max-height: 24px;
background-image: url("./steam Website/btn_arrow_down_padded.png");
background-position: 31px 6px;
background-repeat: no-repeat;
}
/* 内容第一段 */
.ContentOne {
min-width: 972px;
height: 4128px;
background-color: #fff;
background-image: radial-gradient(circle closest-corner at 40% 0%, #184353 0%, #1F3658 30%, #1B293A 100%);
}
/* 用来给后续定位，不会挡道二级菜单 */
.kong {
position: relative;
}
/* 内容第一段，左边小菜单开始 */
.ContentOne .leftMenu {
width: 210px;
height: 924px;
/* border: 1px solid red; */
position: absolute;
top: 31px;
left: 55px;
}
.ContentOne .leftMenu .leftMenup1 {
max-width: 100%;
}
.ContentOne .leftMenu ul {
list-style: none;
color: #c6d4df;
font-size: 11px;
margin-bottom: 7px;
line-height: 16px;
}
.ContentOne .leftMenu ul li {
margin: 7px 0 3px 0;
line-height: 16px;
}
.ContentOne .leftMenu ul li:last-child {
margin: 7px 0 14px 0;
}
.ContentOne .leftMenu ul li a:hover {
color: #fff;
}
.ContentOne .leftMenu ul li a {
text-decoration: none;
color: #66c0f4;
font-size: 13px;
font-family: "Motiva Sans", Sans-serif;
}
.ContentOne .leftMenu ul li div {
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
}
/* 内容第一段，左边小菜单结束 */
/* 内容第一段，顶部导航开始 */
.ContentOne .storeNav {
position: absolute;
top: 24px;
left: 290px;
height: 35px;
width: 940px;
margin: 7px 0 7px 0;
/* border: 1px solid white; */
background-image: linear-gradient(to right, #3B6490, #2B4B84, #0F216E);
z-index: 5;
}
.ContentOne .storeNav ul {
text-align: center;
vertical-align: center;
}
.ContentOne .storeNav ul li {
float: left;
/* background-color: #fff; */
list-style: none;
height: 35px;
line-height: 35px;
width: 56px;
padding: 0 5px 0 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
text-shadow: 0px 2px 3px rgb(0 0 0 / 30%);
color: #d9d9d9;
/* padding-top: 10px; */
}
.ContentOne .storeNav .store {
display: inline;
width: 76px;
height: 35px;
position: absolute;
top: 0;
left: 0;
}
.ContentOne .storeNav .new {
display: inline;
width: 103px;
height: 35px;
position: absolute;
top: 0;
left: 77px;
}
.ContentOne .storeNav .kind{
display: inline;
width: 77px;
height: 35px;
position: absolute;
top: 0;
left: 180px;
}
.ContentOne .storeNav .store:hover~.secondOne {
display: flex;
}
.ContentOne .storeNav .secondOne:hover{
display: flex;
}
.ContentOne .storeNav .store:hover~ul>.yourStore {
cursor: pointer;
background-image: linear-gradient(to right, #3180BF, rgba(55, 106, 156, 0.5));
}
.ContentOne .storeNav .new:hover~.secondTwo {
display: flex;
}
.ContentOne .storeNav .secondTwo:hover{
display: flex;
}
.ContentOne .storeNav .new:hover~ul>.news {
cursor: pointer;
background-image: linear-gradient(to right, #3180BF, rgba(55, 106, 156, 0.5));
}
.ContentOne .storeNav .kind:hover~.secondThree {
display: flex;
}
.ContentOne .storeNav .secondThree:hover{
display: flex;
}
.ContentOne .storeNav ul li:nth-child(2) {
width: 86px;
padding: 0 6px 0 11px;
}
.ContentOne .storeNav ul li:nth-child(3) {
width: 56px;
padding: 0 6px 0 15px;
}
.ContentOne .storeNav ul li img {
float: left;
width: 26px;
height: 26px;
margin-right: -10px;
}
.ContentOne .storeNav ul li:not(.emptyNav, .search):hover {
cursor: pointer;
background-image: linear-gradient(to right, #3180BF, rgba(55, 106, 156, 0.5));
}
.ContentOne .storeNav ul .emptyNav {
width: 210px;
}
.ContentOne .storeNav ul .search {
width: 205px;
height: 35px;
margin-left: 20px;
padding: 0;
}
.ContentOne .storeNav ul li .searchFor {
background-color: #316282;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
height: 25px;
box-sizing: border-box;
margin-right: 0;
margin-top: 5px;
position: relative;
}
.ContentOne .storeNav ul li .searchFor:hover {
border: 1px solid blue;
}
.ContentOne .storeNav ul li input {
height: 27px;
width: calc(100% - 25px - 8px);
color: #081116;
font-size: 14px;
text-shadow: 1px 1px 0px rgb(255 255 255 / 10%);
font-family: "Motiva Sans", Sans-serif;
font-weight: 300;
outline: none;
background-color: transparent;
border: none;
position: absolute;
left: 0;
font-style: italic;
margin-left: 8px
}
.ContentOne .storeNav ul li .searchFor img {
width: 23px;
height: 23px;
position: absolute;
top: 0px;
right: 11px;
}
.ContentOne .storeNav .secondOne {
width: 177px;
height: 126px;
background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%),
linear-gradient(180deg, #575860 11.6%, #3A4852 54.73%, #2C2D34 100%);
position: absolute;
top: 35px;
/* z-index: 999; */
display: flex;
flex-direction: column;
padding: 8px 5px 8px 5px;
box-shadow: 0 0 12px #000000;
display: none;
}
.ContentOne .storeNav .secondTwo {
width: 177px;
height: 156px;
background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%),
linear-gradient(180deg, #575860 11.6%, #3A4852 54.73%, #2C2D34 100%);
position: absolute;
top: 35px;
left: 76px;
/* z-index: 999; */
display: flex;
flex-direction: column;
padding: 8px 5px 8px 5px;
box-shadow: 0 0 12px #000000;
display: none;
}
.ContentOne .storeNav .secondThree {
width: 940px;
height: 560px;
background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%),
linear-gradient(180deg, #575860 11.6%, #3A4852 54.73%, #2C2D34 100%);
position: absolute;
top: 35px;
left: 0px;
/* z-index: 999; */
display: flex;
flex-direction: row;
padding: 8px 5px 8px 5px;
box-shadow: 0 0 12px #000000;
display: none;
}
/* .ContentOne .storeNav .secondTwo>div:nth-child(1){
} */
.ContentOne .storeNav .secondOne>a {
color: #D8D8D8;
font-size: 12px;
text-align: left;
text-decoration: none;
margin: 6px 0 6px 15px;
}
.ContentOne .storeNav .secondTwo>a{
color: #D8D8D8;
font-size: 12px;
text-align: left;
text-decoration: none;
margin: 6px 0 6px 15px;
}
.ContentOne .storeNav .secondOne>a:hover {
text-decoration: 2px underline white;
}
.ContentOne .storeNav .secondTwo>a:hover {
text-decoration: 2px underline white;
}
/* 内容第一段，顶部导航栏结束 */
/* 第一轮播图开始 */
.ContentOne .firstP {
max-width: 940px;
height: 426px;
/* background-color: gray; */
position: absolute;
top: 76px;
left: 290px;
/* z-index: 5; */
}
.ContentOne .firstP .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
}
.ContentOne .firstP .swipe {
width: 940px;
height: 353px;
background-color: #0B151E;
display: flex;
box-shadow: 0 0 7px 0px #000;
}
.ContentOne .firstP .swipe .swipeLeft {
width: 616px;
height: 353px;
/* background-color: turquoise; */
background: url("./steam Website/第一个轮播图/CSGO——big.jpg");
animation: firstP 32s steps(1) 4s infinite alternate;
/* z-index: 5; */
background-repeat: no-repeat;
background-size: 100% 100%;
transition: opacity 300ms;
/* position: absolute;
top: 29.2px;
left: 0; */
}
@keyframes firstP {
0% {
background: url("./steam Website/第一个轮播图/CSGO——big.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
20% {
background: url("./steam Website/第一个轮播图/战锤-b.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
40% {
background: url("./steam Website/第一个轮播图/无主之地.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
60% {
background: url("./steam Website/第一个轮播图/杀手2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
80% {
background: url("./steam Website/第一个轮播图/俄罗斯钓鱼-头.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background: url("./steam Website/第一个轮播图/古剑奇谭-B.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.ContentOne .firstP .swipe .appName {
width: 314px;
height: 69px;
/* background-color: tomato; */
padding-left: 6px;
padding-right: 6px;
color: #fff;
cursor: pointer;
display: flex;
}
.ContentOne .firstP .swipe .appName>div {
align-items: center;
justify-self: center;
max-height: 62px;
overflow: hidden;
font-size: 24px;
padding-bottom: 4px;
padding-top: 4px;
line-height: 26px;
font-weight: 400;
}
.ContentOne .firstP .swipe .screenshots {
width: 327px;
height: 162px;
padding-right: 5px;
/* background-color: #fff; */
display: flex;
flex-wrap: wrap;
}
.ContentOne .firstP .swipe .screenshots>div {
width: 155px;
height: 70px;
margin: 0px 0px 12px 5px;
/* background-color: aliceblue; */
}
.ContentOne .firstP .swipe .screenshots>div:first-child {
background: url("./steam Website/第一个轮播图/CSGO-1.jpg") no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.6;
animation: firstP-1 32s steps(1) 4s infinite alternate;
}
@keyframes firstP-1 {
0% {
background: url("./steam Website/第一个轮播图/CSGO-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
20% {
background: url("./steam Website/第一个轮播图/war-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
40% {
background: url("./steam Website/第一个轮播图/无主-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
60% {
background: url("./steam Website/第一个轮播图/杀手-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
80% {
background: url("./steam Website/第一个轮播图/俄罗斯钓鱼-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background: url("./steam Website/第一个轮播图/古剑奇谭-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.ContentOne .firstP .swipe .screenshots>div:nth-child(2) {
background: url("./steam Website/第一个轮播图/CSGO-2.jpg") no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.6;
animation: firstP-2 32s steps(1) 4s infinite alternate;
}
@keyframes firstP-2 {
0% {
background: url("./steam Website/第一个轮播图/CSGO-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
20% {
background: url("./steam Website/第一个轮播图/war-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
40% {
background: url("./steam Website/第一个轮播图/无主-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
60% {
background: url("./steam Website/第一个轮播图/杀手-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
80% {
background: url("./steam Website/第一个轮播图/俄罗斯钓鱼-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background: url("./steam Website/第一个轮播图/古剑奇谭-2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.ContentOne .firstP .swipe .screenshots>div:nth-child(3) {
background: url("./steam Website/第一个轮播图/CSGO-3.jpg") no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.6;
animation: firstP-3 32s steps(1) 4s infinite alternate;
}
@keyframes firstP-3 {
0% {
background: url("./steam Website/第一个轮播图/CSGO-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
20% {
background: url("./steam Website/第一个轮播图/war-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
40% {
background: url("./steam Website/第一个轮播图/无主-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
60% {
background: url("./steam Website/第一个轮播图/杀手-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
80% {
background: url("./steam Website/第一个轮播图/俄罗斯钓鱼-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background: url("./steam Website/第一个轮播图/古剑奇谭-3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.ContentOne .firstP .swipe .screenshots>div:nth-child(4) {
background: url("./steam Website/第一个轮播图/CSGO-4.jpg") no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.6;
animation: firstP-4 32s steps(1) 4s infinite alternate;
}
@keyframes firstP-4 {
0% {
background: url("./steam Website/第一个轮播图/CSGO-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
20% {
background: url("./steam Website/第一个轮播图/war-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
40% {
background: url("./steam Website/第一个轮播图/无主-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
60% {
background: url("./steam Website/第一个轮播图/杀手-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
80% {
background: url("./steam Website/第一个轮播图/俄罗斯钓鱼-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background: url("./steam Website/第一个轮播图/古剑奇谭-4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.ContentOne .firstP .swipe .screenshots>div:hover {
opacity: 1;
}
.ContentOne .firstP .swipe .reason {
width: 298px;
height: 57px;
margin-top: 8px;
padding-left: 6px;
/* background-color: aqua; */
}
.ContentOne .firstP .swipe .reason>div:first-child {
color: #fff;
padding-left: 10px;
line-height: 18px;
font-size: 21px;
font-weight: 200;
}
.ContentOne .firstP .swipe .reason>div:nth-child(2) {
color: #fff;
background-color: rgba(96, 96, 96, 0.5);
margin: 8px 0 0 10px;
display: inline-block;
line-height: 19px;
padding: 0 7px;
font-size: 11px;
border-radius: 2px;
}
.ContentOne .firstP .swipe .money {
color: #acdbf5;
margin-top: 30px;
padding-left: 20px;
font-size: 11px;
position: relative;
}
.ContentOne .firstP .swipe .money img:first-child {
position: absolute;
right: 10px;
opacity: 0.7;
}
.ContentOne .firstP .swipe .money img:nth-child(2) {
position: absolute;
right: 30px;
opacity: 0.7;
}
.ContentOne .firstP .swipe .money img:nth-child(3) {
position: absolute;
right: 50px;
opacity: 0.7;
}
.ContentOne .firstP .swipe .swipePoint {
width: 940px;
height: 41px;
/* background-color: #fff; */
position: absolute;
bottom: 0;
text-align: center;
}
.ContentOne .firstP .swipe .swipePoint>div {
display: inline-block;
margin: 12px 2px;
width: 15px;
height: 9px;
border-radius: 2px;
background-color: hsla(202, 60%, 100%, 0.2);
cursor: pointer;
font-size: 12px;
}
.ContentOne .firstP .swipe .swipePoint>div:hover {
background-color: hsla(202, 60%, 100%, 0.3);
}
.ContentOne .firstP .swipe .swipePoint>div:first-child {
background-color: hsla(202, 60%, 100%, 0.6);
}
.ContentOne .firstP .swipe:hover .swipeLeft {
animation-play-state: paused;
}
.ContentOne .firstP .swipe:hover .screenshots>div {
animation-play-state: paused;
}
.ContentOne .firstP .leftArrow {
width: 23px;
height: 36px;
position: absolute;
left: -46px;
top: 122px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .firstP .leftArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
background-position-x: 23px;
}
.ContentOne .firstP .rightArrow {
width: 23px;
height: 36px;
position: absolute;
right: -46px;
top: 122px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .firstP .rightArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
}
.ContentOne .firstP .leftArrow:hover {
background: linear-gradient(to right, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
.ContentOne .firstP .rightArrow:hover {
background: linear-gradient(to left, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
/* 内容第一部分，轮播图结束 */
/* 特别优惠部分开始 */
.ContentOne .specialOffers {
width: 940px;
height: 473px;
position: absolute;
top: 515px;
left: 290px;
}
.ContentOne .specialOffers .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
}
.ContentOne .specialOffers .tittle .btn {
position: absolute;
right: 0;
top: 0;
padding: 0 15px;
font-size: 12px;
line-height: 20px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px;
cursor: pointer;
}
.ContentOne .specialOffers .content {
width: 940px;
height: 402px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ContentOne .specialOffers .content .left {
width: 306px;
height: 400px;
background-image: url("./steam Website/特别优惠/background_spotlight.jpg");
box-shadow: 0 0 5px #000000
}
.ContentOne .specialOffers .content .left img {
width: 306px;
cursor: pointer;
}
.ContentOne .specialOffers .content .left h4 {
font-size: 14px;
color: #fff;
margin: 0 0 10px;
letter-spacing: 0.03em;
font-weight: normal;
padding-top: 2px;
margin-top: 10px;
margin-left: 16px;
}
.ContentOne .specialOffers .content .mid {
width: 306px;
height: 400px;
box-shadow: 0 0 5px #000000;
position: relative;
}
.ContentOne .specialOffers .content .mid .top {
width: 306px;
}
.ContentOne .specialOffers .content .mid .bottom {
width: 274px;
height: 113px;
background: url("./steam Website/特别优惠/background_spotlight.jpg") bottom center no-repeat;
position: absolute;
bottom: 0;
padding: 8px 16px 12px 16px;
}
.ContentOne .specialOffers .content .mid .bottom h4 {
font-size: 14px;
color: #fff;
margin: 0 0 10px;
letter-spacing: 0.03em;
font-weight: normal;
padding-top: 6px;
margin-bottom: 16px;
}
.ContentOne .specialOffers .content .mid .bottom h6 {
font-weight: 400;
color: #acdbf5;
font-size: 10px
}
.ContentOne .specialOffers .content .mid .bottom .money {
width: 274px;
height: 34px;
/* background-color: tomato; */
position: absolute;
left: 16px;
bottom: 12px;
}
.ContentOne .specialOffers .content .mid .bottom .money .discount>div:first-child {
color: #a4d007;
background: #4c6b22;
display: inline-block;
line-height: 34px;
padding: 0 5px;
font-weight: 300;
font-size: 26px;
}
.ContentOne .specialOffers .content .mid .bottom .money .prices {
width: 25px;
height: 25px;
padding: 4px 10px 4px 7px;
background-color: rgba(0, 0, 0, 0.6);
display: inline-block;
vertical-align: bottom;
text-align: right;
margin-left: -5px;
}
.ContentOne .specialOffers .content .mid .bottom .money .prices>div:first-child {
color: #7193a6;
text-decoration: line-through;
font-size: 11px;
line-height: 13px;
}
.ContentOne .specialOffers .content .mid .bottom .money .prices>div:last-child {
color: #acdbf5;
font-size: 13px;
line-height: 13px;
}
.ContentOne .specialOffers .content .mid img {
width: 306px;
cursor: pointer;
}
.ContentOne .specialOffers .content .right {
width: 306px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ContentOne .specialOffers .content .right>.rightOne,
.rightTwo {
height: 190px;
background: linear-gradient(to bottom, #ffffff 5%, #abdaf4 95%);
position: relative;
}
.ContentOne .specialOffers .content .right .rightOne>img,
.rightTwo>img {
width: 306px;
height: 143px;
}
.ContentOne .specialOffers .content .right .rightOne>img,
.rightTwo>img:hover {
cursor: pointer;
}
.ContentOne .specialOffers .content .right .rightOne .money {
height: 34px;
/* background-color: tomato; */
padding: 0 5px 0 5px;
position: absolute;
right: 0;
bottom: 6px;
}
.ContentOne .specialOffers .content .right .rightTwo .money {
height: 34px;
/* background-color: tomato; */
padding: 0 5px 0 5px;
position: absolute;
right: 0;
bottom: 6px;
}
.ContentOne .specialOffers .content .right .rightOne .money .discount>div:first-child {
color: #a4d007;
background: #4c6b22;
display: inline-block;
line-height: 34px;
padding: 0 5px;
font-weight: 300;
font-size: 26px;
}
.ContentOne .specialOffers .content .right .rightOne .money .prices {
width: 25px;
height: 25px;
padding: 4px 10px 4px 7px;
background-color: rgba(0, 0, 0, 0.6);
display: inline-block;
vertical-align: bottom;
text-align: right;
margin-left: -5px;
}
.ContentOne .specialOffers .content .right .rightOne .money .prices>div:first-child {
color: #7193a6;
text-decoration: line-through;
font-size: 11px;
line-height: 13px;
}
.ContentOne .specialOffers .content .right .rightOne .money .prices>div:last-child {
color: #acdbf5;
font-size: 13px;
line-height: 13px;
}
.ContentOne .specialOffers .content .right .rightOne .time {
font-size: 11px;
width: 60px;
height: 33px;
padding: 5px 7px 4px;
}
.ContentOne .specialOffers .content .right .rightOne .time>div:first-child {
height: 16px;
}
.ContentOne .specialOffers .content .right .rightOne .time>.trueTime {
width: 47px;
height: 13px;
font-size: 10px;
padding: 1px 4px;
background-color: #4f95bd;
color: #c4e4f2;
}
.ContentOne .specialOffers .content .right .rightTwo .money .discount>div:first-child {
color: #a4d007;
background: #4c6b22;
display: inline-block;
line-height: 34px;
padding: 0 5px;
font-weight: 300;
font-size: 26px;
}
.ContentOne .specialOffers .content .right .rightTwo .money .prices {
width: 25px;
height: 25px;
padding: 4px 10px 4px 7px;
background-color: rgba(0, 0, 0, 0.6);
display: inline-block;
vertical-align: bottom;
text-align: right;
margin-left: -5px;
}
.ContentOne .specialOffers .content .right .rightTwo .money .prices>div:first-child {
color: #7193a6;
text-decoration: line-through;
font-size: 11px;
line-height: 13px;
}
.ContentOne .specialOffers .content .right .rightTwo .money .prices>div:last-child {
color: #acdbf5;
font-size: 13px;
line-height: 13px;
}
.ContentOne .specialOffers .content .OffersPoint {
width: 940px;
height: 41px;
/* background-color: #fff; */
position: absolute;
bottom: 0;
text-align: center;
}
.ContentOne .specialOffers .content .OffersPoint>div {
display: inline-block;
margin: 12px 0;
width: 15px;
height: 9px;
border-radius: 2px;
background-color: hsla(202, 60%, 100%, 0.2);
cursor: pointer;
font-size: 12px;
}
.ContentOne .specialOffers .content .OffersPoint>div:hover {
background-color: hsla(202, 60%, 100%, 0.3);
}
.ContentOne .specialOffers .content .OffersPoint>div:first-child {
background-color: hsla(202, 60%, 100%, 0.6);
}
.ContentOne .specialOffers .leftArrow {
width: 23px;
height: 36px;
position: absolute;
left: -46px;
top: 35%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .specialOffers .leftArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
background-position-x: 23px;
}
.ContentOne .specialOffers .rightArrow {
width: 23px;
height: 36px;
position: absolute;
right: -46px;
top: 35%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .specialOffers .rightArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
}
.ContentOne .specialOffers .leftArrow:hover {
background: linear-gradient(to right, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
.ContentOne .specialOffers .rightArrow:hover {
background: linear-gradient(to left, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
/* 特别优惠结束 */
/* 社区推荐 */
.ContentOne .community {
width: 940px;
height: 456px;
position: absolute;
top: 1015px;
left: 290px;
}
.ContentOne .community .tittleOne {
width: 940px;
height: 36px;
color: #ffffff;
font-weight: 300;
font-size: 21px;
letter-spacing: 0.07em;
margin-bottom: -10px;
}
.ContentOne .community .tittleTwo {
height: 20px;
color: #fff;
margin: 0 0 10px;
letter-spacing: 0.03em;
font-size: 14px;
}
.ContentOne .community .game {
width: 100%;
height: 353px;
box-shadow: 0 0 4px #000;
display: flex;
}
.ContentOne .community .game .gameP {
width: 616px;
height: 100%;
background-color: #fff;
background: url("./steam Website/特别优惠/骑砍.jpg");
position: relative;
}
.ContentOne .community .game .gameP .price {
width: 50px;
height: 21px;
background: #000000;
position: absolute;
right: 0;
bottom: 42px;
color: #acdbf5;
font-size: 13px;
text-align: center;
vertical-align: center;
padding-top: 2px;
}
.ContentOne .community .game .gameT {
width: 319px;
height: 100%-40px;
background: linear-gradient(to bottom, #506c86 5%, #10143100 96%);
padding: 20px;
}
.ContentOne .community .game .gameT .playerT {
width: 300px;
height: 210px;
font-weight: normal;
font-size: 18px;
height: 210px;
color: #ebebeb;
overflow-wrap: break-word;
overflow: hidden;
}
.ContentOne .community .game .gameT .tAll {
width: 72px;
height: 14px;
color: #c1dbf4;
margin: 0 auto;
font-size: 12px;
}
.ContentOne .community .game .gameT .player {
width: 300px;
height: 60px;
margin-top: 20px;
position: relative;
}
.ContentOne .community .game .gameT .player .hand {
width: 40px;
height: 40px;
background-color: aquamarine;
background: url("./steam Website/长权.jpg") no-repeat;
background-size: cover;
background-position: center center;
}
.ContentOne .community .game .gameT .player .name {
position: absolute;
top: 0;
left: 47px;
color: #c1dbf4;
font-size: 13px;
font-weight: bold;
}
.ContentOne .community .game .gameT .player .hour {
position: absolute;
top: 19px;
left: 47px;
font-size: 10px;
color: #8091a2;
}
.ContentOne .community .game .gameT .player .num {
position: absolute;
top: 36px;
left: 47px;
font-size: 10px;
color: #8091a2;
}
.ContentOne .community .game .gameT .btn {
width: 316px;
height: 24px;
display: flex;
justify-content: space-between;
}
.ContentOne .community .game .gameT .btn .num {
color: #66c0f4;
font-size: 12px;
}
.ContentOne .community .game .gameT .btn .btnOne,
.btnTwo {
width: 8px;
line-height: 22px;
background-color: rgba(103, 193, 245, 0.2);
border: 1px transparent;
border-radius: 3px;
cursor: pointer;
padding: 0px 16px;
color: #66c0f4;
font-size: 12px;
text-align: center;
}
.ContentOne .community .CommunityPoint {
width: 940px;
height: 41px;
/* background-color: #fff; */
position: absolute;
bottom: 0;
text-align: center;
}
.ContentOne .community .CommunityPoint>div {
display: inline-block;
margin: 12px 0;
width: 15px;
height: 9px;
border-radius: 2px;
background-color: hsla(202, 60%, 100%, 0.2);
cursor: pointer;
font-size: 12px;
}
.ContentOne .community .CommunityPoint>div:hover {
background-color: hsla(202, 60%, 100%, 0.3);
}
.ContentOne .community .CommunityPoint>div:first-child {
background-color: hsla(202, 60%, 100%, 0.6);
}
.ContentOne .community .leftArrow {
width: 23px;
height: 36px;
position: absolute;
left: -46px;
top: 35%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .community .leftArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
background-position-x: 23px;
}
.ContentOne .community .rightArrow {
width: 23px;
height: 36px;
position: absolute;
right: -46px;
top: 35%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .community .rightArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
}
.ContentOne .community .leftArrow:hover {
background: linear-gradient(to right, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
.ContentOne .community .rightArrow:hover {
background: linear-gradient(to left, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
/* 社区推荐 结束*/
/* 浏览Steam开始 */
.ContentOne .browseSt {
width: 940px;
height: 95px;
position: absolute;
top: 1525px;
left: 290px;
}
.ContentOne .browseSt .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
}
.ContentOne .browseSt .content {
width: 940px;
height: 58px;
display: flex;
justify-content: space-between;
}
.ContentOne .browseSt .content>div {
width: 229px;
height: 58px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
font-weight: 500;
letter-spacing: 0.03em;
text-align: center;
background: linear-gradient(90deg, #06BFFF 0%, #2D73FF 100%);
border-radius: 3px;
box-shadow: 0 0 4px #000;
cursor: pointer;
}
.ContentOne .browseSt .content>div:hover {
background: linear-gradient(90deg, #06BFFF 0%, #06BFFF 50%, #2D73FF 100%);
}
/* 浏览Steam结束 */
/* 热门VR游戏开始 */
.ContentOne .Vr {
width: 940px;
height: 210px;
position: absolute;
top: 1660px;
left: 290px;
}
.ContentOne .Vr .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
}
.ContentOne .Vr .content {
width: 940px;
height: 175px;
position: relative;
}
.ContentOne .Vr .content .vrGame {
width: 940px;
height: 134px;
display: flex;
justify-content: space-between;
}
.ContentOne .Vr .content .vrGame>div {
width: 229px;
height: 134px;
background: linear-gradient(-45deg, rgba(64, 121, 153, 1) 5%, rgba(42, 62, 89, 1) 95%);
position: relative;
}
.ContentOne .Vr .content .vrGame>div>img {
width: 229px;
height: 103px;
}
.ContentOne .Vr .content .vrGame>div>div {
position: absolute;
right: 7px;
bottom: 8px;
color: #acdbf5;
padding: 0 9px;
background-color: rgba(20, 31, 44, 0.4);
border-radius: 1px;
font-size: 11px;
}
.ContentOne .Vr .content .VrPoint {
width: 940px;
height: 41px;
/* background-color: #fff; */
position: absolute;
bottom: 0;
text-align: center;
}
.ContentOne .Vr .content .VrPoint>div {
display: inline-block;
margin: 12px 0;
width: 15px;
height: 9px;
border-radius: 2px;
background-color: hsla(202, 60%, 100%, 0.2);
cursor: pointer;
font-size: 12px;
}
.ContentOne .Vr .content .VrPoint>div:hover {
background-color: hsla(202, 60%, 100%, 0.3);
}
.ContentOne .Vr .content .VrPoint>div:first-child {
background-color: hsla(202, 60%, 100%, 0.6);
}
.ContentOne .Vr .leftArrow {
width: 23px;
height: 36px;
position: absolute;
left: -46px;
top: 27%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .Vr .leftArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
background-position-x: 23px;
}
.ContentOne .Vr .rightArrow {
width: 23px;
height: 36px;
position: absolute;
right: -46px;
top: 27%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .Vr .rightArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
}
.ContentOne .Vr .leftArrow:hover {
background: linear-gradient(to right, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
.ContentOne .Vr .rightArrow:hover {
background: linear-gradient(to left, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
/* 热门VR游戏结束 */
/* 内容第二段 */
.ContentOne .ContentTwo {
width: 100%;
height: 785px;
position: absolute;
top: 1960px;
background: linear-gradient(to bottom, rgba(42, 71, 94, 1.0) 5%, rgba(42, 71, 94, 0.0) 70%);
}
.ContentOne .ContentTwo .hard {
width: 940px;
height: 815px;
background: transparent;
position: absolute;
top: -29px;
left: 290px;
/* background-color: green; */
}
.ContentOne .ContentTwo .hard .hardHeader {
height: 29px;
/* background-color: grey; */
display: flex;
position: relative;
}
.ContentOne .ContentTwo .hard .hardHeader>div {
padding: 3px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-size: 13px;
color: #4f94bc;
cursor: pointer;
vertical-align: top;
}
.ContentOne .ContentTwo .hard .hardHeader>div:hover {
color: #FFFFFF
}
.ContentOne .ContentTwo .hard .hardHeader>div:first-child {
padding: 3px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-size: 14px;
color: #ffffff;
background: rgba(42, 71, 94, 1.0);
text-shadow: -1px -1px rgb(0 0 0 / 25%);
cursor: default;
margin-top: 0;
box-shadow: none;
}
.ContentOne .ContentTwo .hard .hardContent {
width: 618px;
height: 771px;
/* background-color: #fff; */
position: absolute;
top: 39px;
}
.ContentOne .ContentTwo .hard .hardContent .contentHeader {
background: rgba(0, 0, 0, 0.2);
padding: 4px;
text-align: right;
color: #c6d4df;
font-size: 12px;
}
.ContentOne .ContentTwo .hard .hardContent .contentHeader>a {
padding: 3px 15px;
font-size: 12px;
line-height: 24px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px;
color: #fff;
text-decoration: none;
}
.ContentOne .ContentTwo .hard .hardContent .contentHeader>a:hover {
border: 1px solid rgba(255, 255, 255, 1);
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div {
width: 618px;
height: 69px;
background: rgba(0, 0, 0, 0.2);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div .gameName {
position: absolute;
left: 200px;
top: 3px;
color: #c7d5e0;
line-height: 18px;
font-size: 14px;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div .gameIcon {
position: absolute;
left: 200px;
top: 23px;
opacity: 0.3;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div .label {
position: absolute;
left: 200px;
top: 43px;
color: #384959;
font-size: 12px;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div .price {
position: absolute;
right: 15px;
top: 40%;
color: #acdbf5;
font-size: 13px;
}
/* .ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:first-child {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:first-child .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:first-child .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:first-child .price {
color: #263645;
right: 29px;
} */
/* .ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:hover{
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:hover .gameName{
color: #10161b;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:hover .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard .hardContent .hardContentGame>div:hover .price {
color: #263645;
right: 29px;
} */
.ContentOne .ContentTwo .hard>div:nth-child(n+13) {
width: 308px;
height: 735px;
background: linear-gradient(to right, #95bbd4 5%, #859bac 95%);
position: absolute;
right: 0;
margin: 13px 0 0;
display: flex;
flex-direction: column;
/* justify-content: space-evenly; */
}
.ContentOne .ContentTwo .hard>div:nth-child(n+14) {
display: none;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .gameName {
font-size: 21px;
letter-spacing: 0px;
color: #263645;
height: 30px;
padding-right: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 2px 0 2px 15px;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .num {
width: 272px;
height: 32px;
padding: 5px 7px;
margin-left: 15px;
margin-bottom: 10px;
background-color: rgba(38, 54, 69, 0.6);
width: 258px;
border-radius: 2px;
display: flex;
flex-direction: column;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .num span {
color: #c6d4df;
font-size: 12px;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .num div {
color: #66C0F4;
font-size: 12px;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .label {
width: 292px;
height: 22px;
display: flex;
margin: 0 0 6px 15px;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) .label>div {
background-color: rgba(38, 54, 69, 0.6);
padding: 0 7px;
margin-right: 2px;
border-radius: 2px;
cursor: pointer;
margin-bottom: 3px;
max-width: 200px;
font-size: 11px;
color: #ffffff;
}
.ContentOne .ContentTwo .hard>div:nth-child(n+13) img {
width: 274px;
height: 150px;
margin: 0 0 2px 15px;
}
.ContentOne .ContentTwo .hard>.right1 {
width: 619px;
height: 69px;
position: absolute;
top: 70px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right1:hover~.hardContent .hardContentGame>div:nth-child(1) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right1:hover~.hardContent .hardContentGame>div:nth-child(1) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right1:hover~.hardContent .hardContentGame>div:nth-child(1) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right1:hover~.hardContent .hardContentGame>div:nth-child(1) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right2 {
width: 619px;
height: 69px;
position: absolute;
top: 145px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right2:hover~div:nth-child(14) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right2:hover~.hardContent .hardContentGame>div:nth-child(2) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right2:hover~.hardContent .hardContentGame>div:nth-child(2) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right2:hover~.hardContent .hardContentGame>div:nth-child(2) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right2:hover~.hardContent .hardContentGame>div:nth-child(2) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right3 {
width: 619px;
height: 69px;
position: absolute;
top: 220px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right3:hover~div:nth-child(15) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right3:hover~.hardContent .hardContentGame>div:nth-child(3) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right3:hover~.hardContent .hardContentGame>div:nth-child(3) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right3:hover~.hardContent .hardContentGame>div:nth-child(3) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right3:hover~.hardContent .hardContentGame>div:nth-child(3) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right4 {
width: 619px;
height: 69px;
position: absolute;
top: 295px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right4:hover~div:nth-child(16) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right4:hover~.hardContent .hardContentGame>div:nth-child(4) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right4:hover~.hardContent .hardContentGame>div:nth-child(4) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right4:hover~.hardContent .hardContentGame>div:nth-child(4) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right4:hover~.hardContent .hardContentGame>div:nth-child(4) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right5 {
width: 619px;
height: 69px;
position: absolute;
top: 370px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right5:hover~div:nth-child(17) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right5:hover~.hardContent .hardContentGame>div:nth-child(5) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right5:hover~.hardContent .hardContentGame>div:nth-child(5) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right5:hover~.hardContent .hardContentGame>div:nth-child(5) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right5:hover~.hardContent .hardContentGame>div:nth-child(5) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right6 {
width: 619px;
height: 69px;
position: absolute;
top: 445px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right6:hover~div:nth-child(18) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right6:hover~.hardContent .hardContentGame>div:nth-child(6) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right6:hover~.hardContent .hardContentGame>div:nth-child(6) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right6:hover~.hardContent .hardContentGame>div:nth-child(6) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right6:hover~.hardContent .hardContentGame>div:nth-child(6) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right7 {
width: 619px;
height: 69px;
position: absolute;
top: 520px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right7:hover~div:nth-child(19) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right7:hover~.hardContent .hardContentGame>div:nth-child(7) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right7:hover~.hardContent .hardContentGame>div:nth-child(7) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right7:hover~.hardContent .hardContentGame>div:nth-child(7) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right7:hover~.hardContent .hardContentGame>div:nth-child(7) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right8 {
width: 619px;
height: 69px;
position: absolute;
top: 595px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right8:hover~div:nth-child(20) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right8:hover~.hardContent .hardContentGame>div:nth-child(8) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right8:hover~.hardContent .hardContentGame>div:nth-child(8) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right8:hover~.hardContent .hardContentGame>div:nth-child(8) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right8:hover~.hardContent .hardContentGame>div:nth-child(8) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right9 {
width: 619px;
height: 69px;
position: absolute;
top: 670px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right9:hover~div:nth-child(21) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right9:hover~.hardContent .hardContentGame>div:nth-child(9) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right9:hover~.hardContent .hardContentGame>div:nth-child(9) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right9:hover~.hardContent .hardContentGame>div:nth-child(9) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right9:hover~.hardContent .hardContentGame>div:nth-child(9) .price {
color: #263645;
right: 29px;
}
.ContentOne .ContentTwo .hard>.right10 {
width: 619px;
height: 69px;
position: absolute;
top: 745px;
left: 0;
background-color: transparent;
z-index: 10;
}
.ContentOne .ContentTwo .hard>.right10:hover~div:nth-child(22) {
display: flex;
}
.ContentOne .ContentTwo .hard>.right10:hover~.hardContent .hardContentGame>div:nth-child(10) {
width: 632px;
height: 69px;
background: linear-gradient(to left, #95bbd4 5%, #859bac 95%);
margin: 0 0 5px;
position: relative;
}
.ContentOne .ContentTwo .hard>.right10:hover~.hardContent .hardContentGame>div:nth-child(10) .gameName {
color: #10161b;
}
.ContentOne .ContentTwo .hard>.right10:hover~.hardContent .hardContentGame>div:nth-child(10) .gameIcon {
color: #384959;
}
.ContentOne .ContentTwo .hard>.right10:hover~.hardContent .hardContentGame>div:nth-child(10) .price {
color: #263645;
right: 29px;
}
/* 内容第二段 结束*/
/* 直播开始 */
.ContentOne .ContentTwo .live {
width: 940px;
height: 470px;
position: absolute;
top: 850px;
left: 290px;
}
.ContentOne .ContentTwo .live .tittle {
font-size: 14px;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
color: #fff;
}
.ContentOne .ContentTwo .live .man {
width: 933px;
height: 428px;
margin: 0 5px 8px 0;
;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ContentOne .ContentTwo .live .man>div {
height: 207px;
width: 306px;
background: rgba(255, 255, 255, 0.1);
position: relative;
}
.ContentOne .ContentTwo .live .man>div img:not(.btn, .redcircle, .peopleHand) {
width: 100%;
height: 142px;
}
.ContentOne .ContentTwo .live .man>div .btn {
position: absolute;
left: 50%;
margin-left: -40px;
top: 40px;
}
.ContentOne .ContentTwo .live .man>div .redcircle {
width: 14px;
height: 14px;
margin-left: 3px;
margin-top: 3px;
}
.ContentOne .ContentTwo .live .man>div .peopleHand {
width: 17px;
height: 17px;
margin-left: 3px;
margin-top: 3px;
}
.ContentOne .ContentTwo .live .man>div .livesign {
width: 52px;
height: 19px;
background-color: #000;
color: #fff;
letter-spacing: 1px;
font-size: 12px;
box-shadow: 0 0 7px #a94847;
position: absolute;
left: 3px;
top: 3px;
}
.ContentOne .ContentTwo .live .man>div:hover .livesign {
color: #66C0F4;
}
.ContentOne .ContentTwo .live .man>div .name {
color: #c7d5e0;
font-size: 13px;
position: absolute;
left: 7px;
bottom: 10px;
}
.ContentOne .ContentTwo .live .man>div .people {
padding-left: 28px;
color: #c7d5e0;
font-size: 13px;
position: absolute;
right: 7px;
bottom: 10px;
vertical-align: center;
background-image: url("./steam Website/直播/icon_viewers.png");
background-repeat: no-repeat;
background-position-x: left;
background-position-y: 2px;
}
/* 直播结束 */
/* 低于四十块开始 */
.ContentOne .ContentTwo .fifteen {
width: 940px;
height: 210px;
position: absolute;
top: 1380px;
left: 290px;
}
.ContentOne .ContentTwo .fifteen .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
}
.ContentOne .ContentTwo .fifteen .content .Game {
width: 940px;
height: 134px;
display: flex;
justify-content: space-between;
}
.ContentOne .ContentTwo .fifteen .content .Game>div {
width: 229px;
height: 134px;
background: linear-gradient(-45deg, rgba(64, 121, 153, 1) 5%, rgba(42, 62, 89, 1) 95%);
position: relative;
}
.ContentOne .ContentTwo .fifteen .content .Game>div>img {
width: 229px;
height: 103px;
}
.ContentOne .ContentTwo .fifteen .content .Game>div>div {
position: absolute;
right: 7px;
bottom: 8px;
color: #acdbf5;
padding: 0 9px;
background-color: rgba(20, 31, 44, 0.4);
border-radius: 1px;
font-size: 11px;
}
.ContentOne .ContentTwo .fifteen .content .Point {
width: 940px;
height: 41px;
/* background-color: #fff; */
position: absolute;
bottom: 0;
text-align: center;
}
.ContentOne .ContentTwo .fifteen .content .Point>div {
display: inline-block;
margin: 12px 0;
width: 15px;
height: 9px;
border-radius: 2px;
background-color: hsla(202, 60%, 100%, 0.2);
cursor: pointer;
font-size: 12px;
}
.ContentOne .ContentTwo .fifteen .content .Point>div:hover {
background-color: hsla(202, 60%, 100%, 0.3);
}
.ContentOne .ContentTwo .fifteen .content .Point>div:first-child {
background-color: hsla(202, 60%, 100%, 0.6);
}
.ContentOne .ContentTwo .fifteen .leftArrow {
width: 23px;
height: 36px;
position: absolute;
left: -46px;
top: 27%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .ContentTwo .fifteen .leftArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
background-position-x: 23px;
}
.ContentOne .ContentTwo .fifteen .rightArrow {
width: 23px;
height: 36px;
position: absolute;
right: -46px;
top: 27%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0) 95%);
padding: 36px 11px;
}
.ContentOne .ContentTwo .fifteen .rightArrow>div {
background-image: url("./steam Website/arrows.png");
width: 23px;
height: 36px;
}
.ContentOne .ContentTwo .fifteen .leftArrow:hover {
background: linear-gradient(to right, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
.ContentOne .ContentTwo .fifteen .rightArrow:hover {
background: linear-gradient(to left, rgba(69, 92, 112, 0.9) 5%, rgba(69, 92, 112, 0) 95%);
}
/* 低于四十块结束 */
/* 更新与优惠开始 */
.ContentOne .ContentTwo .updata {
width: 940px;
height: 460px;
position: absolute;
top: 1650px;
left: 290px;
}
.ContentOne .ContentTwo .updata .tittle {
font-size: 14px;
color: #fff;
letter-spacing: 0.03em;
margin-bottom: 10px;
padding-top: 2px;
margin-bottom: 10px;
}
.ContentOne .ContentTwo .updata .content {
width: 940px;
height: 422px;
display: flex;
}
.ContentOne .ContentTwo .updata .left {
width: 378px;
height: 422px;
background: linear-gradient(135deg, rgba(37, 49, 63, 1) 5%, rgba(54, 97, 125, 1) 95%);
cursor: pointer;
}
.ContentOne .ContentTwo .updata .left img {
width: 378px;
height: 398px;
}
.ContentOne .ContentTwo .updata .left>div {
text-align: right;
color: #ACDBF5;
font-size: 12px;
margin-right: 3px;
}
.ContentOne .ContentTwo .updata .right {
width: 562px;
height: 422px;
display: flex;
flex-wrap: wrap;
cursor: pointer;
}
.ContentOne .ContentTwo .updata .right>div {
width: 173px;
height: 206px;
margin: 0 0 10px 10px;
background: linear-gradient(135deg, rgba(37, 49, 63, 1) 5%, rgba(54, 97, 125, 1) 95%);
}
.ContentOne .ContentTwo .updata .right>div img {
width: 173px;
height: 182px;
}
.ContentOne .ContentTwo .updata .right>div .price .discount {
display: flex;
line-height: 15px;
justify-content: flex-end;
margin-right: 5px;
}
.ContentOne .ContentTwo .updata .right>div .price .discount>div:first-child {
color: #a4d007;
background: #4c6b22;
height: 15px;
line-height: 15px;
margin: 0 5px;
font-weight: 300;
font-size: 11px;
}
.ContentOne .ContentTwo .updata .right>div .price .prices {
height: 15px;
padding: 0px 5px 0px 7px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: flex-start;
}
.ContentOne .ContentTwo .updata .right>div .price .prices>div:first-child {
color: #7193a6;
text-decoration: line-through;
font-size: 11px;
line-height: 13px;
height: 13px;
}
.ContentOne .ContentTwo .updata .right>div .price .prices>div:last-child {
color: #acdbf5;
font-size: 13px;
line-height: 13px;
height: 13px;
}
/* 更新与优惠结束 */
/* 底部开始 */
.bottom .bottomOne {
min-width: 972px;
height: 216px;
background-color: black;
position: relative;
}
.bottom .bottomOne>div:first-child {
font-size: 24px;
color: #67c1f5;
position: absolute;
top: 25px;
left: 50%;
margin-left: -84px;
}
.bottom .bottomOne>div:nth-child(2) {
font-size: 15px;
color: #8f98a0;
position: absolute;
top: 80px;
left: 50%;
margin-left: -80px;
}
.bottom .bottomOne>div:nth-child(3) {
width: 60px;
height: 26px;
padding: 3px 1px 1px 1px;
text-align: center;
font-size: 15px;
color: #D2E885;
background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
cursor: pointer;
border-radius: 4px;
border: 2px solid #172030;
position: absolute;
top: 120px;
left: 50%;
margin-left: -33px;
}
.bottom .bottomOne>div:nth-child(4) {
font-size: 15px;
color: #8f98a0;
position: absolute;
top: 170px;
left: 50%;
margin-left: -94px;
}
.bottom .bottomOne>div:nth-child(4)>span {
color: #ffffff;
cursor: pointer;
font-size: 15px;
}
.bottom .bottomOne>div:nth-child(4)>span:hover {
color: #66C0F4;
}
.bottom .bottomTwo {
min-width: 972px;
height: 166px;
background: #171a21;
position: relative;
}
.bottom .bottomTwo>hr:first-child {
position: absolute;
top: 30px;
left: 290px;
border-top: 1px solid #363c44;
}
.bottom .bottomTwo>.HR1 {
position: absolute;
top: 90px;
left: 290px;
border-top: 1px solid #363c44;
}
.bottom .bottomTwo>.val {
width: 88px;
height: 25px;
position: absolute;
top: 39px;
left: 290px;
}
.bottom .bottomTwo>.steam {
width: 92px;
height: 26px;
position: absolute;
top: 39px;
left: 1138px;
}
.bottom .bottomTwo>.Text1 {
color: #8F98A0;
font-size: 12px;
line-height: 16px;
position: absolute;
top: 39px;
left: 389px;
}
.bottom .bottomTwo>.Text2 {
color: #8F98A0;
font-size: 12px;
line-height: 16px;
position: absolute;
top: 55px;
left: 389px;
}
.bottom .bottomTwo>.Text3 {
color: #8F98A0;
line-height: 16px;
position: absolute;
top: 105px;
left: 290px;
}
.bottom .bottomTwo>.Text3>a {
font-size: 13px;
color: #C6D4DF;
text-decoration: none;
}
.bottom .bottomTwo>.Text2>a {
color: #C6D4DF;
text-decoration: none;
}
.bottom .bottomTwo>.Text3>a:hover,
.bottomTwo>.Text2>a:hover {
color: white;
}
/* 底部结束 */
</style>
</head>
<body>
<!-- 头部 -->
<div class="Header">
<div class="HeaderContent">
<img src="./steam Website/logo_steam.svg" alt="" class="Headerlogo">
<div class="HeaderMenu">
<a href="./notDone.html" class="store">商店</a>
<a href="./notDone.html">社区</a>
<a href="./notDone.html">关于</a>
<a href="./service.html">客服</a>
<div class="secondOne">
<a href="./notDone.html">主页</a>
<a href="./notDone.html">探索队列</a>
<a href="./notDone.html">愿望单</a>
<a href="./notDone.html">点数商店</a>
<a href="./notDone.html">新闻</a>
<a href="./notDone.html">统计数据</a>
</div>
<div class="secondTwo">
<a href="./notDone.html">主页</a>
<a href="./notDone.html">讨论</a>
<a href="./notDone.html">创意工坊</a>
<a href="./notDone.html">市场</a>
<a href="./notDone.html">实况直播</a>
</div>
</div>
<div class="HeaderLoginMenu">
<div class="loadDown">
<a href="./notDone.html">安装Steam</a>
</div>
<div class="login">登录 |</div>
<div class="lang"> 语言</div>
</div>
</div>
</div>
<!-- 内容第一段 -->
<div class="ContentOne">
<div class="kong">
<div class="leftMenu">
<img src="./steam Website/steamcards_promo_02.png" alt="" class="leftMenup1"><br>
<ul>礼物卡
<li><a href="./notDone.html">现已在 Steam 上推出</a></li>
</ul>
<ul>推荐
<li>
<div
style="background-position: 0px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">由好友推荐</a>
</li>
<li>
<div
style="background-position: -16px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">由鉴赏家推荐</a>
</li>
<li>
<div
style="background-position: -32px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">标签</a>
</li>
</ul>
<ul>探索队列
<li>
<div
style="background-position: -48px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">推荐</a>
</li>
<li>
<div
style="background-position: -64px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">新品</a>
</li>
</ul>
<ul>浏览分类
<li>
<div
style="background-position: -80px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">热销商品</a>
</li>
<li>
<div
style="background-position: -112px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">新品</a>
</li>
<li>
<div
style="background-position: -128px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">即将推出</a>
</li>
<li>
<div
style="background-position: -144px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">优惠</a>
</li>
<li>
<div
style="background-position: -160px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">虚拟现实</a>
</li>
<li>
<div
style="background-position: -176px 0px;background-image: url('./steam Website/store_menu_icons.png');">
</div>
<a href="./notDone.html">支持控制器</a>
</li>
</ul>
<ul>按类型浏览
<li><a href="./notDone.html">免费游玩</a></li>
<li><a href="./notDone.html">抢先体验</a></li>
<li><a href="./notDone.html">休闲</a></li>
<li><a href="./notDone.html">体育</a></li>
<li><a href="./notDone.html">冒险</a></li>
<li><a href="./notDone.html">动作</a></li>
<li><a href="./notDone.html">大型多人在线</a></li>
<li><a href="./notDone.html">模拟</a></li>
<li><a href="./notDone.html">独立</a></li>
<li><a href="./notDone.html">竞速</a></li>
<li><a href="./notDone.html">策略</a></li>
<li><a href="./notDone.html">角色扮演</a></li>
</ul>
</div>
<div class="storeNav">
<div class="store"></div>
<div class="new"></div>
<div class="kind"></div>
<ul>
<li class="yourStore">您的商店</li>
<li class="news">
<img src="https://store.st.dl.pinyuncloud.com/public/images/v6/storemenu/new_white.svg?v=2"
alt="">
新鲜推荐
</li>
<li >
<img src="https://store.st.dl.pinyuncloud.com/public/images/v6/storemenu/new_white.svg?v=2"
alt="">类别
</li>
<li>点数商店</li>
<li>新闻</li>
<li>实验室</li>
<li class="emptyNav">
<div></div>
</li>
<li class="search">
<div class="searchFor">
<input type="text" placeholder="搜索" size="22" autocomplete="off">
<img src="./steam Website/search_icon_btn.png" alt="">
</div>
</li>
</ul>
<div class="secondOne">
<a href="./notDone.html">主页</a>
<a href="./notDone.html">社区推荐</a>
<a href="./notDone.html">最近一查看</a>
<a href="./notDone.html">Steam鉴赏家</a>
</div>
<div class="secondTwo">
<a href="./notDone.html">热销商品</a>
<a href="./notDone.html">新品与热门商品</a>
<a href="./notDone.html">当前特惠</a>
<a href="./notDone.html">最近更新</a>
<a href="./notDone.html">热门即将推出</a>
</div>
<div class="secondThree">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="firstP">
<div class="tittle">精选和推荐</div>
<div class="swipe">
<div class="swipeLeft"></div>
<div class="swipeRight">
<div class="appName">
<div>Counter-Strike: Global Offensive</div>
</div>
<div class="screenshots">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="reason">
<div>现已推出</div>
<div>热销商品</div>
</div>
<div class="money">
免费游玩
<img src="./steam Website/icon_platform_win.png" alt="">
<img src="./steam Website/icon_platform_mac.png" alt="">
<img src="./steam Website/icon_platform_linux.png" alt="">
</div>
</div>
<div class="swipePoint">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="leftArrow">
<div></div>
</div>
<div class="rightArrow">
<div></div>
</div>
</div>
<div class="specialOffers">
<div class="tittle">特别优惠
<div class="btn">浏览更多</div>
</div>
<div class="content">
<div class="left">
<img src="./steam Website/特别优惠/特卖.jpg" alt="">
<h4>发行商周末</h4>
</div>
<div class="mid">
<div class="top">
<img src="./steam Website/特别优惠/冰气.jpg" alt="">
</div>
<div class="bottom">
<h4>免费周末试玩</h4>
<h6>免费畅玩至 8月17日上午1:00。</h6>
<div class="money">
<div class="discount">
<div>-71%</div>
<div class="prices">
<div>￥99</div>
<div>￥29</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="rightOne">
<img src="./steam Website/特别优惠/火箭.jpg" alt="">
<div class="time">
<div>今日特惠！</div>
<div class="trueTime" title="此优惠的剩余时间">33:33:33</div>
</div>
<div class="money">
<div class="discount">
<div>-34%</div>
<div class="prices">
<div>￥70</div>
<div>￥46</div>
</div>
</div>
</div>
</div>
<div class="rightTwo">
<img src="./steam Website/特别优惠/DOMM.jpg" alt="">
<div class="money">
<div class="discount">
<div>-75%</div>
<div class="prices">
<div>￥349</div>
<div>￥87</div>
</div>
</div>
</div>
</div>
</div>
<div class="OffersPoint">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="leftArrow">
<div></div>
</div>
<div class="rightArrow">
<div></div>
</div>
</div>
<div class="community">
<div class="tittleOne">社区推荐</div>
<div class="tittleTwo">本日推荐游戏</div>
<div class="game">
<div class="gameP">
<div class="price">￥248</div>
</div>
<div class="gameT">
<div class="playerT">"我们需要创意工坊！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！"</div>
<div class="tAll">阅读整篇评测</div>
<div class="player">
<div class="hand"></div>
<div class="name">周毅火</div>
<div class="hour">评测时已游玩 4.6小时</div>
<div class="num">有 10人觉得这篇评价有价值</div>
</div>
<div class="btn">
<div class="btnOne"><</div>
<div class="num">
2 篇评测之 1</div>
<div class="btnTwo">></div>
</div>
</div>
</div>
<div class="CommunityPoint">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="leftArrow">
<div></div>
</div>
<div class="rightArrow">
<div></div>
</div>
</div>
<div class="browseSt">
<div class="tittle">浏览 STEAM</div>
<div class="content">
<div>新品</div>
<div>优惠</div>
<div>免费游戏</div>
<div>按用户标签</div>
</div>
</div>
<div class="Vr">
<div class="tittle">热门 VR 游戏</div>
<div class="content">
<div class="vrGame">
<div><img src="./steam Website/VR 游戏/VR游戏-B1.jpg" alt="">
<div>￥70</div>
</div>
<div><img src="./steam Website/VR 游戏/VR游戏-B2.jpg" alt="">
<div>￥163</div>
</div>
<div><img src="./steam Website/VR 游戏/VR游戏-B3.jpg" alt="">
<div>￥278</div>
</div>
<div><img src="./steam Website/VR 游戏/VR游戏-B4.jpg" alt="">
<div>￥90</div>
</div>
</div>
<div class="VrPoint">
<div></div>
<div></div>
</div>
</div>
<div class="leftArrow">
<div></div>
</div>
<div class="rightArrow">
<div></div>
</div>
</div>
<!-- 内容第二段 -->
<div class="ContentTwo">
<div class="hard">
<div class="hardHeader">
<div>新品与热门商品</div>
<div>热销商品</div>
<div>热门即将推出</div>
<div>优惠</div>
</div>
<span class="right1"></span>
<span class="right2"></span>
<span class="right3"></span>
<span class="right4"></span>
<span class="right5"></span>
<span class="right6"></span>
<span class="right7"></span>
<span class="right8"></span>
<span class="right9"></span>
<span class="right10"></span>
<div class="hardContent">
<div class="contentHeader">
查看更多：<a href="./notDone.html">新品</a>
</div>
<div class="hardContentGame">
<div>
<img src="./steam Website/难/Omno-头.jpg" alt="">
<div class="gameName">Omno</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">冒险，探索，休闲，放松</div>
<div class="price">￥67</div>
</div>
<div><img src="./steam Website/难/一生推-头.jpg" alt="">
<div class="gameName">一生推不如一生恋~love or die~</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">冒险，视觉小说，恋爱模拟，自选历险体验</div>
<div class="price">￥38</div>
</div>
<div><img src="./steam Website/难/上古之魂-头.jpg" alt="">
<div class="gameName">上古之魂</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">类魂系列，黑暗奇幻，动作角色扮演，单人</div>
<div class="price">￥70</div>
</div>
<div><img src="./steam Website/难/上行战场-头.jpg" alt="">
<div class="gameName">上行战场 / The Ascent</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">动作，赛博朋克，俯视射击，角色扮演</div>
<div class="price">￥148</div>
</div>
<div><img src="./steam Website/难/不知道-头.jpg" alt="">
<div class="gameName">Paint the Town Red</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">动作，血腥，鲜血，格斗</div>
<div class="price">￥70</div>
</div>
<div><img src="./steam Website/难/后末日-头.jpg" alt="">
<div class="gameName">Chernobylite</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">角色扮演，生存，后末日，冒险</div>
<div class="price">￥99</div>
</div>
<div><img src="./steam Website/难/废墟战旗-头.jpg" alt="">
<div class="gameName">废墟战旗</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">卡牌构建式类 Rogue,卡牌战斗，卡牌游戏，困难</div>
<div class="price">￥58</div>
</div>
<div><img src="./steam Website/难/第一-头.jpg" alt="">
<div class="gameName">Coloring Game 4</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">免费，独立，休闲，设计与插画</div>
<div class="price">免费游玩</div>
</div>
<div><img src="./steam Website/难/赋格曲-头.jpg" alt="">
<div class="gameName">战场的赋格曲</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">狗，角色扮演，动漫，猫</div>
<div class="price">￥116</div>
</div>
<div><img src="./steam Website/难/遗忘-头.jpg" alt="">
<div class="gameName">遗忘之城</div>
<img src="./steam Website/icon_platform_win.png" alt="" class="gameIcon">
<div class="label">冒险，角色扮演，独立，探索</div>
<div class="price">￥80</div>
</div>
</div>
</div>
<div class="gameRight1">
<div class="gameName">Omno</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(88)</span></div>
</div>
<div class="label">
<div>冒险</div>
<div>放松</div>
<div>探索</div>
<div>休闲</div>
<div>唯美</div>
</div>
<img src="./steam Website/难/Omno-1.jpg" alt="">
<img src="./steam Website/难/Omno-2.jpg" alt="">
<img src="./steam Website/难/Omno-3.jpg" alt="">
<img src="./steam Website/难/Omno-4.jpg" alt="">
</div>
<div class="gameRight2">
<div class="gameName">一生推不如一生恋~love or die~</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(80)</span></div>
</div>
<div class="label">
<div>免费</div>
<div>独立</div>
<div>休闲</div>
<div>设计与插画</div>
<div>彩色</div>
</div>
<img src="./steam Website/难/一生推-1.jpg" alt="">
<img src="./steam Website/难/一生推-2.jpg" alt="">
<img src="./steam Website/难/一生推-3.jpg" alt="">
<img src="./steam Website/难/一生推-4.jpg" alt="">
</div>
<div class="gameRight3">
<div class="gameName">上古之魂</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(276)</span></div>
</div>
<div class="label">
<div>类魂</div>
<div>黑暗奇幻</div>
<div>单人</div>
<div>动作角色扮演</div>
</div>
<img src="./steam Website/难/上古之魂-1.jpg" alt="">
<img src="./steam Website/难/上古之魂-2.jpg" alt="">
<img src="./steam Website/难/上古之魂-3.jpg" alt="">
<img src="./steam Website/难/上古之魂-4.jpg" alt="">
</div>
<div class="gameRight4">
<div class="gameName">上行战场 / The Ascent</div>
<div class="num">
<span>总体用户评测：</span>
<div>多半好评 <span>(1,633)</span></div>
</div>
<div class="label">
<div>动作</div>
<div>赛博朋克</div>
<div>俯视射击</div>
<div>角色扮演</div>
</div>
<img src="./steam Website/难/上行战场-1.jpg" alt="">
<img src="./steam Website/难/上行战场-2.jpg" alt="">
<img src="./steam Website/难/上行战场-3.jpg" alt="">
<img src="./steam Website/难/上行战场-4.jpg" alt="">
</div>
<div class="gameRight5">
<div class="gameName">Paint the Town Red</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(11,855)</span></div>
</div>
<div class="label">
<div>动作</div>
<div>血腥</div>
<div>单人</div>
<div>动作角色扮演</div>
</div>
<img src="./steam Website/难/不知道-1.jpg" alt="">
<img src="./steam Website/难/不知道-2.jpg" alt="">
<img src="./steam Website/难/不知道-3.jpg" alt="">
<img src="./steam Website/难/不知道-4.jpg" alt="">
</div>
<div class="gameRight6">
<div class="gameName">Chernobylite</div>
<div class="num">
<span>总体用户评测：</span>
<div>多半好评 <span>(3,507)</span></div>
</div>
<div class="label">
<div>角色扮演</div>
<div>后末日</div>
<div>生存</div>
<div>冒险</div>
<div>恐怖</div>
</div>
<img src="./steam Website/难/后末日-1.jpg" alt="">
<img src="./steam Website/难/后末日-2.jpg" alt="">
<img src="./steam Website/难/后末日-3.jpg" alt="">
<img src="./steam Website/难/后末日-4.jpg" alt="">
</div>
<div class="gameRight7">
<div class="gameName">废墟战旗</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(631)</span></div>
</div>
<div class="label">
<div>卡牌构建类 Rogue</div>
<div>卡牌战斗</div>
<div>卡牌游戏</div>
</div>
<img src="./steam Website/难/废墟战旗-1.jpg" alt="">
<img src="./steam Website/难/废墟战旗-2.jpg" alt="">
<img src="./steam Website/难/废墟战旗-3.jpg" alt="">
<img src="./steam Website/难/废墟战旗-4.jpg" alt="">
</div>
<div class="gameRight8">
<div class="gameName">Coloring Game 4</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(229)</span></div>
</div>
<div class="label">
<div>免费</div>
<div>独立</div>
<div>休闲</div>
<div>设计与插画</div>
<div>彩色</div>
</div>
<img src="./steam Website/难/第一-1.jpg" alt="">
<img src="./steam Website/难/第一-2.jpg" alt="">
<img src="./steam Website/难/第一-3.jpg" alt="">
<img src="./steam Website/难/第一-4.jpg" alt="">
</div>
<div class="gameRight9">
<div class="gameName">战场的赋格曲</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(116)</span></div>
</div>
<div class="label">
<div>狗</div>
<div>猫</div>
<div>动漫</div>
<div>可爱</div>
<div>角色扮演</div>
</div>
<img src="./steam Website/难/赋格曲-1.jpg" alt="">
<img src="./steam Website/难/赋格曲-2.jpg" alt="">
<img src="./steam Website/难/赋格曲-3.jpg" alt="">
<img src="./steam Website/难/赋格曲-4.jpg" alt="">
</div>
<div class="gameRight10">
<div class="gameName">遗忘之城</div>
<div class="num">
<span>总体用户评测：</span>
<div>特别好评 <span>(287)</span></div>
</div>
<div class="label">
<div>冒险</div>
<div>角色扮演</div>
<div>独立</div>
<div>探索</div>
<div>时空旅行</div>
</div>
<img src="./steam Website/难/遗忘-1.jpg" alt="">
<img src="./steam Website/难/遗忘-2.jpg" alt="">
<img src="./steam Website/难/遗忘-3.jpg" alt="">
<img src="./steam Website/难/遗忘-4.jpg" alt="">
</div>
</div>
<div class="live">
<div class="tittle">正在实况直播的游戏</div>
<div class="man">
<div>
<img src="./steam Website/直播/直播1.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">Grounded</div>
<div class="people">
12,048
</div>
</div>
<div>
<img src="./steam Website/直播/直播2.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">上行战场 / The Ascent</div>
<div class="people">
9,977
</div>
</div>
<div>
<img src="./steam Website/直播/直播3.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">Chernobylite</div>
<div class="people">
4,349
</div>
</div>
<div>
<img src="./steam Website/直播/直播4.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">Golf With Your Friends</div>
<div class="people">
3,589
</div>
</div>
<div>
<img src="./steam Website/直播/直播5.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">Russian Hentai 2</div>
<div class="people">
3,207
</div>
</div>
<div>
<img src="./steam Website/直播/直播6.jpg" alt="">
<img src="./steam Website/直播/play_icon80.png" alt="" class="btn">
<div class="livesign">
<img src="./steam Website/直播/下载.png" alt="" class="redcircle">
直播
</div>
<div class="name">Mini Motorways</div>
<div class="people">
2,390
</div>
</div>
</div>
</div>
<div class="fifteen">
<div class="tittle">低于￥40</div>
<div class="content">
<div class="Game">
<div><img src="./steam Website/低于40/求生之路-头.jpg" alt="">
<div>￥70</div>
</div>
<div><img src="./steam Website/低于40/百合-头.jpg" alt="">
<div>￥28</div>
</div>
<div><img src="./steam Website/低于40/斯盖尔-头.jpg" alt="">
<div>￥40</div>
</div>
<div><img src="./steam Website/低于40/极品飞车-头.jpg" alt="">
<div>￥36</div>
</div>
</div>
<div class="Point">
<div></div>
<div></div>
</div>
<div class="leftArrow">
<div></div>
</div>
<div class="rightArrow">
<div></div>
</div>
</div>
</div>
<div class="updata">
<div class="tittle">更新与优惠</div>
<div class="content">
<div class="left">
<img src="./steam Website/更新/schinese.gif" alt="">
<div class="price">单击查看详细信息</div>
</div>
<div class="right">
<div><img src="./steam Website/更新/地狱.gif" alt="">
<div class="price">
<div class="discount">
<div></div>
<div class="prices">
<div></div>
<div>￥149</div>
</div>
</div>
</div>
</div>
<div><img src="./steam Website/更新/小人国.jpg" alt="">
<div class="price">
<div class="discount">
<div></div>
<div class="prices">
<div></div>
<div>￥99</div>
</div>
</div>
</div>
</div>
<div><img src="./steam Website/更新/往日不在.jpg" alt="">
<div class="price">
<div class="discount">
<div>-20%</div>
<div class="prices">
<div>￥279</div>
<div>￥223</div>
</div>
</div>
</div>
</div>
<div><img src="./steam Website/更新/最终幻想.jpg" alt="">
<div class="price">
<div class="discount">
<div>-20%</div>
<div class="prices">
<div>￥84</div>
<div>￥67.2</div>
</div>
</div>
</div>
</div>
<div><img src="./steam Website/更新/质量效应.jpg" alt="">
<div class="price">
<div class="discount">
<div>-25%</div>
<div class="prices">
<div>￥70</div>
<div>￥59</div>
</div>
</div>
</div>
</div>
<div><img src="./steam Website/更新/马喽.jpg" alt="">
<div class="price">
<div class="discount">
<div></div>
<div class="prices">
<div></div>
<div>￥219</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<div class="bottomOne">
<div>正在寻找推荐？</div>
<div>登录以查看个性化推荐</div>
<div>登录</div>
<div>或者<span>注册</span>并免费加入 Steam</div>
</div>
<div class="bottomTwo">
<HR width=940px color=#c6d4df SIZE=1>
<img src="./steam Website/footerLogo_valve_new.png" alt="" class="val">
<img src="./steam Website/logo_steam_footer.png" alt="" class="steam">
<div class="Text1">©2021 Valve Corporation。保留所有权利。所有商标均为其在美国及其它国家/地区的各自持有者所有。</div>
<div class="Text2">所有的价格均已包含增值税（如适用）。
<a href="./notDone.html">隐私政策</a>
|
<a href="./notDone.html">法律信息</a>
|
<a href="./notDone.html">Steam 订户协议</a>
|
<a href="./notDone.html">退款</a>
|
<a href="./notDone.html">Cookie</a>
</div>
<HR width=940px color=#c6d4df SIZE=1 class="HR1">
<div class="Text3">
<a href="./notDone.html">关于Valve</a>
|
<a href="./notDone.html">工作机会</a>
|
<a href="./notDone.html">Steamworks</a>
|
<a href="./notDone.html">Steam分销</a>
|
<a href="./service.html">客服</a>
|
<a href="./notDone.html">礼物卡</a>
|
<a href="./notDone.html">
<img src="./steam Website/ico_facebook.gif">
Steam</a>
|
<a href="./notDone.html">
<img src="./steam Website/ico_twitter.gif">@steam</a>
</div>
</div>
</div>
</body>
</html>
扫一扫
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
