html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="body.css">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
<link rel="stylesheet" href="xiao .css" media="all and (max-width:768px)" />
</head>
<body>
<a id="#top"></a>
<div id="box">
<div id="a">
<!-- <input type="checkbox " id="abcd" style="display: none;"><label for="abcd">三</label> -->
<div id="a1">
<img src="./logo/logo.jpg" alt="">
<li style="width: 70px;">
<a href="">服务与支持</a>
<ul class="gg" style="width: 100px; height: 240px;">
<li>经销商服务</li>
<li>保修条例</li>
<li>售后服务</li>
<li>下载支持</li>
<li>SN码查询</li>
<li>iGAME Center</li>
</ul>
</li>
<li style="width: 66px;">
<a href="">媒体&资讯</a>
<ul class="gg" style="width: 66px; height: 120px;">
<li>新闻</li>
<li>精彩视频</li>
<li>精美壁纸</li>
</ul>
</li>
<li style="width: 84px;">
<a href="">行业解决方案</a>
<ul class="gg" style="width: 84px; height: 160px;">
<li>工程</li>
<li>网吧</li>
<li>服务器</li>
<li>商用一体机</li>
</ul>
</li>
<li style="width: 56px;">
<a href="">产品中心</a>
<ul class="gg" style="width: 56px;height: 160px;">
<li>主板系列</li>
<li>显卡系列</li>
<li>内存系列</li>
<li>ssd系列</li>
</ul>
</li>
<li style="width: 56px;">
<a href="">品牌文化</a>
<ul class="gg" style="width: 56px; height: 80px;">
<li>igame</li>
<li>CVN</li>
</ul>
</li>
<li style="width: 56px;">
<a href="">官方商城</a>
</li>
<li style="width: 28px;">
<a href="">首页</a>
</li>
<li style="clear: both;"></li>
</div>
</div>
<div id="b">
<div id="bx">
<img id="tp1" src="./gundong/11.jpg" alt="">
<img id="tp2" src="./gundong/22.jpg" alt="">
<img id="tp3" src="./gundong/33.jpg" alt="">
<img id="tp4" src="./gundong/44.jpg" alt="">
<!-- <img id="tp5" src="./gundong/55.jpg" alt="" -->
</div>
<button id="bt1">←</button>
<button id="bt2">→</button>
</div>
<div id="c">
<div id="qqq">
<div id="www">
<h1 style="margin: 20px; height: 48px;width: 530;color: white; font-size: 25px; font-weight: bold;">技术/创新/服务的七彩虹</h1>
<hr size="2px" width="40%" color="red"><br><br>
<p style="margin: 0px 0px 10px; width: 400px;height: 54px;color: red;">
拥有自主研发、自主生产、自主品牌、自主销售<br>
为一体的完整产业链企业
</p>
</div>
</div>
<button id="hdbt"><a href="" style="color:black; text-decoration: none;" >更多</a></button>
<div id="eee">
<div class="asd">
<img src="./设备/a.jpg" alt="">
<h4>整机</h4>
<span>Desktop PC</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=102">→</a></button>
</div>
<div class="asd">
<img src="./设备/e.jpg" alt="">
<h4>主板</h4>
<span>Motherboard</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=84">→</a></button>
</div>
<div class="asd">
<img src="./设备/q.jpg" alt="">
<h4>笔记本</h4>
<span>NoteBook</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=158">→</a></button>
</div>
<div class="asd">
<img src="./设备/r.jpg" alt="">
<h4>储存</h4>
<span>SSD/DRAM</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=122">→</a></button>
</div>
<div class="asd">
<img src="./设备/s.jpg" alt="">
<h4>一体机</h4>
<span>AIO PC</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=153">→</a></button>
</div>
<div class="asd">
<img src="./设备/w.jpg" alt="">
<h4>显卡</h4>
<span>Graphics card</span><br><br>
<button><a href="https://www.colorful.cn/product.aspx?mid=102">→</a></button>
</div>
<div class="asd">
<img src="./设备/erj.jpg" alt="">
<h4>耳机</h4>
<span>Hedaset</span><br><br>
<button><a href="https://colorful.cn/product.aspx?mid=160">→</a></button>
</div>
<div class="asd">
<img src="./设备/zhuji.jpg" alt="">
<h4>主机</h4>
<span>Host machine</span><br><br>
<button><a href="https://colorful.cn/product.aspx?mid=151">→</a></button>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div id="cjdhz">
<div id="boxxd">
<ul>
<li>
<img src="./datu/1.jpg" alt="">
<div id="bj">
<h3 >将星X15 AT 23</h3>
<span >将星独具 星生无畏</span>
<p><a href="https://www.colorful.cn/product.aspx?mid=158" style="text-decoration: none;">更多信息</a></p>
</div>
</li>
<li>
<img src="./datu/2.jpg" alt="">
<div id="bj1">
<h3>CVN Z790 GAMING FROZEN V20</h3>
<span>未来已至 新舰启航</span>
<p><a href="https://www.colorful.cn/product_show.aspx?mid=84&id=913" style="text-decoration: none;">更多信息</a></p>
</div>
</li>
</ul>
</div>
<div id="d">
<div id="hhh">
<div id="lll">
<p>iGame百变周边</p>
<h2>精美周边 懂你所想</h2>
<p class="igma">iGame已推出电脑硬件、手办、短袖衫、行李箱等几十款精美周边</p>
<button id="zh">扫码了解</button>
</div>
</div>
</div>
<div id="e">
<ul>
<li>
<img src="./datu/3.jpg" alt="">
<div id="bj2">
<h3 >iGame GeForce RTX 4090 Vulcan OC</h3>
<span >我游自在 极客武装</span>
<p><a href="https://www.colorful.cn/product_show.aspx?mid=102&id=1960" style="text-decoration: none;">更多信息</a></p>
</div>
</li>
<li>
<img src="./datu/4.jpg" alt="">
<div id="bj3">
<h3>iGame M600 幻境之眼</h3>
<span>幻境柔光 点缀世界</span>
<p><a href="https://www.colorful.cn/product_show.aspx?mid=151&id=40" style="text-decoration: none;">更多信息</a></p>
</div>
</li>
</ul>
</div>
<div id="f">
<div id="xxs">
<div id="zxs">
<h4><a href="">›下载与服务</a></h4>
<li><a href="">›驱动下载</a></li>
<li><a href="">›保修政策</a></li>
<li><a href="">›经销商服务</a></li>
<li><a href="">›售后服务</a></li>
<li><a href="">›壁纸下载</a></li>
<li><a href="">›装机指南</a></li>
</div>
<div id="xph">
<h4><a href="">›联系我们</a></h4>
<li><a href="">›新浪微博</a></li>
<li><a href="">›官方抖音</a></li>
<li><a href="">›官方微信</a></li>
</div>
<div id="zph">
<h4><a href="">›关于我们</a></h4>
<li><a href="">›公司简介</a></li>
<li><a href="">›荣誉奖项</a></li>
<li><a href="">›招聘信息</a></li>
<li><a href="">›宏威工艺</a></li>
<li><a href="">›七彩虹平板</a></li>
<li><a href="">›COLORRFLY</a></li>
<li><a href="">›法律声明</a></li>
</div>
<div id="dph">
<h4><a href="">›官方旗舰店</a></h4>
<li><a href="">›官方商城</a></li>
<li>
<a href="">›京东店铺</a>
</li>
<li>
<a href="">›天猫店铺</a>
</li>
<li>
<a href="">›拼多多店铺</a>
</li>
<li>
<a href="">›移动端店铺</a>
</li>
</div>
<div id="dxs">
<img src="./logo/phone.jpg" alt="">
<h4>电话：400-678-5866</h4>
<h5>服务时间：周一至周五 9:00-18:00</h5>
<div id="hdhz">
在线咨询
</div>
</div>
</div>
</div>
</div>
<div id="g">
<div id="ppp">
<div id="bbb">
<a href=""> <img src="./logo/zg.png" alt="">中文
<div class="fgh">
<li><img src="./logo/zg.png" alt="">中文</li>
<li><img src="./logo/hg.png" alt="">한국어</li>
<li><img src="./logo/bzd.png" alt="">English</li>
<li><img src="./logo/dg.png" alt="">Koreanisch</li>
</div>
</a>
<h5>Copyrights © 2018,Colorful Co.,Ltd. All right reserved. 深圳市七彩虹禹贡科技发展有限公司。版权所有，未经许可不得转载。</h5>
<span>粤ICP备05085036号</span>
<h6>粤公网安备44030402000030号</h6>
<a id="GGGH" href="#top">↑</a>
</div>
</div>
</div>
</div>
</body>
</html>
css部分
*{
padding: 0;
margin: 0;
}
#a1 li{
list-style: none;
color: white;
font-size: 2px;
font-weight: bold;
}
#box{
height: 2690px;
width: 1450px;
/* border: 2px solid black; */
display: flex;
flex-direction: column;
}
#box>#a{
width: 1450px;
height: 100px;
position: fixed;
background-color: black;
z-index: 30;
}
#a1{
height: 100px;
width: 900px;
margin: 0 auto;
background-color: rgb(0, 0, 0);
padding: 0 15px 0;
position: absolute;
left: 240px;
}
#box>#a>#a1>img{
width: 200px;
height: 80px;
position: absolute;
top: 6px;
z-index: 1;
}
#a1>li{
text-align: center;
float: right;
height: 50px;
line-height: 50px;
margin: 20px auto;
}
#a1 li>a{
font-size: 5px;
padding: 0;
font-size: 10px;
color: white;
text-decoration: none;
/* position: absolute; */
}
#a1 li:nth-child(1):hover {
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(2):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(3):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(4):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(5):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(6):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(7):hover{
background-color: red;
border-radius: 10%;
}
#a1 li:nth-child(8):hover{
background-color: red;
border-radius: 10%;
}
.gg{
position: absolute;
top: 950x;
display: none;
text-align:left;
line-height: 40px;
border-radius: 10%;
}
#a1>li:nth-child(6):hover .gg{
z-index: 10;
display: block;
background-color: rgb(52, 51, 51);
font-size: 5px;
cursor: pointer;
}
#a1>li:nth-child(6) .gg>li:nth-child(1):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(6) .gg>li:nth-child(2):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(5):hover .gg{
z-index: 10;
display: block;
background-color: rgb(52, 51, 51);
font-size: 5px;
cursor: pointer;
}
#a1>li:nth-child(5) .gg>li:nth-child(1):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(5) .gg>li:nth-child(2):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(5) .gg>li:nth-child(3):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(5) .gg>li:nth-child(4):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(4):hover .gg{
z-index: 10;
display: block;
background-color: rgb(52, 51, 51);
font-size: 5px;
cursor: pointer;
}
#a1>li:nth-child(4) .gg>li:nth-child(1):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(4) .gg>li:nth-child(2):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(4) .gg>li:nth-child(3):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(4) .gg>li:nth-child(4):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
li:nth-child(3):hover .gg{
z-index: 10;
display: block;
background-color: rgb(52, 51, 51);
font-size: 5px;
cursor: pointer;
}
#a1>li:nth-child(3) .gg>li:nth-child(1):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(3) .gg>li:nth-child(2):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(3) .gg>li:nth-child(3):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
li:nth-child(2):hover .gg{
z-index: 10;
display: block;
background-color: rgb(52, 51, 51);
font-size: 5px;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(1):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(2):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(3):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(4):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(5):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#a1>li:nth-child(2) .gg>li:nth-child(6):hover{
transform: translateX(2px);
transition: 0.3s;
font-size: 5px;
color: black;
z-index: 10;
cursor: pointer;
}
#b{
width: 1450px;
height: 330px;
/* border: solid green; */
position: relative;
left: 0;
/* z-index: 3; */
top: 100px;
overflow: hidden;
}
#bx{
width: 9999px;
height: 9999px;
animation: switch 15s infinite;
}
#box>#b>#bx>img{
width: 1450px;
height: 330px;
float: left;
z-index: 4;
/* top: 100px; */
}
@keyframes switch {
0% {};
20% {
transform: translateX(0px);
}
40% {
transform: translateX(-1450px);
}
60% {
transform: translateX(-2950px);
}
80% {
transform: translateX(-4350px);
}
100% {
transform: translateX(0px);
}
}
#bt1{
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255,0.2);
position: absolute;
left: 20px;
top: 100px;
border-radius: 100%;
/* display: none; */
z-index: 4;
cursor: pointer;
border: 0.5px solid black;
font-size: bold;
}
#bt2{
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255,0.2);
font-size: 15px;
position: absolute;
right: 20px;
top: 100px;
border-radius: 100%;
/* display: none; */
z-index: 4;
cursor: pointer;
border: 0.5px solid black;
font-size: bold;
}
#box>#b>img:hover~#bt1{
display: block;
background-color: rgba(255, 255, 255,0.8);
}
#box>#b>img:hover~#bt2{
display: block;
background-color: rgba(255, 255, 255,0.8);
}
#c{
width: 1450px;
height: 383px;
/* border: 1px solid grey; */
display: flex;
position: relative;
top: 100px;
}
#qqq{
width: 480px;
height: 383px;
background-color: black;
}
#eee{
width: 970px;
height: 383px;
background-color: red;
display: flex;
overflow: hidden;
/* justify-content: space-evenly; */
}
#www{
width:360px;
height: 191px;
position: absolute;
top: 0px;
left: 0;
margin: 75px;
}
.asd{
width: 137px;
height: 235px;
background-color: red;
/* border: 1px solid black; */
float: left;
margin: 50px 5px;
text-align: center;
}
#c>#eee>.asd>h4{
font-size: 18px;
color: white;
font-weight: bold;
margin: 10px 0;
}
span{
font-size: 14px;
color: white;
}
#c>#eee>.asd>button{
width: 56px;
height: 34px;
border-radius: 10%;
background-color: red;
border-color: rgba(255, 255, 255,0.5);
color: white;
display: inline-block;
}
#c>#eee>.asd>button>a{
text-decoration: none;
}
#c>#eee>.asd>li{
background-color: white;
width: 56px;
height: 34px;
border: 10%;
list-style: none;
}
#c>#eee>.asd>button:hover{
background-color: white;
color: grey;
transition: 1s;
/* transform: translateX(); */
cursor: pointer;
}
#c>#eee>.asd>button:hover a{
color: black;
transform: 1s;
}
#c>#eee>.asd:nth-child(7)>img{
width: 120px;
height: 130;
}
#c>#eee>.asd:nth-child(8)>img{
width: 120px;
height: 130;
}
#hdbt{
border-color: rgba(255, 255, 255,0.5);
border-radius: 10%;
width: 80px;
height: 30px;
position: absolute;
left: 925px;
bottom: 20px;
background-color: red;
}
#c>#hdbt:hover{
background-color: white;
color: grey;
transition: 1s;
cursor: pointer;
z-index: 10;
}
#c>#hdbt:hover~#eee>.asd{
transform: translateX(-130px);
transition: 1s;
}
#cjdhz{
height: 1400px;
width: 1452px;
position: absolute;
top: 814px;
background-image: url(./d6.jpg);
background-attachment: fixed;
}
#boxxd{
width: 1450px;
height: 400px;
position: absolute;
top: 0px;
display: flex;
}
#boxxd>ul>li{
width: 723px;
height: 400px;
list-style: none;
float: left;
background-color: grey;
}
#boxxd>ul>li>img{
width: 703px;
height: 380px;
padding: 10px 10px 10px 10px;
position: absolute;
}
#bj{
width: 703px;
height: 380px;
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(88, 88, 88, 0.5);
display: none;
}
#bj1{
width: 703px;
height: 380px;
position: absolute;
top: 10px;
right: 14px;
background-color: rgba(88, 88, 88, 0.5);
display: none;
}
#bj>h3{
font-size: 21px;
color: black;
position: absolute;
top: 150px;
left: 40%;
}
#bj>span{
font-size: 14px;
color: black;
position: absolute;
top: 180px;
left: 43%;
}
#bj1>h3{
font-size: 21px;
color: black;
position: absolute;
top: 150px;
left: 28%;
}
#bj1>span{
font-size: 14px;
color: black;
position: absolute;
top: 180px;
left: 45%;
}
#bj>p{
width: 106px;
height: 30px;
padding: 5px 22px;
position: absolute;
top: 210px;
left: 290px;
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 30px;
border: 1px solid red;
}
#bj1>p{
width: 106px;
height: 30px;
padding: 5px 22px;
position: absolute;
top: 210px;
right: 250px;
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 30px;
border: 1px solid red;
}
#boxxd li:nth-child(1):hover>#bj{
display: block;
z-index: 10;
}
#boxxd li:nth-child(2):hover>#bj1{
display: block;
z-index: 10;
}
#boxxd li:nth-child(1):hover>#bj>p{
background-color: rgba(255, 255, 255, 0);
color: red;
font-weight: bold;
}
#boxxd li:nth-child(2):hover>#bj1>p{
background-color: rgba(255, 255, 255, 0);
color: red;
font-weight: bold;
}
#boxxd li:nth-child(1)>#bj>p:hover{
background-color: red;
color: white;
cursor: pointer;
}
#boxxd li:nth-child(2)>#bj1>p:hover{
background-color: red;
color: white;
cursor: pointer;
}
#boxxd li:nth-child(1)>#bj>p:hover>a{
color: white;
}
#boxxd li:nth-child(2)>#bj1>p:hover>a{
color: white;
}
#d{
width: 1450px;
height: 600px;
position: absolute;
top: 400px;
left: 0;
/* background-color: red; */
}
#hhh{
width: 666px;
height: 332px;
position: absolute;
top: 100px;
left: 150px;
margin: 0 46px 0 0;
padding: 30px;
background-color: rgba(255, 255, 255, 0.1);
}
#lll{
width: 606px;
height: 165px;
position: absolute;
top: 20px;
left: 20px;
margin: 0 0 50px;
}
#d>#hhh>#lll>p:nth-child(1){
height: 44px;
width: 158px;
background-color: rgb(255, 0, 0);
margin: 0 0 10px;
padding: 10px 20px 1px 10px;
position: absolute;
top: 0;
left: 0;
color: white;
}
#d>#hhh>#lll>h2{
font-size: 40px;
color: white;
margin: 0 0 20px;
width: 606px;
height: 60px;
position: absolute;
left: 0;
top: 125px;
}
#d>#hhh>#lll>.igma{
font-size: 18px;
color: white;
width: 606px;
height: 33px;
position: absolute;
left: 0;
top: 180px;
}
#zh{
width: 122px;
height: 46px;
margin: 5px;
padding: 0 26px;
position: absolute;
left: 0;
top:300px;
color: white;
background-color:rgba(255,255,255,0);
border: 1px white solid;
cursor: pointer;
border-radius: 10%;
}
#zh:hover{
color: black;
background-color: white;
transition: 1s;
}
#e{
width: 1450px;
height: 400px;
position: absolute;
top: 1000px;
display: flex;
}
#e>ul>li{
width: 723px;
height: 400px;
list-style: none;
float: left;
background-color: grey;
}
#e>ul>li>img{
width: 703px;
height: 380px;
padding: 10px 10px 10px 10px;
position: absolute;
}
#bj2{
width: 703px;
height: 380px;
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(88, 88, 88, 0.5);
display: none;
}
#bj3{
width: 703px;
height: 380px;
position: absolute;
top: 10px;
right: 14px;
background-color: rgba(88, 88, 88, 0.5);
display: none;
}
#bj2>h3{
font-size: 21px;
color: black;
position: absolute;
top: 150px;
left: 25%;
}
#bj2>span{
font-size: 14px;
color: black;
position: absolute;
top: 180px;
left: 43%;
}
#bj3>h3{
font-size: 21px;
color: black;
position: absolute;
top: 150px;
left: 37%;
}
#bj3>span{
font-size: 14px;
color: black;
position: absolute;
top: 180px;
left: 45%;
}
#bj2>p{
width: 106px;
height: 30px;
padding: 5px 22px;
position: absolute;
top: 210px;
left: 290px;
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 30px;
border: 1px solid red;
}
#bj3>p{
width: 106px;
height: 30px;
padding: 5px 22px;
position: absolute;
top: 210px;
right: 250px;
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 30px;
border: 1px solid red;
}
#e li:nth-child(1):hover>#bj2{
display: block;
z-index: 10;
}
#e li:nth-child(2):hover>#bj3{
display: block;
z-index: 10;
}
#e li:nth-child(1):hover>#bj2>p{
background-color: rgba(255, 255, 255, 0);
color: red;
font-weight: bold;
}
#e li:nth-child(2):hover>#bj3>p{
background-color: rgba(255, 255, 255, 0);
color: red;
font-weight: bold;
}
#e li:nth-child(1)>#bj2>p:hover{
background-color: red;
color: white;
cursor: pointer;
}
#e li:nth-child(2)>#bj3>p:hover{
background-color: red;
color: white;
cursor: pointer;
}
#e li:nth-child(1)>#bj2>p:hover>a{
color: white;
}
#e li:nth-child(2)>#bj3>p:hover>a{
color: white;
}
#f{
width: 1452px;
height: 406px;
background-color: #353535;
position: absolute;
top: 1400px;
}
#xxs{
float: left;
width: 1100px;
height: 406px;
background-color: #464646;
padding: 0 15px
}
#zxs{
padding: 80px 0;
width: 200px;
height: 249px;
margin: 40px 190px;
}
#xxs li {
list-style: none;
}
a{
text-decoration: none;
line-height: 30px;
color: white;
z-index: 5;
font-size: 10px;
}
#xxs a:hover{
color: rgb(179, 179, 179);
}
#xph{
float: left;
width: 200px;
height: 249px;
position: absolute;
top: 120px;
left: 400px;
}
#zph{
float: left;
width: 200px;
height: 249px;
position: absolute;
top: 120px;
left: 600px;
}
#dph{
float: left;
width: 200px;
height: 249px;
position: absolute;
top: 120px;
left: 800px;
}
#dxs{
width: 300px;
height: 306px;
position: absolute;
top: 0;
right: 0;
margin: 50px 0;
padding: 0 15px;
}
#dxs>img{
position: absolute;
left: 115px;
}
#dxs>h4{
width: 280px;
height: 27px;
margin: 10px;
position: absolute;
top: 140px;
text-align: center;
color: white;
}
#dxs>h5{
width: 280px;
height: 21px;
margin: 10px;
position: absolute;
top: 178px;
text-align: center;
color: white;
}
#hdhz{
position: absolute;
top: 220px;
left: 130px;
text-align: center;
line-height: 34px;
color: red;
width: 88px;
height: 34px;
border: 1px solid red;
border-radius: 10%;
}
#hdhz:hover{
color: white;
background-color: red;
transition: 0.5s;
cursor: pointer;
}
#g{
width: 1452px;
height: 120px;
background-color: #353535;
position: absolute;
top: 2620px;
}
#ppp{
width: 1452px;
height: 75px;
padding: 10px 0;
}
#bbb{
width: 1152px;
height: 50px;
position: absolute;
top: 15px;
left: 170px;
}
#bbb>a{
width: 100px;
height: 50px;
}
.fgh{
width: 100px;
background-color: grey;
height: 60px;
display: none;
overflow: scroll;
}
.fgh>li{
list-style: none;
width: 100px;
height: 25px;
text-align: left;
line-height: 25px;
}
#bbb>a:hover>.fgh{
display: block;
}
#bbb>h5{
position: absolute;
top: 10px;
left: 200px;
color: grey;
}
#bbb>span{
position: absolute;
top: 30px;
left: 400px;
color: grey;
font-size: 10px;
}
#bbb>h6{
position: absolute;
top: 30px;
left: 500px;
color: grey;
font-size: 10px;
}
#GGGH{
position: absolute;
right: 0px;
top: 6px;
font-size: 25px;
color: white;
}
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
