<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>(1)</title>
<style>
div{
width: 1200px;
height: 50px;
border-width: 1px;
margin: auto;
border-color: black;
border-style: solid;
text-align: center;
line-height: 2.5;
background-color: black;
box-shadow: 10px 10px 10px gray;
border-radius: 15px;
}
span:hover{
background-color: brown;
}
span{
color: white;
display: inline-block;
height: 40px;
width: 50px;
text-shadow: 10px 10px 10px gray;
}
[class="2"]{
background-color: brown;
}
</style>
</head>
<body>
<div>
<span><b>游戏1</b></span>
<span class="2"><b>游戏2</b></span>
<span><b>游戏3</b></span>
<span><b>游戏4</b></span>
<span><b>游戏5</b></span>
<span><b>游戏6</b></span>
<span><b>游戏7</b></span>
<span><b>游戏8</b></span>
<span><b>游戏9</b></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>(2)</title>
<style>
[class]{
position: relative;
left: 100px;
}
.text{
position: relative;
left: 240px;
}
[id]{
color: gray;
}
.A{
display: inline-block;
}
</style>
</head>
<body>
<table border="0px" width="1000px" height="420px" >
<tr>
<td height="60px" ><img src="img11.jpg" alt="" height="150px" width="150px" ></td>
<td class="A" colspan="4" > <img src="https://www.seoliye.com/uploads/allimg/20220523/1-2205231H202G4.jpg" height="150px" width="850px"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr >
<td width="500px" height="300px"><img src="https://imgheybox.max-c.com/web/2022/04/17/f05c511beda6400c43266d7f183a33a0.jpeg?imageMogr2/thumbnail/!80p/format/jpg" alt="" width="600px" height="300px"></td>
<td style="background-image: url(); text-align:center;" bgcolor="gray" colspan="4">
<big><big>用户登入</big></big><br>
<form action="" method="post">
<p>用户名: <input type="text" ></p>
<p>密码: <input type="password" name="password" id="password" value="" required></p>
<p>
<button type="submit" style="background-image: url(./img1.png); background-size: contain; width: 40px; height: 40px;" class="submit"></button>
<button type="submit" style="background-image: url(./img3.png); background-size: contain; width: 40px; height: 40px;" class="submit"></button>
<!--
background-size: contain;
按图片自身比例适应
-->
</form>
</p>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魈网页</title>
<style>
.T{
background-color:rgb(30, 219, 175);
color: white;
width: 1700px;
height: 230px;
}
li{
display:inline-block;
}
</style>
</head>
<body>
<div class="top">
<div class="top01" align="center"><img src="top01.jpg" width="450px" height="400px"></div>
</div>
<div class="T">
<ul class="ullist">
<li class="libt"><a href="#">首页</a></li>
<li class="libt"><a href="#">养成攻略</a>
<ul class="droplist">
<li><a href="#pd">队伍搭配</a></li>
<li><a href="#tf">天赋/武器</a></li>
</ul>
</li>
<li class="libt"><a>基础资料</a></li>
<li class="libt"><a href="./角色剧情PV.html">角色剧情PV</a></li>
<li class="libt"><a href="https://www.miyoushe.com/ys/" target="_blank" class="no1">官方</a></li>
<li class="libt"><a href="./登录页面.html">登陆/注册</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner_pic" id="banner_pic">
<div class="current"><img src="zt1.jpg" width="1700px" height="400px">
</div>
</div>
<div class="dhz">
<div class="center">
<div class="shux"><a href="#"><p>属性</p></a></div>
<div class="zhutu1"><img src="./zhutu1.png">
</div>
</div>
<div class="center1">
<div class="cv"><a href="#"><p>角色cv</p></a></div>
<ul class="peiy">
<li><a href="#"><p><b>中文配音</b> kinsen</p></a></li>
<li><a href="#"><p><b>日文配音</b> 松冈祯丞</p></a></li>
<li><a href="#"><p><b>韩国配音</b> 沈揆赫</p></a></li>
<li><a href="#"><p><b>英国配音</b> Laila Berzins</p></a></li>
</ul>
</div>
<div class="xq">
<div class="xq1"><a href="#"><p>角色详情</p></a></div>
<div class="xq2">
<p>外表虽是少年人,魈的真实年纪却已超过两千岁。
好在没有人单看外表就轻慢他,只要打过照面,任谁
都能明白,他是个狠角色。
——危险、寡言。眼神锐利如刀。
在仙人之间,魈的辈分与声望堪称翘楚,但在人间,
他的名望并不高。
因为他既非招揽富贵、庇佑世人安康的福星;也非手
握仙道,高居在绝云间的圣众。
能见到魈施展神通的人,必定是九死一生、身处险境
之人。
并非魈要加害于人。而是他始终在与足以吞没璃月万家灯火的黑暗战斗。普通人若是目击到战斗现场,难免会被殃及。
当然,这并不是什么需要灭口的秘密啦。</p>
</div>
</div>
</div>
<div class="zhuyetu" id="tf" ><img src="zhuyetu.png" width="1600px" height="2200px"></div>
<div class="t"><p><img src="./img44.png" alt="center" width="50px" height="50px"></p></div>
<div class="t1"><p>top</p></div>
<div class="fh">
<div class="fh1"><a href="#"><img src="fh.png"></a></div>
</div>
<div class="wei">
<div class="wei1">
<p id="pd">版权所有:米哈游科技有限公司</p>
<p>资料来源:米游社和百度百科</p>
<p>公司电话:021-60331122</p>
<p>地址:上海市徐汇区钦州路100号一号楼1104-6室</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>官方PV</title>
</head>
<body>
<h1 align="center">《原神》剧情PV</h1>
<div class="box">
<video src="ship.mp4" autoplay controls loop></video>
</div>
<table width="600px" height="400px">
<tr>
<td><img src="sp1.jpg" width="500px" height="450px" alt=""></td>
<td><img src="sp2.jpg" width="500px" height="450px" alt=""></td>
</tr>
<tr>
<td>业障缠身的少年仙人...</td>
<td>火夜叉,岩夜叉,水夜叉对魈说...</td>
</tr>
<tr>
<td><img src="sp3.jpg" width="500px" height="450px" alt=""></td>
<td><img src="sp4.jpg" width="500px" height="450px" alt=""></td>
</tr>
<td>在回忆中思念自己的哥哥姐姐们...</td>
<td>最为强大的五位【仙众夜叉】</td>
</tr>
</table>
</body>
</html>