QQ音乐前端部分代码仿写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ音乐</title>
<link href="new_file.css" rel="stylesheet" />
<style type="text/css">
body {
background: rgba(128, 128, 128, 0.1);
position: relative;
}
.box1 {
width: 1500px;
height: 155px;
margin: auto;
background-color: white;
border-radius: 5px;
border: 1px solid lightgrey;
}
.box2 {
width: 1200px;
height: 100px;
margin: auto;
background-color: white;
border-top: 1px solid transparent;
border-bottom: 1px solid lightgray;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
box-sizing: border-box;
border-radius: 5px;
margin-top: 0px;
text-align: center;
}
.box3 {
width: 700px;
height: 40px;
margin: 0 auto;
background-color: white;
border: 1px solid transparent;
margin-top: 5px;
box-sizing: border-box;
}
.box4 {
position: relative;
width: 200px;
height: 30px;
background-color: white;
border: 1px solid lightgray;
text-align: center;
margin-right: 20px;
margin-top: 23px;
border-radius: 5px;
float: left;
}
.box5 {
position: relative;
width: 120px;
height: 40px;
border: 1px solid green;
float: left;
background-color: green;
box-sizing: border-box;
border-radius: 5px;
margin-left: 20px;
margin-top: 17px;
}
.box6 {
position: relative;
width: 80px;
height: 40px;
border: 1px solid lightgreen;
box-sizing: border-box;
margin-right: 5px;
float: right;
border-radius: 5px;
margin-top: 17px;
}
.box7 {
width: 200px;
height: 100px;
border: 1px solid transparent;
margin: auto;
text-align: center;
}
.box8 {
width: 700px;
height: 50px;
margin: auto;
/* background-color: white; */
text-align: center;
margin-top: ;
border: 1px solid transparent;
margin-top: 20px;
}
.box10 {
width: 80px;
height: 75px;
border: 1px solid transparent;
float: left;
margin-top: -15px;
margin-bottom: 5px;
text-align: center;
}
.box11 {
width: 1400px;
height: 335px;
border: 1px solid transparent;
background-color: white;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
}
.box12 {
width: 75px;
height: 100px;
float: left;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(60px);
text-align: center;
font-size: 56px;
}
.box13 {
width: 75px;
height: 100px;
float: right;
margin-left: 0px;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(60px);
text-align: center;
font-size: 56px;
}
.box14 {
width: 220px;
height: 300px;
border: 1px solid transparent;
margin-top: 10px;
background-color: white;
margin-left: 22px;
margin-right: auto;
float: left;
box-sizing: border-box;
}
.box15 {
width: 1400px;
height: 60px;
border: 1px solid transparent;
margin: auto;
}
.box16 {
width: 150px;
height: 35px;
border: 1px solid lightgray;
float: left;
text-align: center;
transform: translateY(25px);
}
.box17 {
width: 500px;
height: 60px;
border: 1px solid transparent;
margin-left: 450px;
}
.box18 {
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid gray;
border-right: 15px solid transparent;
float: left;
transform: translate(8px, 3px);
}
.box20 {
width: 1400px;
height: 565px;
border: 1px solid transparent;
background-color: white;
margin: auto;
margin-top: 15px;
box-sizing: border-box;
}
.box21 {
width: 75px;
height: 100px;
float: left;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(137px);
text-align: center;
font-size: 56px;
}
.box22 {
width: 75px;
height: 100px;
float: right;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(137px);
text-align: center;
font-size: 56px;
}
.box23 {
width: 400px;
height: 120px;
border: 1px solid transparent;
margin-left: 5px;
margin-right: 0px;
float: left;
margin-top: 35px;
box-sizing: border-box;
}
.box24 {
width: 1240px;
height: 520px;
border: 1px solid transparent;
background-color: white;
margin: auto;
margin-top: 0px;
box-sizing: border-box;
}
.box25 {
width: 1400px;
height: 370px;
border: 1px solid transparent;
background-color: white;
margin: auto;
box-sizing: border-box;
}
.box27 {
width: 60px;
height: 30px;
border: 1px solid transparent;
float: right;
transform: translateY(-40px);
}
.box28 {
width: 233px;
height: 245px;
border: 1px solid transparent;
background-color: white;
margin: auto;
float: left;
margin-left: 10px;
margin-top: 10px;
box-sizing: border-box;
}
.box29 {
width: 75px;
height: 100px;
float: left;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(137px);
text-align: center;
font-size: 56px;
overflow: auto;
}
.box30 {
width: 75px;
height: 100px;
float: right;
margin-right: 0px;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(-380px);
text-align: center;
font-size: 56px;
}
.box31 {
width: 650px;
height: 320px;
border: 1px solid transparent;
float: left;
margin-top: 20PX;
margin-left: 30px;
}
.box33 {
width: 120px;
height: 20px;
border: 1px solid transparent;
text-align: center;
font-size: 20px;
color: lightgray;
margin: auto;
box-sizing: border-box;
margin-top: 300px;
}
.box34 {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid lightgray;
background-color: lightgray;
margin: auto;
float: left;
margin-top: 5px;
margin-left: 5px;
margin-right: 0px;
transition: transform 3s ease;
}
.box35 {
width: 250px;
height: 520px;
border: 1px solid transparent;
float: right;
margin-right: 0px;
margin-left: 15px;
box-sizing: border-box;
}
.box36 {
width: 140px;
height: 20px;
border: 1px solid transparent;
text-align: center;
font-size: 20px;
color: lightgray;
margin: auto;
margin-top: 520px;
box-sizing: border-box;
}
.box37 {
width: 80px;
height: 20px;
border: 1px solid transparent;
text-align: center;
font-size: 20px;
color: lightgray;
margin: auto;
box-sizing: border-box;
margin-top: 310px;
transform: translateX(20px);
}
.box38 {
width: 80px;
height: 20px;
border: 1px solid transparent;
text-align: center;
font-size: 20px;
color: lightgray;
margin: auto;
box-sizing: border-box;
margin-top: -5px;
transform: translateX(20px);
}
.box39 {
width: 1400px;
height: 750px;
border: 1px solid transparent;
background-color: white;
margin: auto;
margin-top: 15px;
box-sizing: border-box;
}
.box40 {
width: 1240px;
height: 730px;
border: 1px solid transparent;
background-color: white;
margin: auto;
margin-top: 0px;
box-sizing: border-box;
}
.box41 {
width: 233px;
height: 350px;
border: 1px solid transparent;
background-color: white;
margin: auto;
float: left;
margin-left: 10px;
margin-top: 10px;
box-sizing: border-box;
}
.box42 {
width: 100px;
height: 20px;
border: 1px solid transparent;
text-align: center;
font-size: 20px;
color: lightgray;
margin: auto;
box-sizing: border-box;
margin-top: -40px;
}
.box43 {
width: 75px;
height: 100px;
float: right;
margin-right: 0px;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(-450px);
text-align: center;
font-size: 56px;
}
.box44 {
width: 75px;
height: 100px;
float: left;
background-color: lightgray;
border: 1px solid lightgray;
transform: translateY(300px);
text-align: center;
font-size: 56px;
}
.box45 {
width: 1500px;
height: 155px;
margin: auto;
background-color: white;
border-radius: 5px;
border: 1px solid lightgrey;
}
</style>
<script src="new_file.js"></script>
</head>
<body>
<script src="new_file.js"></script>
<div class="box1">
<div class="box2">
<img src="img/logo.png" class="moved-image" width="170px" height="50px" />
<ul class="music-menu">
<li class="box10 active">音乐馆</li>
<li class="box10"><a href="#">我的音乐</a></li>
<li class="box10"><a href="#">客户端</a></li>
<li class="box10"><a href="#">开放平台</a></li>
<li class="box10"><a href="#">VIP</a></li>
</ul>
<div class="box4"><input type="text" class="input-field" placeholder="搜索音乐、MV、歌单、用户🔍" /></div>
<p>登录</p>
<div class="box5">
<select>
<option>开通VIP</option>
<option>开通超级会员</option>
<option>开通绿钻豪华版</option>
</select>
</div>
<div class="box6">
<select>
<option>充值</option>
<option>购买乐币</option>
<option>充值饭票</option>
</select>
</div>
</div>
<div class="box3">
<p>
<span>首页</span>
<span>歌手</span>
<span>新碟</span>
<span>排行榜</span>
<span>分类歌单</span>
<span>电台</span>
<span>MV</span>
<span>数字专辑</span>
</p>
</div>
</div>
<div class="box7">
<h3>歌 单 推 荐</h3>
</div>
<div class="box8">
<p>为你推荐</p>
<p>经典国语</p>
<p>经典</p>
<p>背景音乐</p>
<p>官方歌单</p>
<p>情歌</p>
</div>
<div class="box11">
<div class="box12"><</div>
<div class="box13">></div>
<div class="box14">
<img src="img/1.webp" width="218px" height="220px" />
<h2>抖音爆款：不可错过的热门旋律</h2>
<h6>播放量：2401.7万</h6>
</div>
<div class="box14">
<img src="img/2.webp" width="218px" height="220px" />
<h2>到点了该emo了，00后的听歌现状</h2>
<h6>播放量：3411.7万</h6>
</div>
<div class="box14">
<img src="img/3.webp" width="218px" height="220px" />
<h2>周杰伦 · 翻开12月的回忆</h2>
<h6>播放量：61.8万</h6>
</div>
<div class="box14">
<img src="img/4.webp" width="218px" height="220px" />
<h2>崩坏3 OST音乐合辑</h2>
<h6>播放量：119.5万</h6>
</div>
<div class="box14">
<img src="img/5.webp" width="218px" height="220px" />
<h2>听多久emo多久，哭了也就过去了</h2>
<h6>播放量：2967.1万</h6>
</div>
<div class="box33">
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
</div>
</div>
<div class="box7">
<h3>新 歌 首 发</h3>
</div>
<div class="box15">
<div class="box16">
<div class="box18"></div>
<p>播放全部</p>
</div>
<div class="box17">
<p>
<span>最新</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</p>
</div>
</div>
<div class="box20">
<div class="box21"><</div>
<div class="box22">></div>
<div class="box24">
<div class="box23">
<img src="img/6.webp" width="119px" height="119px" />
<h2>Always on my mind (总在我的心境...</h2>
<h6>苏运莹</h6>
<p>04:16</p>
</div>
<div class="box23">
<img src="img/7.webp" width="119px" height="119px" />
<h2>Afterglow</h2>
<h6>蔡徐坤</h6>
<p>02:23</p>
</div>
<div class="box23">
<img src="img/8.webp" width="119px" height="119px" />
<h2>拨云见日《扫黑·决不放弃》电影片...</h2>
<h6>艾热AIR /王以太</h6>
<p>03:08</p>
</div>
<div class="box23">
<img src="img/9.webp" width="119px" height="119px" />
<h2>不是绿洲</h2>
<h6>双笙 (陈元汐)</h6>
<p>03:12</p>
</div>
<div class="box23">
<img src="img/10.webp" width="119px" height="119px" />
<h2>《变身！》大张伟Feat.C2C (K...</h2>
<h6>大张伟 /C2C</h6>
<p>03:40</p>
</div>
<div class="box23">
<img src="img/11.webp" width="119px" height="119px" />
<h2>ZOMBIE</h2>
<h6>EVERGLOW (에버글로우)</h6>
<p>03:18</p>
</div>
<div class="box23">
<img src="img/12.webp" width="119px" height="119px" />
<h2>远飞《看不见影子的少年》影视</h2>
<h6>张颂文 /荣梓杉</h6>
<p>04:21</p>
</div>
<div class="box23">
<img src="img/13.jpg" width="119px" height="119px" />
<h2>Waiting for You (feat. Ashle...</h2>
<h6>Dept (뎁트) /Ashley Alisha</h6>
<p>02:59</p>
</div>
<div class="box23">
<img src="img/14.webp" width="119px" height="119px" />
<h2>三餐四季</h2>
<h6>周深</h6>
<p>04:20</p>
</div>
<div class="box36">
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
</div>
</div>
</div>
<div class="box7">
<h3>精 彩 推 荐</h3>
</div>
<div class="box25">
<div class="box31">
<img src="img/15.jpg" width="649px" height="auto" />
</div>
<div class="box31">
<img src="img/16.jpg" width="649px" height="auto" />
</div>
<div class="box37">
<div class="box34"></div>
<div class="box34"></div>
</div>
</div>
<div class="box7">
<h3>新 碟 首 发</h3>
</div>
<div class="box15">
<div class="box17">
<p>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</p>
</div>
<div class="box27">更多></div>
</div>
<div class="box39">
<div class="box44"><</div>
<div class="box40">
<div class="box41">
<img src="img/17.webp" width="232px" height="252px" />
<h2>Something Worth Saving (爱依然存在)</h2>
<h6>孟佳</h6>
</div>
<div class="box41">
<img src="img/18.webp" width="232px" height="252px" />
<h2>平行时空的我们或许能在一起</h2>
<h6>潘韵淇</h6>
</div>
<div class="box41">
<img src="img/19.webp" width="232px" height="252px" />
<h2>心电感应</h2>
<h6>小蓝背心 /滨滨</h6>
</div>
<div class="box41">
<img src="img/20.webp" width="232px" height="252px" />
<h2>梦寐之地终会有一天抵达</h2>
<h6>黄誉博</h6>
</div>
<div class="box41">
<img src="img/21.jpg" width="232px" height="252px" />
<h2>路太远</h2>
<h6>付豪</h6>
</div>
<div class="box41">
<img src="img/22.webp" width="232px" height="252px" />
<h2>送别</h2>
<h6>法老</h6>
</div>
<div class="box41">
<img src="img/23.jpg" width="232px" height="252px" />
<h2>下一次爱情来的时候</h2>
<h6>半吨兄弟</h6>
</div>
<div class="box41">
<img src="img/24.webp" width="232px" height="252px" />
<h2>不管</h2>
<h6>苏星婕</h6>
</div>
<div class="box41">
<img src="img/25.webp" width="232px" height="252px" />
<h2>Always on my mind (总在我的心境中)</h2>
<h6>苏运莹</h6>
</div>
<div class="box41">
<img src="img/26.webp" width="232px" height="252px" />
<h2>远飞</h2>
<h6>张颂文 /荣梓杉</h6>
</div>
</div>
<div class="box38">
<div class="box34"></div>
<div class="box34"></div>
</div>
<div class="box43">></div>
</div>
<div class="box7">
<h3>排 行 榜</h3>
</div>
<div class="box15">
<div class="box17"></div>
<div class="box27">更多></div>
</div>
<div class="box20">
<div class="box35">
<img src="img/31.png" width="100%" height="100%" />
</div>
<div class="box35">
<img src="img/30.png" width="100%" height="100%" />
</div>
<div class="box35">
<img src="img/29.png" width="100%" height="100%" />
</div>
<div class="box35">
<img src="img/28.png" width="100%" height="100%" />
</div>
<div class="box35">
<img src="img/27.png" width="100%" height="100%" />
</div>
</div>
<div class="box7">
<h3>M V</h3>
</div>
<div class="box15">
<div class="box17">
<p>
<span>精选</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</p>
</div>
<div class="box27">更多></div>
</div>
<div class="box20">
<div class="box21"><</div>
<div class="box24">
<div class="box28">
<img src="img/32.webp" width="233px" height="145px" />
<h2>SUPER JUNIOR《Show Time》MV</h2>
<h6>SUPER JUNIOR</h6>
<p>1450</p>
</div>
<div class="box28">
<img src="img/33.jpg" width="233px" height="145px" />
<h2>风吹过的晨曦</h2>
<h6>周深</h6>
<p>22858</p>
</div>
<div class="box28">
<img src="img/34.webp" width="233px" height="145px" />
<h2>威神V(WayV)《Give Me That》MV</h2>
<h6>威神V (WayV)</h6>
<p>1454</p>
</div>
<div class="box28">
<img src="img/35.webp" width="233px" height="145px" />
<h2>ZOMBIE</h2>
<h6>EVERGLOW</h6>
<p>4511</p>
</div>
<div class="box28">
<img src="img/36.webp" width="233px" height="145px" />
<h2>GRAB ME - Japanese ver. -</h2>
<h6>AB6IX</h6>
<p>4516</p>
</div>
<div class="box28">
<img src="img/37.webp" width="233px" height="145px" alt="" />
<h2>成名在望</h2>
<h6>五月天</h6>
<p>5156</p>
</div>
<div class="box28">
<img src="img/38.webp" width="233px" height="145px" alt="" />
<h2>懒球得处 (越来越)</h2>
<h6>猴子lámpo</h6>
<p>17514</p>
</div>
<div class="box28">
<img src="img/39.jpg" width="233px" height="145px" alt="" />
<h2>饭店五星级</h2>
<h6>FinesseBoy$ /马思唯</h6>
<p>15416</p>
</div>
<div class="box28">
<img src="img/40.webp" width="233px" height="145px" alt="" />
<h2>去明天</h2>
<h6>周深</h6>
<p>14512</p>
</div>
<div class="box28">
<img src="img/41.webp" width="233px" height="145px" alt="" />
<h2>野兽领主</h2>
<h6>腾格尔</h6>
<p>14515</p>
</div>
</div>
<div class="box30">></div>
</div>
<div class="box42">
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
<div class="box34"></div>
</div>
<div class="box46">
<div class="box47">
<div class="box48">
<a>下载QQ音乐客户端</a>
<div class="box51"><p>pc版</p><p>Mac版</p><p>Android版</p><p>iPhone版</p></div>
<p class="box52"><a>开放平台</a></p>
<div class="box53">
<p>QQ音乐开放平台</p>
<p>腾讯音乐人</p>
<p>音乐推-歌曲推广</p>
</div>
<div class="box54"><p>启明星Venus-词曲交易/歌曲推广</p>
<p>TME Studio</p>
</div>
<div class="box55"><p>臻品质认证</p></div>
</div>
<div class="box49">
<a>特色产品</a>
<div class="box56">
<p>全民K歌</p>
<p>银河音效</p>
<p>Qplay</p>
<p>Fan直播伴侣</p>
</div>
<div class="box57">
<p>车载互联</p>
<p>QQ出演</p>
</div>
<p class="box58"><a>TME集团官网</a></p>
<div class="box59"><p>腾讯音乐</p></div>
</div>
<div class="box50">
<a>合作链接</a>
<div class="box60"><p>CJ ENM</p><p>腾讯视频</p><p>手机QQ空间</p></div>
<div class="box60"><p>最新版QQ</p><p>腾讯社交广告</p><p>电脑管家</p></div>
<div class="box60"><p>QQ浏览器</p><p>腾讯微云</p><p>腾讯云</p></div>
<div class="box60"><p>企鹅FM</p><p>智能电视网</p><p>当贝市场</p></div>
<div class="box60"><p>酷我音乐</p><p>酷狗听书</p></div>
</div>
<div class="box61">
<div class="box62"><p><span>关于腾讯</span>|<span>About Tcentent</span>|<span>服务条款</span>|<span>用户协议</span>|<span>隐私政策</span>|<span>权力声明</span>|<span>广告服务</span>|<span>腾讯招聘</span>|<span>客服中心</span>|<span>网站导航</span>|<span>举报中心</span></p></div>
<div class="box63"><p>Copyright © 1998 - 2024 Tencent.<span>All Rights Reserved</span></p></div>
<div class="box64"><p>腾讯公司 <span> 版权所有</span> | <span>营业执照</span> |网络文化经营许可证：<span>粤网文[2023]2882-203号</span>｜客服电话：<span>4006016666</span>｜违法与不良信息举报邮箱：<span>tme_musicjubao@tencentmusic.com</span></p></div>
</div>
</div>
</div>
<div class="feedback">
<a href="#" class="information"3><span>∧</span></a>
<a href="#" class="information"><span>举报</span></a>
<a href="#" class="information"><span>反馈</span></a>
<a href="#" class="information"><span><div class="box18"></div></span></a>
</div>
</body>
</html>
css部分
.moved-image {
margin-top: 25px;
margin-bottom: 25px;
float: left;
}
.move-image {
float: left;
}
/* 最后一个词组不需要间隔，所以可以使用 :not(:last-child) 选择器来排除它 */
/* .box2 h6 span:not(:last-child) {
margin-right: 40px; */
}
.box4 {
width: 0px;
padding: 0px;
border: 1px solid orange display: inline-block;
margin-bottom: 0px;
border-radius: 1px;
border-radius: 5px;
}
.input-field {
/* 设置输入框的样式，使其与盒子保持一致 */
width: 100%;
/* 使输入框宽度与盒子宽度相同 */
padding: 7px;
/* 内边距，可以与盒子不同 */
border: none;
/* 去除输入框的默认边框 */
box-sizing: border-box;
border-radius: 5px;
/* 确保padding和border不会增加输入框的总宽度 */
}
.box5 {
width: 120px;
/* 设置div的宽度 */
height: 40px;
/* 设置div的高度（通常select不需要显式设置高度） */
display: flex;
/* 使用flex布局使select垂直居中（可选） */
align-items: center;
/* 垂直居中（可选） */
border-radius: 5px;
}
.box5 select {
width: 100%;
/* 使select的宽度与div相同 */
height: 100%;
/* 允许select根据其内容自动调整高度 */
color: white;
background-color: green;
border-radius: 5px;
text-align: center;
}
.box6 {
width: 80px;
/* 设置div的宽度 */
height: 40px;
/* 设置div的高度（通常select不需要显式设置高度） */
display: flex;
/* 使用flex布局使select垂直居中（可选） */
align-items: center;
/* 垂直居中（可选） */
border-radius: 5px;
}
.box6 select {
width: 100%;
/* 使select的宽度与div相同 */
height: 100%;
/* 允许select根据其内容自动调整高度 */
color: lightgray;
border-radius: 5px;
text-align: center;
}
.box3 {
width: 800px;
display: flex;
align-items: center;
justify-content: space-between;
/* 均匀分布元素，两端对齐 */
/* 或者使用 gap 属性来添加间隔
gap: 10px; 间隔为 10px */
white-space: nowrap;
position: relative;
/* 防止文本换行 */
/* 其他样式 */
padding: 10px;
/* 可以根据需要添加内边距 */
box-sizing: border-box;
/* 确保内边距和边框不会增加元素的总宽度 */
}
.box3 p {
width: 800px;
height: auto;
}
.box3 p span {
float: left;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
}
.box7 h3 {
font-size: 35px;
}
.box8 p {
width: 70px;
height: 40;
float: right;
margin: auto;
padding-right: 20px;
padding-left: 20px;
}
.music-menu {
list-style-type: none;
padding: 0;
}
.box10 {
display: block;
padding: 10px;
text-align: center;
line-height: 80px;
cursor: pointer;
font-size: 20px;
}
.box10.active {
background-color: green;
color: white;
}
.box10 a {
text-decoration: none;
color: inherit;
}
p {
width: 40px;
height: 50px;
float: left;
font-size: 16;
margin-top: 26px;
margin-bottom: 10px;
}
.box10:hover {
background: green;
width: auto;
color: white;
}
.box27:hover {
color: lightgreen;
}
.box3 span:hover {
color: lightgreen;
}
.box8 p:hover {
color: lightgreen;
}
.box16 p {
width: 100px;
height: 30px;
font-size: 20px;
text-align: center;
transform: translateY(-20px);
}
.box17 p {
width: 500px;
height: auto;
}
.box17 p span {
float: left;
margin: 0 auto;
padding-right: 25px;
padding-left: 25px;
}
.box17 span:hover {
color: lightgreen;
}
.box14 h2 {
width: 240px;
height: 40px;
font-size: 13px;
transform: translateY(-5px);
}
.box14 h6 {
width: 200px;
height: 40px;
font-size: 12px;
transform: translateY(-50px);
color: lightgray;
}
.box23 h2 {
width: 240px;
height: 40px;
transform: translate(128px, -100px);
font-size: 12px;
}
.box23 h6 {
width: 200px;
height: 40px;
transform: translate(128px, -140px);
font-size: 12px;
color: lightgray;
}
.box23 p {
width: 80px;
height: 30px;
color: lightgray;
font-size: 12px;
transform: translate(340px, -240px);
}
.box41 h2 {
width: 240px;
height: 40px;
font-size: 13px;
transform: translateY(-5px);
}
.box41 h6 {
width: 200px;
height: 40px;
font-size: 12px;
transform: translateY(-35px);
color: lightgray;
}
.box28 h2 {
width: 240px;
height: 40px;
transform: translate(10px, -10px);
font-size: 12px;
}
.box28 h6 {
width: 200px;
height: 40px;
transform: translate(10px, -50px);
font-size: 12px;
color: lightgray;
}
.box28 p {
width: 80px;
height: 30px;
color: lightgray;
font-size: 12px;
transform: translate(20px, -115px);
}
.box46 {
width: 100%;
height: 800px;
border: 1px solid black;
background-color: black;
margin-top: 50px;
}
.box47 {
width: 1400px;
height: 790px;
border: 1px solid transparent;
margin: auto;
margin-top: 5px;
box-sizing: border-box;
}
.box48 {
width: 400px;
height: 500px;
border: 1px solid transparent;
float: left;
margin: auto;
margin-top: 50px;
}
.box51 {
width: 380px;
height: 80px;
margin-top: 100px;
float: left;
text-align: left;
}
.box51 p {
width: 80px;
color: gray;
margin-left: 5px;
margin-right: 10px;
}
.box51 p:hover {
color: lightgreen;
}
.box48 a {
text-align: left;
float: left;
color: gray;
}
.box49 a {
text-align: left;
float: left;
color: gray;
}
.box50 a {
text-align: left;
float: left;
color: gray;
}
.box52 {
width: 398px;
height: 200px;
margin-top: 100px;
border: 1px solid transparent;
}
.box53 {
width: 398px;
height: 40px;
margin-top: -170px;
float: left;
border: 1px solid transparent;
text-align: left;
}
.box53 p {
width: auto;
color: gray;
height: 40px;
font-size: 14px;
margin-right: 15px;
}
.box53 p:hover {
color: lightgreen;
}
.box54 {
width: 398px;
height: 40px;
margin-top: -120px;
float: left;
border: 1px solid transparent;
text-align: left;
}
.box54 p {
width: auto;
color: gray;
height: 40px;
font-size: 14px;
margin-right: 15px;
}
.box54 p:hover {
color: lightgreen;
}
.box55 {
width: 398px;
height: 40px;
margin-top: -75px;
float: left;
border: 1px solid transparent;
text-align: left;
}
.box55 p {
width: auto;
color: gray;
height: 40px;
font-size: 14px;
margin-right: 15px;
}
.box55 p:hover {
color: lightgreen;
}
.box56{
width: 398px;
height: 90px;
border: 1px solid transparent;
float: left;
margin-top: 70px;
}
.box56 p{
width: auto;
color: gray;
transform: translateY(35px);
margin-right: 15px;
font-size: 14px;
}
.box56 p:hover{
color: lightgreen;
}
.box57{
width: 398px;
height: 50px;
border: 1px solid transparent;
float: left;
margin-top: 10px;
}
.box57 p{
width: auto;
color: gray;
margin-right: 15px;
font-size: 14px;
}
.box57 p:hover{
color: lightgreen;
}
.box58 {
width: 398px;
height: 200px;
margin-top: 55px;
border: 1px solid transparent;
}
.box59 {
width: 398px;
height: 40px;
margin-top: -165px;
float: left;
border: 1px solid transparent;
text-align: left;
}
.box59 p{
width: auto;
color: gray;
margin-right: 15px;
font-size: 14px;
}
.box59 p:hover{
color: lightgreen;
}
.box60 {
width: 398px;
height: 40px;
margin-top: 15px;
float: left;
border: 1px solid transparent;
text-align: left;
}
.box60 p{
width: auto;
color: gray;
margin-right: 15px;
font-size: 14px;
}
.box60 p:hover{
color: lightgreen;
}
.box61{
width: 1200px;
height: 200px;
border: 1px solid transparent;
margin: auto;
margin-top: 20px;
}
.box62{
width: 800px;
height: 50px;
border: 1px solid transparent;
margin: auto;
text-align: left;
font-size: 14px;
margin-top: 10px;
}
.box63{
width: 600px;
height: 50px;
text-align: left;
border: 1px solid transparent;
margin: auto;
font-size: 14px;
margin-top: 10px;
}
.box64{
width: 1150px;
height: 50px;
text-align: left;
border: 1px solid transparent;
margin: auto;
font-size: 14px;
margin-top: 10px;
}
.box62 p{
width: auto;
color: gray;
margin-right: 1px;
font-size: 14px;
}
.box62 p span:hover{
color: lightgreen;
}
.box63 p{
width: auto;
color: gray;
transform: translateY(-45px);
margin-right: 15px;
font-size: 14px;
}
.box63 p span:hover{
color: lightgreen;
}
.box64 p{
width: auto;
color: gray;
transform: translateY(-85px);
margin-right: 15px;
font-size: 14px;
}
.box64 p span:hover{
color: lightgreen;
}
.box49 {
width: 400px;
height: 500px;
border: 1px solid transparent;
margin: auto;
margin-top: 50px;
}
.box50 {
width: 400px;
height: 500px;
border: 1px solid transparent;
float: right;
margin: auto;
margin-top: -512px;
}
.feedback {
width: 50px;
height: 150px;
position: fixed;
bottom: 100px;
right: 5px;
}
.feedback a {
display: block;
width: 50px;
height: 50px;
margin-bottom: 3px;
border: 1px solid #ccc;
text-decoration: none;
color: black;
font-size: 14px;
background-color: #fff;
transition: all 0.6s;
filter: brightness(100%);
}
.feedback a:hover {
color: lightgreen;
filter: brightness(90%);
}
.feedback a span {
font-size: 12px;
display: block;
width: 18px;
height: 10px;
margin: 15px 10px 30px 10px;
background-repeat: no-repeat;
}.feedback .information span {
width: 60px;
line-height: 22px;
background-image: none;
margin: 10px 10px 20px 15px;
}
运行后头部效果图
运行后尾部效果图
扫一扫
7223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
