*仅作个人学习记录用*
网页效果
视频演示
代码实现
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="please.css">
</head>
<body background="./images/bg.jpg" style="background-repeat: no-repeat;background-size: 100%;overflow:hidden ;">
<div class="container">
<div>
<video id="pv" controls>
<source src="./video/艾尔海森_角色演示.mp4">
</video>
</div>
<div class="main">
<div class="nav">
<table>
<tr>
<td><a href="#intro">角色简介</a></td>
<td><a href="#story">角色故事</a></td>
<td><a href="#skills">技能介绍</a></td>
</tr>
</table>
</div>
<div class="content">
<!--首页部分-->
<div class="homepage">
<div class="organ">
<img src="./images/智慧的六面.jpg">
</div>
<div class="text">
<p style="margin:40px 20px 15px 20px;"><span id="name0">艾尔海森</span><span id="title">「诲韬诤言」「文弱的学术分子」</span></p>
<p id="text_main">米哈游出品的游戏《原神》及其衍生作品中的角色，须弥教令院六大学派之一“知论派”的学者，现任教令院书记官兼任代理贤者，有过人的智慧与才能，生活得自由自在，一般人基本找不到他。</p>
<p id="text_main">在须弥的风波结束，虚空系统关闭之后，教令院还有很多亟待解决的难题。而艾尔海森身为代理贤者，又是当前教令院中非常有智谋的角色，也将会面临新的考验。不过，不论发生什么，艾尔海森的头脑始终保持着冷静和清醒，能从更宏观的视角找到病灶，最高效率地去解决问题.</p>
</div>
</div>
<!--角色简介部分-->
<div id="intro">
<div class="box">
<div class="titleNline">
<img src="./images/耳机.png" width="20px">
基本信息
</div>
<div class="intro" >
<img src="./images/艾尔海森_证件照.jpg" id="info_img">
<div class="intro_text">
<table >
<tr><td id="name">艾尔海森</td></tr>
<tr height="50px" style="vertical-align: text-top;"><td><span id="major">「知论派」</span><span id="college">室罗婆耽学院</span></td></tr>
<tr>
<td id="info">所属</td>
<td id="info_right">须弥教令院</td>
</tr>
<tr>
<td id="info">生日</td>
<td id="info_right">2月11日</td>
</tr>
<tr>
<td id="info">神之眼</td>
<td id="info_right">草</td>
</tr>
<tr>
<td id="info">命之座</td>
<td id="info_right">天隼座</td>
</tr>
</table>
</div>
</div>
<div class="titleNline">
<img src="./images/耳机.png" width="20px">
他人评价
</div>
<div class="others">
<table height="100px">
<tr>
最低0.47元/天 解锁文章
扫一扫
6594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
