2020web - kux666/2020the-end-of-term-webdesign GitHub Wiki
Welcome to the 2020the-end-of-term-webdesign wiki!
<title>暗黑破坏神</title> <style type="text/css"> * { margin: 0; padding: 0; } body{ font-family: "ms outlook"; } main {
width: 1920px;
font-family: "microsoft yahei";
font-size: 20px;
height: 2200px;
/* background: grey; */
background: url(10.jfif);
}
/* 第一部分 */ #timu { background: black; width: 1920px; height: 40px; color: gainsboro; }
li:hover {
color: white;
cursor: pointer;
}
ul li {
display: inline-block;
}
ul {
letter-spacing: 20px;
}
li {
letter-spacing: 0;
}
#biao {
position: absolute;
right: 0;
top: 5px;
}
#biao2 {
position: absolute;
left: 100px;
top: 5px;
}
/* 第二部分 */ #erw { width: 1920px; height: 660px; background-color: aqua; }
.aa,
.bb {
position: absolute;
}
.aa {
z-index: 1;
}
.bb {
z-index: 2;
display: inline-block;
}
#anhei {
left: 150px;
}
/* #anhei:hover{box-shadow: 0 0 20px #fbf4f5;
} */
#anhei2 {
left: 700px;
top: 660px;
}
/* 第三部分 */ #sanw { width: 1920px; height: 80px; background-color: black; color: lightgray; }
.wenli1 {
width: 1920px;
height: 10px;
background: url(5.jpg);
}
.wenli2 {
display: inline-block;
}
#wnli22 {
float: right;
}
#bage,
.cc {
display: inline-block;
}
#bage {
font-size: 25px;
/* letter-spacing: 8px; */
float: right;
}
.cc {
text-align: center;
/* div内文字水平居中 */
line-height: 70px;
/* div内文字垂直居中 */
height: 70px;
width: 180px;
background-color: aliceblue;
background: url(986.png);
}
.cc:hover {
color: white;
cursor: pointer;
box-shadow: 0px 5px 30px -10px gray;
transition: 0.3s;
transform: translateY(1px);
}
/* 第四部分 */ #siw { width: 1200px; height: 1300px; background: black; margin: auto; border-style: solid; border-color: dimgray; border-width: 5px; }
#situ {
width: 1200px;
height: 1300px;
z-index: 1;
background-image: url(9.jpg);
background-repeat: no-repeat;
background-size: cover;
box-shadow: 5px 4px 30px 20px black;
}
#zizi {
color: paleturquoise;
padding-top: 50px;
padding-left: 50px;
}
#zizi p1:hover {
color: #FFFFFF;
cursor: pointer;
}
#shitu1 {
padding-top: 50px;
padding-left: 90px;
}
#shitu2 {
width: 1200px;
height: 500px;
background-image: url(8.jpg);
background-repeat: no-repeat;
background-size: cover;
box-shadow: 5px 4px 40px 15px black;
}
.shipin {
display: inline-block;
padding: 50px;
padding-top: 80;
}
#shipin2 {
float: right;
}
.shizi {
display: inline-block;
font-size: 30px;
color: darkgray;
cursor: pointer;
}
#shizi2 {
float: right;
padding-right: 200px;
cursor: pointer;
}
#shizi1 {
padding-left: 200px;
}
#shizi1:hover {
color: white
}
#shizi2:hover {
color: white
}
/* 第4部分2 / #wutu { width: 1200px; height: 220px; / background-color: #00FFFF; */ }
.xiao {
display: inline-block;
}
#xiao1 {
padding-left: 100px;
padding-top: 150px;
}
#xiao2 {
float: right;
padding-top: 150px;
padding-right: 400px;
}
#liutu{
width: 1200px;
height: 600px;
/* background-color: beige; */
}
#box1{
width: 1200px;
height: 10px;
/* background-color: blue; */
display: inline-block;
}
#box2{
width: 580px;
height: 500px;
/* background-color: blue; */
display: inline-block;
cursor: pointer;
}
#box2 img:hover{
cursor: pointer;
transform: scale(1.1);
transition: 0.5s;
}
#box3 img:hover{
cursor: pointer;
transform: scale(1.1);
transition: 0.5s;
}
#box3{
width: 580px;
height: 500px;
/* background-color: blue; */
display: inline-block;
float: right;
cursor: pointer;
}
#head{
height: 1200px;
width: 1920px;
/* background-color: greenyellow; */
background: url(23.jfif);
}
.henggang{
background-color: black;
}
#dibu{
width: 1200px;
height: 1200px;
background-color: rgba(184,168,123,0.6);
/* background-color: rgba(224,169,112,0.8); */
margin: auto;
}
#weibu{
width: 1920px;
height: 387px;
background: url(24.jpg);
}
h1{
padding-top: 40px;
padding-left: 40px;
}
div p{
padding-top: 40px;
padding-left: 40px;
}#wenzi11{
font-size: 24px;
padding-top: 40px;
padding-left: 40px;
}
div u{
color: #00FFFF;
}
#weibuzi{
color: rgb(184,168,123);
text-align: center;
padding-top: 100px;
}
#liu666666{
color: red;
text-align: center;
}
#logo img:hover{
cursor: pointer;
transform: scale(1.05);
transition: 1s;
</style>
</head>
<body>
<main>
<div id="timu"><!-- 第一部分 -->
<div id="baoxue">
<img src="1.png" width="80px" height="40px">
</div>
<nav id="biao">
<ul>
<li>支持</li>
<li>你的通行证</li>
</ul>
</nav>
<nav id="biao2">
<ul>
<li>游戏</li>
<li>商城</li>
<li>新闻</li>
<li>电子竞技</li>
<li>暴雪嘉年华</li>
</ul>
</nav>
</div>
<div id="erw"><!-- 第二部分 -->
<div class="aa">
<img src="2.jpg" width="1920px" height="660px">
</div>
<div class="bb" id="anhei">
<img src="3.png">
</div>
<div class="bb" id="anhei2">
<img src="4.png">
</div>
</div>
<div id="sanw"><!-- 第三部分 -->
<div class="wenli1">
</div>
<div class="wenli2" id="wnli11">
<img src="wenli11.png" width="200px" height="70px">
</div>
<div class="wenli2" id="wnli22">
<img src="wenli22.png" width="200px" height="70px">
</div>
<div id="bage">
<div class="cc">
首页
</div>
<div class="cc">
新闻
</div>
<div class="cc">
游戏
</div>
<div class="cc">
天梯
</div>
<div class="cc">
视频
</div>
<div class="cc">
下载
</div>
<div class="cc">
论坛
</div>
<div class="cc">
购买
</div>
</div>
</div>
<div id="siw"><!-- 第四部分 -->
<div id="situ">
<div id="zizi">
<p1>暗黑破环神Ⅲ></p1>
<p2>视频图片</p2>
</div>
<div id="shitu1">
<img src="7.png">
</div>
<div id="shitu2">
<div class="shipin" id="shipin1">
<video controls autoplay muted width="500" height="300">
<source src="111.mp4" type="video/mp4">
</video>
</div>
<div class="shipin" id="shipin2">
<video controls autoplay muted width="500" height="300">
<source src="222.mp4" type="video/mp4" </video> </div> <div class="shizi" id="shizi1">
游戏动画
</div>
<div class="shizi" id="shizi2">
国服纪念视频
</div>
</div>
<div id="wutu">
<div class="xiao" id="xiao1">
<img src="11.png">
</div>
<div class="xiao" id="xiao2">
<img src="12.png">
</div>
</div>
<div id="liutu">
<div id="box1">
</div>
<div id="box2">
<img src="771.jpg" width="150" height="100px">
<img src="772.jpg" width="150" height="100px">
<img src="773.jpg" width="150" height="100px">
<img src="774.jpg" width="150" height="100px">
<img src="781.jpg" width="150" height="100px">
<img src="782.jpg" width="150" height="100px">
<img src="783.jpg" width="150" height="100px">
<img src="784.jpg" width="150" height="100px">
<img src="785.jpg" width="150" height="100px">
</div>
<div id="box3">
<img src="775.jpg" width="150" height="100px">
<img src="776.jpg" width="150" height="100px">
<img src="777.jpg" width="150" height="100px">
<img src="778.jfif" width="150" height="100px">
<img src="786.jpg" width="150" height="100px">
<img src="787.jpg" width="150" height="100px">
<img src="788.jpg" width="150" height="100px">
<img src="789.jpg" width="150" height="100px">
<img src="790.jpg" width="150" height="100px">
</div>
</div>
</div>
</div>
</div>
</main>
<div class="henggang"><!-- 横杠 -->
<img src="21.png" width="1980px"height="20px">
</div>
<div id="head"><!-- 低部 -->
<div id="dibu"> <!-- 底部文字 -->
<h1>[公告] 暗黑破坏神IV 宣布！震撼CG！拜命三归！ </h1>
<div >
<p>发表于 2019-11-2 02:35:05 |只看该作者 |倒序浏览</p>
<h3>.............................................................................................................................................................................................................................</h3>
</div>
<div id="wenzi11">
<p>今天在暴雪嘉年华2019的直播节目上，暴雪正式公开了《暗黑破坏神4》的消息，并且放出了游戏宣传动画和预告视频。游戏目前已经公布了三个职业：野蛮人、法师、德鲁伊。游戏有玩家交易和PVP要素，将会登陆PC、PS4、Xbox One</p><br>
<l>游戏公布动画：</l><br>
<u>http://cc.163.com/v/5dbc79516a37ca5a1a5fb3ee/</u><br><br>
<l>游戏预告视频：</l><br>
<u>http://cc.163.com/v/5dbc7f3d4dd6e79f140c74de/</u><br><br>
<l>LOGO：</l>
<div id="logo">
<img src="556.jpg" >
</div>
<h4>《暗黑破坏神IV》特色亮点</h4>
<l>《暗黑破坏神IV》是暴雪娱乐定义动作角色扮演游戏系列的最新作品。玩家将体验到一段可怕的全新故事剧情，与此同时也可以自由地开辟自己的道路，尽情领略有史以来最为广阔的庇护之地——一个没有希望、被恶魔包围、荒凉而又破碎的地狱般的世界。</l>
</div>
</div>
<div class="henggang"><!-- 横杠 -->
<img src="21.png" width="1980px"height="20px">
</div>
<div class="henggang"><!-- 横杠 -->
<img src="21.png" width="1980px"height="20px">
</div>
<div id="weibuzi">
<l>意见反馈</l><br>
<l>About NetEase - 公司简介 - 联系方法 - 招聘信息 - 客户服务 - 网易集团隐私政策及儿童个人信息保护规则 - 网络营销 - 网站地图</l><br>
<l>网易公司版权所有 ICP备案：粤B2-20090191</l><br>
</div>
<div id="liu666666">
<l>©1997-2019</l >
</div>
</div>
</div>
</body>