HTML 和 CSS 重构网页（Steam主页）

这是刚刚学习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">登录&nbsp;&nbsp; |</div><div class="lang">&nbsp;语言</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><divstyle="background-position: 0px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">由好友推荐</a></li><li><divstyle="background-position: -16px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">由鉴赏家推荐</a></li><li><divstyle="background-position: -32px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">标签</a></li></ul><ul>探索队列<li><divstyle="background-position: -48px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">推荐</a></li><li><divstyle="background-position: -64px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">新品</a></li></ul><ul>浏览分类<li><divstyle="background-position: -80px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">热销商品</a></li><li><divstyle="background-position: -112px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">新品</a></li><li><divstyle="background-position: -128px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">即将推出</a></li><li><divstyle="background-position: -144px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">优惠</a></li><li><divstyle="background-position: -160px 0px;background-image: url('./steam Website/store_menu_icons.png');"></div><a href="./notDone.html">虚拟现实</a></li><li><divstyle="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>免费畅玩至&nbsp;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">&lt;</div><div class="num">2 篇评测之 1</div><div class="btnTwo">&gt;</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>特别好评&nbsp;<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>特别好评&nbsp;<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>特别好评&nbsp;<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>多半好评&nbsp;<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>特别好评&nbsp;<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>多半好评&nbsp;<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>特别好评&nbsp;<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>特别好评&nbsp;<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>特别好评&nbsp;<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>特别好评&nbsp;<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">所有的价格均已包含增值税（如适用）。&nbsp;&nbsp;&nbsp;&nbsp;<a href="./notDone.html">隐私政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html">法律信息</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html">Steam 订户协议</a>&nbsp; &nbsp;|&nbsp;&nbsp;<a href="./notDone.html">退款</a>&nbsp;&nbsp;|&nbsp;&nbsp;<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>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html">工作机会</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html">Steamworks</a>&nbsp; &nbsp;|&nbsp;&nbsp;<a href="./notDone.html">Steam分销</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./service.html">客服</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html">礼物卡</a>&nbsp; &nbsp;|&nbsp;&nbsp;<a href="./notDone.html"><img src="./steam Website/ico_facebook.gif">Steam</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./notDone.html"><img src="./steam Website/ico_twitter.gif">@steam</a></div></div></div>
</body></html>
HTML 和 CSS 重构网页（Steam主页）相关推荐

重构html布局,网站重构|网页重构|浏览器兼容|div+css布局|psd转html|概念网络
什么是网站重构网页重构就是把"没有采用Div+CSS布局的网站,大量使用HTML进行定位.布局,或者虽然已经采用Div+CSS,但是未遵循HTML结构化标准的站点"变成" ...
CSS+DIV 网页重构技术之基础
DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同互联网发布时间:2009-04-02 19:36:01 作者:佚名我要评论网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
CSS 重构：样式表性能调优
内容简介 CSS 对于现代网站的用户体验至关重要,其地位不亚于决定着网站外形的 HTML 和让网站动起来的 JavaScript.本书作为 CSS 代码重构指南,不仅展示了如何编写结构合理的 CSS, ...
web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
HTML5期末大作业：汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设 ...
CSS自适应网页制作教程
自适应网页即是响应式网页,所谓的响应式网页就是,同样的一个网址,在电脑,平板,手机浏览的时候,样式更着改变,这就是简单的一个解释,更合理的解释就是,网页根据屏幕的大小会变得自适应,就会让网站看起来很自 ...
网页背景颜色php代码怎么写,CSS控制网页背景颜色的代码
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的. 想知道怎么来实现嘛,好吧 ...
HTML 和 CSS 重构网页（Steam主页）

HTML 和 CSS 重构网页（Steam主页）相关推荐

最新文章

热门文章

HTML 和 CSS 重构网页 （Steam主页）

HTML 和 CSS 重构网页 （Steam主页）相关推荐

最新文章

热门文章

HTML 和 CSS 重构网页（Steam主页）

HTML 和 CSS 重构网页（Steam主页）相关推荐
