admin管理员组文章数量:1619280
前言:
最近学了一点HTML和CSS的基础知识,于是就做了一个页面来检验一下成果。
一、HTML部分
<!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>玩家服务</title>
<link rel="stylesheet" href="work.css">
</head>
<body>
<div class="divv">
<div class="con1">
<span class="con1_s1"></span>
<span class="con1_s2"></span>
<img src="shiling.png" alt="" class="con1_s3">
<span class="con1_s4"></span>
<a href="" class="con1_s5">返回官网首页</a>
<p class="con1_p1">亲爱的召唤师,欢迎
<a href="" class="con1_a1">|登录|</a>
</p>
<p class="con1_p2">
<a href="">游戏下载 |</a>
<a href="">微信绑定 |</a>
<a href="">点券充值 |</a>
</p>
</div>
<div class="con2">
<img src="kefu.webp" alt="" class="cebian">
<span class="con2_s1"></span>
<span class="con2_s2"></span>
<div class="con2_s4">
<img src="you.png" alt="">
<div class="youk1">
<h2 id="youk1_h">2月4日凌晨2点停机更新,无限乱斗...</h2>
<h3 id="youk1_h1">2月4日凌晨2点停机版本更新,无限乱斗回归,福牛皮肤来临,欢迎体验,预祝大家次你春快乐!</h3>
</div>
<div class="youk2">
<h2 id="youk1_h">2月环境净化-部分处罚公示</h2>
<h3 id="youk1_h1">使用外挂、恶意连败、演员、局内言语辱骂、违规昵称、挂机、送人头等行为,将会...</h3>
</div>
<div class="youk3">
<h2 id="youk1_h">2021热门问题找客服,请戳这里</h2>
<h3 id="youk1_h1">最新版本以及活动问题咨询,举报、封号等消极行为反馈,云顶问题、异常反馈,热门问题...</h3>
</div>
</div>
<span class="con2_s3"></span>
<input type="text" class="con2_in1" placeholder="请输入需要查询的问题">
<div class="con2_div1">
<span class="con2_div1_s1"></span>
<h2>英雄联盟客服官方微博</h2>
<p>这里是英雄联盟客服微博,倾听召唤师的声音,反馈问题发微博 @英雄联盟客服 @LOL客服 璐璐酱守护大家的每一份热爱!</p>
<img src="gao1.jfif" alt="">
</div>
<div class="con2_div2"><span class="con2_div1_s2"></span>
<h2>梦梦幺妹在快手官号等你看直播</h2>
<p>老铁们:快手英雄联盟官号的直播上线啦,每周三-周日18-21点,梦梦幺妹快手直播等你,欢迎观看。</p>
<img src="gao2.png" alt="">
</div>
<div class="con2_div3"><span class="con2_div1_s3"></span>
<h2>【举报违规新途径-微信】</h2>
<p>微信绑定游戏QQ,扫描下方二维码进入官方人工举报通道,提交举报内容后,有专人立即核实处理,24小时内给您结果。</p>
<img src="gao3.png" alt="">
</div>
<div class="con2_div4">
<span class="con2_div4_s1"></span>
<img src="shubiao1.png" alt="">
</div>
<p id="con2_div4_p1">选择您的问题分类,获取帮助</p>
<div class="con2_div5">
<ul>
<li>
<span class="div5_s1"></span>
<p>封号处罚</p>
</li>
<li><span class="div5_s2"></span>
<p>登录异常</p>
</li>
<li><span class="div5_s3"></span>
<p>活动相关</p>
</li>
<li><span class="div5_s4"></span>
<p>充值/购买异常</p>
</li>
<li><span class="div5_s5"></span>
<p>赛事相关</p>
</li>
<li><span class="div5_s6"></span>
<p>游戏故障/Bug</p>
</li>
<li><span class="div5_s7"></span>
<p>峡谷之巅</p>
</li>
<li><span class="div5_s8"></span>
<p>违规举报</p>
</li>
<li><span class="div5_s9"></span>
<p>其他问题</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
二、CSS部分
* {
margin: 0;
padding: 0;
}
.divv {
width: 1520px;
height: 2205px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.con1 {
width: 1520px;
height: 45px;
}
.con1_p1 {
width: 168px;
height: 20px;
display: inline-block;
color: #464646 !important;
font-size: 14px;
position: relative;
left: 90px;
top: -12px;
}
.con1_a1 {
text-decoration: none;
color: #818069;
}
.con1_p2 {
display: inline-block;
width: 208px;
height: 42px;
position: relative;
left: 84px;
top: -12px;
}
.con1_p2 a {
text-decoration: none;
color: #464646;
font-size: 13px;
}
.con1_p2 a:hover {
cursor: pointer;
color: #1aa1d5;
}
.con1_s1 {
display: inline-block;
width: 205px;
height: 40px;
background-image: url(jingling2.png);
background-repeat: no-repeat;
background-position: -17px -43px;
position: relative;
left: 283px;
}
.con1_s2 {
display: inline-block;
width: 230px;
height: 40px;
background-image: url(jingling2.png);
background-repeat: no-repeat;
background-position: 5px -85px;
position: relative;
left: 275px;
}
.con1_s3 {
display: inline-block;
width: 34px;
height: 40px;
background-image: url(shiling.png);
background-repeat: no-repeat;
/* background-position: 6px -127px; */
position: relative;
left: 1000px;
}
.con1_s4 {
display: inline-block;
width: 108px;
height: 40px;
background-image: url(jingling2.png);
background-repeat: no-repeat;
background-position: 6px -127px;
position: relative;
left: 640px;
top: 4px;
}
.youk1 {
width: 320px;
height: 80px;
}
#youk1_h {
background-color: #292f34;
color: #c4b998;
font-size: 14px;
height: 30px;
line-height: 30px;
font-weight: 400;
border: 1px solid #e9c06c;
border-radius: 7px;
width: 300px;
text-align: center;
margin-left: 0;
margin-left: 10px;
}
#youk1_h1 {
color: #c4b998;
font-size: 12px;
width: 265px;
font-weight: 400;
margin-left: 30px;
margin-top: 5px;
}
#youk1_h1:hover {
color: #827d73;
cursor: pointer;
}
.youk2 {
width: 320px;
height: 80px;
}
.youk3 {
width: 320px;
height: 80px;
}
.con1_s5 {
display: inline-block;
color: #464646;
font-size: 11px;
text-decoration: none;
position: relative;
left: 550px;
top: -10px;
}
.con1_s5:hover {
cursor: pointer;
color: #1aa1d5;
}
.con2 {
width: 1920px;
height: 2000px;
background-image: url('bg.webp');
background-repeat: no-repeat;
background-position: -180px 0;
}
.cebian {
z-index: 999;
display: block;
width: 53px;
height: 180px;
position: fixed;
right: 0px;
top: 400px;
}
.con2_s1 {
position: relative;
top: -175px;
left: 150px;
display: inline-block;
width: 283px;
height: 106px;
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -46px -0px;
}
.con2_s2 {
position: relative;
top: -285px;
left: 1045px;
display: inline-block;
width: 40px;
height: 40px;
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -55px -106px;
}
.con2_s3 {
position: relative;
top: -12px;
left: -35px;
display: inline-block;
width: 28px;
height: 28px;
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -678px -113px;
}
.con2_s4 {
position: absolute;
left: 1190px;
top: 140px;
z-index: 5;
width: 320px;
height: 275px;
font-family: "微软雅黑";
color: #a19891;
font-size: 16px;
border-left: 1px solid #e9c06c;
border-right: 1px solid #e9c06c;
border-bottom: 1px solid #e9c06c;
border-radius: 8px;
/* background-color: red; */
background-color: #000000;
}
.con2_s4 img {
width: 315px;
position: relative;
top: -16px;
left: 2px;
}
.con2_in1 {
border: none;
border-bottom: 1px solid #e9c06c;
color: #818069;
width: 840px;
height: 48px;
background-color: transparent;
position: relative;
top: -20px;
left: -90px;
padding-left: 70px;
}
.con2_div1 {
width: 320px;
height: 361px;
border: 3px solid #3a362b;
position: relative;
top: 504px;
left: -1092px;
display: inline-block;
}
.con2_div1_s1 {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
width: 53px;
height: 52px;
background-image: url(guang1.png);
background-repeat: no-repeat;
}
.con2_div1_s2 {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
width: 53px;
height: 52px;
background-image: url(guang2.png);
background-repeat: no-repeat;
}
.con2_div1_s3 {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
width: 53px;
height: 52px;
background-image: url(guang3.png);
background-repeat: no-repeat;
}
.con2_div2 {
width: 320px;
height: 361px;
border: 3px solid #3a362b;
position: relative;
top: 129px;
left: 613px;
display: inline-block;
}
.con2_div3 {
display: inline-block;
width: 320px;
height: 361px;
border: 3px solid #3a362b;
position: relative;
top: 129px;
left: 698px;
}
.con2 h2 {
text-align: left;
font-size: 16px;
/* margin-bottom: 5px; */
height: 35px;
padding-top: 5px;
font-weight: bold;
color: #7f7d7b;
display: inline-block;
margin-left: 30px;
/* padding-left: 30px; */
/* position: absolute; */
/* left: 50px; */
}
.con2 p {
color: #7f7d7b;
line-height: 32px;
width: 270px;
font-size: 14px;
text-align: left;
height: 90px;
margin-bottom: 11px;
margin-left: 30px;
}
.con2_div4 {
width: 50px;
height: 70px;
display: inline-block;
position: relative;
top: 210px;
left: 100px;
/* background-color: red; */
}
.con2_div4_s1 {
display: block;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #d2b46f;
margin-bottom: 20px;
}
#con2_div4_p1 {
color: #d2b46f;
font-size: 30px;
font-weight: 500;
position: relative;
left: 550px;
top: 280px;
width: 700px;
}
.con2_div5 {
width: 1240px;
height: 840px;
/* background-color: blue; */
position: relative;
top: 270px;
left: 208px;
}
.con2_div5 li {
list-style: none;
width: 372px;
height: 218px;
display: inline-block;
/* background-color: red; */
margin-right: 30px;
margin-bottom: 20px;
float: left;
background-color: #1c2227;
border: 1px solid #292f34;
}
.con2_div5 li:hover {
background-color: #030506;
cursor: pointer;
}
.div5_s1 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -1px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.con2_div5 p {
font-size: 18px;
color: #8e8b83;
text-align: center;
line-height: 120px;
}
.div5_s2 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -834px -536px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s3 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -305px -364px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s4 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -382px -364px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s5 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -152px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s6 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -228px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s7 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -76px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s8 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -530px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
.div5_s9 {
background-image: url(jingling.png);
background-repeat: no-repeat;
background-position: -458px -363px;
width: 75px;
height: 76px;
display: inline-block;
position: relative;
left: 130px;
top: 30px;
}
html {
overflow-x: hidden;
}
三、 完整版源码+图片素材
链接:https://pan.baidu/s/1LC-qW2wTvBtYzRFVnEz1qQ?pwd=ojbk
提取码:ojbk
欢迎指教!!!
版权声明:本文标题:英雄联盟页面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728794136a1174006.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论