HTML+CSS制作人物介绍网页

Kyra17

已于 2023-05-22 18:32:23 修改

阅读量7.9k

点赞数 24

文章标签： html5 css

于 2023-05-22 18:32:15 首次发布

本文链接：https://blog.csdn.net/Kyra17/article/details/130810496

版权

仅作个人学习记录用

网页效果

视频演示

代码实现

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>
                                    <td rowspan="2"><img src="./images/卡维评海.jpg" ></td>
                                    <td id="othersName">卡维<span id="othersTitle">「妙论派之光」</span></td>
                                </tr>                                    
                                <tr height="50px"><td id="othersQuote">“他当然非常聪明，我从不否认这一点。一个如此有才能的人仅仅着眼于真理本身而不将注意力投给更多更广的人群，实在令人惋惜。或许又是出于某些匪夷所思的个人主义吧，这带来了不少问题，比如首先他就不怎么尊重前辈…我不是特指自己。”</td></tr>
                            </table>
                        </div>
                        
                        <div class="others">
                            <table height="100px">
                                <tr>
                                    <td rowspan="2"><img src="./images/提评海.jpg" ></td>
                                    <td id="othersName">提纳里<span id="othersTitle">「道成林大巡林官」</span></td>
                                </tr>                                    
                                <tr height="50px"><td id="othersQuote">“小心艾尔海森。啊，倒不是说他是什么坏蛋啦，但他做事始终被理性主导，总会有让常人觉得无法接受的地方。不信的话可以去看看他的室友，经常被他气得比风史莱姆还鼓。”</td></tr>
                            </table>
                        </div>
                        <div class="others">
                            <table height="100px">
                                <tr>
                                    <td rowspan="2"><img src="./images/赛评海.jpg" ></td>
                                    <td id="othersName">赛诺<span id="othersTitle">「大风纪官」</span></td>
                                </tr>                                    
                                <tr height="50px"><td id="othersQuote">“我不太喜欢过于聪明的人，他们总是自认为能掌控一切，从而经常在危险的边缘游走。不过艾尔海森还算稳定，在绝大部分场合，他确实有掌控局面、化险为夷的能力。”</td></tr>
                            </table>
                        </div>
                        <br><br><br>
                    </div>
                <!--角色故事部分-->
                <div id="story">
                    <div class="story">
                        <div class="storyContent">
                            <h1 id="storyTitle">·角色故事一</h1>
                            <p>大部分普通教令院学生印象里，“书记官”是个听上去非常厉害的头衔，事实却并非如此，该职位能有一个响亮的名号纯粹是拜院内起官名好面子之风所赐。</p>
                            <p>事实上，书记官既不跟随所有重大会议，也不参与核心事务决策，只负责归档备份重要资料。然而，在纸质书及书面文件一度受到管控的须弥，书记官反而是整个教令院知道最多事情的职能之一，与大掌书定位较为相近——人们从不否认大掌书身为管理图书之人最有机会接触记录了顶级智慧的书籍。作为现任须弥教令院书记官，艾尔海森与他的职务完美匹配，他不参加任何非必要会议，即使被通知到场也只记录必要事项，其他内容记录与否全凭心情。假如会议与他利益不相关或引不起他的兴趣，他就懒得提出意见。平时遇到有人提出愚蠢的观点，他会选择性做出一些过于一针见血的评价。
                            <p>艾尔海森的处事原则便是如此，需要我来判断，意味着允许一切我所用于该判断的手段和权利。用他自己的话说，幸好我是个懒得拥有太多野心的人。</p>
                            <p>学者都追求知识与真理，有人为名利，有人为理想，也有人是为了征服它、将它抛在脑后并享受过程带来的优越感。艾尔海森不属于上述任何一种，他做事求学全凭兴趣。在他看来，许多学者都已在寻求之路上迷失了自我，误将真理当成自我实现的工具乃至捷径。
                            <p>然而无论人寻求与否，真理总如光辉的天体一般高悬在那里。它不是旅途的尾声或赛程的终点，无论人存在与否，真理都不动摇。</p>
                            <p>此外，人的征途绝不会在得到某一知识后轻易告结，即便人们认为自己能够享受收获之喜也早就做好为之牺牲一切的准备，求知欲仍会鞭笞他们。</p>
                            <p>对看不透真相的人来说，这条路永无止境。而清醒的人会说，真理诞生不是为了服务于谁，控制不了求知欲的人终有一日被知识毁灭，这正是学国的规则。当然，如果你想融入学国，大可以装成这个样子。</p>
                            </br>
                        </div>
                        <div class="storyContent">
                            <h1 id="storyTitle">·角色故事二</h1>
                            <p>须弥人将参与拯救小吉祥草王的一众人士称作英雄。这些传颂者中相当一部分不知道事件全貌，仅仅听说了一小段便将它视作美好故事挂在嘴边。身为参与者之一，艾尔海森本人对英雄一词没有过多感想。他不觉得那是该被挂在嘴边的事。</p>
                            <p>此外，教令院方面曾多次邀请艾尔海森出任大贤者，均遭到拒绝。但时局正乱，艾尔海森最终同意暂时担任代理贤者。拒绝成为贤者和大贤者已经很不可思议，人们更难相信一个已经出任代理贤者的人居然没有顺势占据这个位置，而是如期辞职，回去当他那个不怎么重要的书记官。</p>
                            <p>要说有什么收获，第一是在经济方面。艾尔海森虽然做回书记官职务，却享受着贤者的津贴待遇，加上手里有数个自主完成的优质研究课题，生活质量不成问题。第二则是在人际方面，经历了这一战，艾尔海森与其他计划参与者能算是战友，出门偶尔遇到彼此也会点点头，算作招呼。</p>
                            <p>同在教令院，小吉祥草王有时会请艾尔海森到净善宫见面讨论各项事宜。他在那里碰到过不少人，大风纪官赛诺、佣兵迪希雅、祖拜尔剧场明星演员妮露……甚至有一次妮露问他：“艾尔海森先生是怎么想出那么厉害的计划呢？要知道我后来想起，还是觉得幸好你我都没有受什么伤……”</p>
                            <p>说到这里，妮露迟疑了一会儿。艾尔海森理解她的疑问，换作谁来都会惊讶他是如何从神明罐装知识之类的陷阱中顺利脱身，但在艾尔海森看来，他从没有真正陷入危险，因为他根本就没有使用那些东西。</p>
                            <p>要问艾尔海森是怎么做到这一点，就得感谢书记官一职带来的职务之便了。作为一个有幸看过虚空系统相关说明的学者，他确实研究了虚空头戴组件和罐装知识，知道如何改变虚空的显示状态，还想到反转虚空终端自带的投影屏障，使其出现在后脑部位抵挡可能出现的袭击。</p>
                            <p>事实证明，计划是一切的基础，而前期研究是计划的基础。艾尔海森自然不会张扬他毫发无伤的事，只是反问妮露：“据我所知，赛诺和迪希雅也好奇这个问题，但只有你提起了。他们就那么不好意思向我发问吗？”</p>
                            </br>
                        </div>
                        <div class="storyContent">
                            <h1 id="storyTitle">·角色故事三</h1>
                            <p>艾尔海森从不与人轻易探讨个性或性格。他认为主流推崇的观点有误，假使一个人坚称人的个性与能力及思想无关，他便无法界定被评判之人的任何事物。</p>
                            <p>聪明者面对愚蠢者与另一聪明者的态度通常不同，愚昧者在成功与失败时所想亦有不同。他人对艾尔海森的评价也恰好验证了该理论——因其优秀的才能与自我的个性，人们往往不愿离他太近，只将他视为一个客观优秀的人才。</p>
                            <p>这正是艾尔海森想要的定位。学者中不乏死脑筋的读书人，而他不是。事实上，言辞时而尖锐也是艾尔海森思想的一部分体现。</p>
                            <p>社会（或称集体）往往以规则束缚个体，言语正是其枝丫之一，反向操纵词句是对不合理规则的反击，凭借这点，人们就能远离麻烦。天才一词早已在教令院泛滥，甚至奇才、鬼才……生活在须弥，才能本就是一种试炼。</p>
                            <p>过于拔群的能力未必该被视作完美的礼物，它会将人们潜在分离开。普通人总在窥见自身无法想象的辉煌成就时脱口而出一些溢美之词，天才、超人、与众不同……只需要好好想一想，就能读懂连说话者自己也没察觉到的深意：天才本质是与常人不同的群体。</p>
                            <p>一个人能做到他人做不到的事，那他一定有特别的能力和身份。对优秀者的过分吹捧及想象，究其根源不过是种异化。与我不同者可成大器，这是庸俗之人常用的借口。</p>
                            <p>这种种愚昧规则对艾尔海森来说没有意义，哪怕他懂得如何为人处世，也不愿将精力分散到无谓之事上。“规则”是边界，亦是束缚。受约束者的数量不该是衡量规则优劣的唯一准则，由此，他得出了他的规则。</p>
                            <p>它是他看待万物、与世界抗衡的力量，是他一切思想的最终体现。为了维护独属于自己的规则，艾尔海森将依循自身意志行动，处理掉在他看来有害的事物。</p>
                            <p>唯有客观者才能看到真实。认清个体各不相同，看到能力与心智的差距。答案就在眼前：来自他人的区分不过是点缀，将评价权交到他人手里是对自身的否定。</p>
                            <p>与众不同不应是出自他人的一个标签，天才们早该明白特别也是一种财富。又或者，可以这样说，当一个天才发自内心彻底明白他确实与众不同，是彻头彻尾的天才，他才真正意识到才能的价值。至于那些畏首畏尾，仍在被主流观点麻痹的人，他们尚未完全找到自己。</p>
                            </br>
                        </div>
                        <div class="storyContent">
                            <h1 id="storyTitle">·角色故事四</h1>
                            <p>能力、悠闲的工作，以及一处离办公室近又极度宜居的房产。上述几点，艾尔海森早就达到。任何时候他都不会否认，他适合生活在学术能力与社会资源挂钩的学者之国。</p>
                            <p>艾尔海森如今的住处位于教令院附近，是靠优质课题得来的学术资源之一。说到这套房子，难免要提及他学生时代曾参与过的课题。</p>
                            <p>同届学生若还记得艾尔海森，应该知道他不是喜欢参加集体活动的人。至于他唯一一次与他人合作研究，哪怕课题无比成功，结局也是大吵一架分道扬镳。</p>
                            <p>人们未必清楚艾尔海森是这个故事的主角之一，却可能认识与他闹翻拆伙的那个合作者：妙论派建筑设计师卡维。这起学术事件流传并不广，说到底，在教令院这种地方，两位天才因性格观念不合无法继续维持合作可不是什么稀罕事。</p>
                            <p>不过即使合作关系破裂，双方也不会否认彼此有着难得一见的聪明头脑。至于当年被搁置的合作课题，后来也依照相关规定被归入研究发起人名下资产。</p>
                            <p>散伙后，双方都没再对该课题付出什么精力，但它前期是那样成功，为艾尔海森的学术能力做了强有力证明，以至于后来教令院评估分配房产资源时也将这忘记被取消的课题列为参考，给他和他的这项课题配备了一套相当不错的住宅。</p>
                            <p>而课题的另一成员卡维，起初根本没来找他商量过资源所属问题，日后才得知，卡维已托办事员转告院方及艾尔海森：自己已有住处，用不到该资产。</p>
                            <p>很久不联系，再见面时卡维已经破产。艾尔海森对这位从前的朋友评价是：拥有与能力不相称的观念和性格。</p>
                            <p>他们对太多事物的观点背道而驰，至今仍无法达成一致。</p>
                            <p>让卡维暂住家中成了一个相当有趣的议题：已知一个人拥有某资产的部分份额又已自愿放弃，从法律及社会角度来说，他来这里借住理应缴纳房租，但从学术角度来说，付租金一事或多或少是否认了他在研究中的所有努力，并不符合学术精神。</p>
                            <p>思考这件事很有趣，不过艾尔海森不关心答案。他收留破产的前课题合作者，理所当然地收取租金，还将一些日常琐事抛给对方处理。</p>
                            <p>他当然知道卡维会对此有怨言，那也没什么。在艾尔海森看来，与一个同样没什么家人、相互知根知底又和自身截然相反的学者接触，等同于看见镜子的另一面。</p>
                            <p>人的视觉从不是完美完整的，但通过另一个天才，就有可能达到。以此为切入点，他将观察到世界的其他面，继而理解更多原本无法看透的事物。</p>
                            </br>
                        </div>
                        <div class="storyContent">
                            <h1 id="storyTitle">·角色故事五</h1>
                            <p>学者之国须弥视学术及知识高于一切，换言之，能在须弥获得教令院一定认可的学者往往拥有更高的社会地位。艾尔海森便是出生于这样一个学者家庭，他父母很早就因意外逝世，他由妙论派出身的祖母抚养长大。</p>
                            <p>对于父母，艾尔海森印象不深，后来从祖母口中得知双亲都曾在教令院任职，父亲是知论派担任导师，母亲则是因论派的知名学者。</p>
                            <p>艾尔海森的优秀头脑来自于父母遗传。他从小就非常聪明，七八岁时看起了同龄人不愿意碰的深奥学术书刊。</p>
                            <p> 祖母察觉他资质过人，推荐他提早入学教令院，可艾尔海森只上了半天课就回家告诉祖母：这半天里他在教令院接触到的人都很无聊。</p>
                            <p> 比起听那些人讲一些毫无价值的课，他更喜欢独自看书。祖母从他身上看到与他父母相似的才华与性格，同意他在家自学。</p>
                            <p> 自学一词在艾尔海森生涯中的体现是：阅读、拆解、重组与怀疑。身为学者家庭的一员，他有幸接触纸质书，有趣的是，比起从虚空中获取信息，他更喜欢阅读祖母收藏的纸质书。</p>
                            <p> 相较于虚空系统，纸质书不灵活、古板，甚至连内容也不能保证绝对正确。使用这样的知识载体无异于同可能存在谬误的信息做斗争，大部分须弥人厌恶这样，艾尔海森却乐在其中。</p>
                            <p> 他从中得到学习、分析乃至纠正的能力，进而学会了怀疑。假如简陋而原始的阅读是一种麻烦，那它就是艾尔海森最为欣赏的麻烦。</p>
                            <p> 祖母告诉艾尔海森：你与你父亲一样喜欢看书，我不确定你们这样的人是否过于聪慧了。但特别从来都会成为财富，你必须记住。</p>
                            <p> 认可知识，追逐知识，相信知识，也永远不要忘了怀疑它。或许只有能做到这一点的人才能不被罐装知识之类快捷载体轻易打动，也只有符合这一条件的人才会连被封存在智慧宫深处的虚空说明书都随手拿来看。</p>
                            <p> 如祖母所说，书里存在无用的信息，甚至大量存在，可聪慧的头脑会为艾尔海森甄选，假如有一本书被他读过还能留在记忆中，它就可能在某天成为他的助力。</p>
                            <p> 祖母去世后，艾尔海森独自处理她的后事，继承了她留下的财产与家中那间小小的书库。临终前祖母真诚地祝福他：你是一个过分聪明的人，天才大都自我、特立独行。</p>
                            <p> 你优秀，拥有高于常人的视野，那不是坏事，你务必谨慎，要比常人更清醒，明白所有虚荣的追逐都是尘埃，用最大的智慧去分辨选择你的道路。</p>
                            <p> 艾尔海森向教令院递交的申请书很快就被批准，他以高分通过入学考试加入知论派。院方告诉艾尔海森，他祖母生前还为他申请过其他院课程的旁听资格，有空时可以四处听听课。艾尔海森遵循祖母的教导，始终保持极度自我、低调与清醒。</p>
                            <p> 数年过去，艾尔海森搬入新家。他将书库中的纸质书尽数带了过去。整理时，他又一次翻到几本早就看过的书，扉页写着祝语的人文书刊大都是母亲的收藏，夹着资料、页边写满批注的基本来自父亲。</p>
                            <p> 另外还有一本翡翠封皮的精装厚书，扉页留有祖母的笔迹：愿我的孩子艾尔海森过上平静的生活。</p>      
                            </br>
                        </div>
                        <div class="storyContent">                                  
                            <h1 id="storyTitle">·行动者腰包</h1>
                            <p>结实耐用的青绿色布面腰包。或许是因为这只腰包跟艾尔海森服装颜色太过接近，人们往往察觉不到那并不是一条宽腰带。</p>
                            <p>包里东西不多，有以下几件随身物品：钥匙、最近在看的书，以及一台与耳机配套的随身听。这只随身听是他刚当上书记官时亲手制作的，通过同色耳机线与配套耳机连接。它有时被用来播放音乐，有时仅做降噪隔音。</p>
                            </br>
                        </div>
                        <div class="storyContent">
                            <h1 id="storyTitle">·神之眼</h1>
                            <p>“语言的价值不可仅仅留存在字面。借由语言的一致性，人们统御思维。语言即是底线、规则、武器与暴力。通过令语言与众不同，我们终于能够另辟蹊径抵达思想上的相对完全。</p>
                            <p>而统御思想固然对一部分人来说没有意义，却对绝大部分人意义非凡。个体追求的差异决定了我们掌握不同语言并使用不同媒介。人在诸多时刻受语言控制。”</p>
                            <p>艾尔海森将印着这些话的纸张翻过去。书看到结尾了，再翻就是封底。他察觉到书本下压着一件发光的精巧装饰。他自然知道这是什么——证明力量的“神之眼”。但对他来说未必能有那么崇高的意义。</p>
                            <p>神迹降临在信仰者身上更显崇高，至于对他，不过是件有点用处的辅助品而已。得到神之眼那一刻，艾尔海森正在外出做课题的路上。</p>
                            <p>他不打算花太多时间打量他的神之眼。既然是属于他的东西，什么时候查看都一样。就像已学会的知识一样，到手的东西跑不了。</p>
                            </br>
                        </div>
                        </br></br></br>
                    </div>
                </div>
                <!--技能介绍部分-->
                <div id="skills">
                    <div class="skills">
                        <img src="./images/艾尔海森_沉思_透明背景.png" id="skills_img">
                        <div class="skills_right">
                            <div class="skillDes" style="margin-left: -120px;"!important;>
                                <table width="280px" height="50px" style="border: radius 5px; ;">
                                    <tr height="20px">
                                        <td rowspan="2"><img src="./images/菜叶.jpg" style="border-radius: 5px;"!important></td>
                                        <td id="skillsName" height=20px >武器·裁叶萃光</td>
                                    </tr>
                                    <tr>
                                        <td id="description" height=20px>「以珍贵的白枝制成的饰金之刃，曾经斩断无数浸染森林的黯毒。」</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="skillDes" style="margin:10px 0 0 -90px;"!important;>
                                <table width="280px" height="50px">
                                    <tr height="20px">
                                        <td rowspan="2"><img src="./images/艾尔海森A.jpg" ></td>
                                        <td id="skillsName" height=20px >普通攻击·溯因反绎法</td>
                                    </tr>
                                    <tr>
                                        <td id="description" height=20px>「普通攻击」进行至多五段的连续剑击。「重击」消耗一定体力，瞬间向前方挥出两剑。「下落攻击」从空中下坠冲击地面，攻击下落路径上的敌人，并在落地时造成范围伤害</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="skillDes" style="margin:10px 0 0 -50px;"!important;>
                                <table width="280px" height="50px">
                                    <tr height="20px">
                                        <td rowspan="2"><img src="./images/艾尔海森E.jpg"></td>
                                        <td id="skillsName" height=20px >共相·理式摹写</td>
                                    </tr>
                                    <tr>
                                        <td id="description" height=20px>「真理本就存在于不确定性当中，即便再伟大的学者也不能免于错谬。」</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="skillDes" style="margin:10px 0 0 -20px;"!important;>
                                <table width="280px" height="50px">
                                    <tr height="20px">
                                        <td rowspan="2"><img src="./images/艾尔海森Q.jpg"></td>
                                        <td id="skillsName" height=20px >殊境·显象缚结</td>
                                    </tr>
                                    <tr>
                                        <td id="description" height=20px>「学者如果将追求智慧作为自己的目标，那么他就必须与他所读到的每一个字为敌。这样才有可能免于偏见。」</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
          </div>
        </div>
    </body>
</html>

CSS部分

.container{
    display: grid;
    justify-content: center;
    width: 750px;
    height: 750px;
    margin: 20px 50px 20px 650px;
    box-shadow: 5px green;
    background-color: rgba(224, 234, 236, 0.253);
    border-radius: 50px;
 }
#pv{      
    height: 300px;
    margin-top: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
}
.main{
    width: 100%;
    height: 380px;
    margin-top: 0%;
}
/*导航栏部分*/
.nav table{
    width: 720px;
    height: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}
.nav td{
    width: 33%;
    text-align: center;
    background-color: rgba(3, 80, 54, 0.77);
    font-family: 宋体;
    font-weight: 200;
    border-radius: 5px;
} 
.nav td:hover{
    background-color: rgb(3, 42, 27);
}
.nav a{
    color: white;
    font-family: 宋体;
    font-weight: 200;
    text-decoration: none;
}
.content{
    margin-top: 5px;
    width: 720px; 
    height: 360px;
    overflow: hidden;
    border-radius: 20px;
    background-color: rgba(161, 174, 167, 0.642);

}
/*主页部分*/
/*做不出好看的主页 不想写了*/
.homepage{
    width: 720px;
    height: 360px;
    display: flex;
    flex-direction: row;
}
.organ{
    overflow: hidden;
    transition: .5s;
    margin: 20px;
    box-shadow: 10px 10px 20px grey;
    border-radius: 20px;
    border:1px solid rgb(235, 224, 224);
    width: 200px;
    background-color: aliceblue;
}
.organ img{
    width: 200%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}
.organ:hover{
    flex-basis: 100%;
}
.organ:hover img{
    width: 100%;
    height: 100%;
}
.text {
    height: 300px;
    width: 500px;
    margin: 30px 30px 30px 0;
    border-radius: 5px;
    background-color: rgba(78, 86, 82, 0.642);
    overflow-y: scroll;
}
#name0{
    font-size: 40px;
    font-weight: 900;
    color: rgb(20, 174, 135);
    text-align: left;
    font-family: 华文新魏;
    border-radius: 5px;
    margin-right: 5px;
}
#title{
    font-size: 12px;
    color: aliceblue;
    text-align: left;
    font-family: 仿宋;
    font-style: italic;
}
#text_main{
    font-size: 14px;
    margin: 0 20px 0 20px;
    border-radius: 5px;
    color: whitesmoke;
    text-indent:2em;
    font-family: 华文宋体;
}
/*角色简介部分*/
#intro{
height: 400px;
}
.titleNline{
 font-size: larger;
 font-weight: bold;
 font-family: 黑体;
 margin: 20px auto auto 20px;
 color:whitesmoke;
}
.box{
    width: 100%;
    height: 360px;
    overflow-y: scroll;
}
.intro{
    display:flex ;
    flex-direction: row;
    margin:10px 20px 10px 20px;
    background-image:url(./images/海_名片.jpg);
    background-repeat: no-repeat;
    background-color: rgba(143, 154, 164, 0.432);
    border-radius: 5px;
}
.intro_text{
    display: flex;
    flex-direction: column;
}
.intro_text table{
    margin:60px auto 0 20px ;
}
#name{
    font-size: 40px;
    font-weight: bolder;
    color: rgb(231, 239, 237);
    text-align: left;
    font-family: 宋体;
    margin: 60px auto 0 50px;
}
#major{
    font-size:  1px;;
    font-weight: 10;
    color: white;  
    font-style: italic;
}
#college{
    font-size:  1px;;
    font-weight: 10;
    color: white;
    margin-left: 10px;   
    font-style: italic;
}
#info{
    color:white;
    padding-left: 10px;
    width: 200px;
}
#info_right{
    text-align: right;
    color: aliceblue;
}
#info_img{
    height: 280px;
    border-radius: 5px;
    margin: 15px 20px 15px 20px;
}
.others{
    display: flex;
    flex-direction: row;
    margin:10px 20px 0 20px;
    background-color: rgba(143, 154, 164, 0.432);
    border-radius: 5px;
}
.others img{
    border-radius: 50%;
    width:100px;
    margin: 10px 10px 10px 10px;
}
#othersName{
    height: 20px;
    color: aliceblue;
    font-weight:200;
    font-family: 宋体;
    margin-left: 15px;
}
#othersTitle{
    height: 20px;
    color: rgb(39, 75, 108);
    font-weight:100;
    font-size: xx-small;
    font-style: italic;
    font-family: 宋体;
    margin-left: 5px;
}
#othersQuote{
    color: aliceblue;
    font-weight:200;
    font-family: 黑体;
    text-indent: 2em;
}
/*角色故事部分*/
#story{
    height: 400px;
}
.story{
margin-top: 10px;
height: 100%;
overflow-y: scroll;
}
.storyContent{
    display: grid;    
    justify-content: center;
    margin-top: 15px;
    margin-left: 20px;
    width: 670px;
    border-radius: 5px;
    background-color: rgba(78, 86, 82, 0.642);
}
#storyTitle{
    width:fit-content;
    margin-left: 10px;
    border-radius: 5px;
    color: aliceblue;
    font-size: large;
}
.storyContent p{
    font-size: small;
    margin: 0 20px 3px 20px;
    border-radius: 5px;
    color: aliceblue;
    text-indent:2em;
    }
.storyContent img
{
    width: 20px;
}
/*技能介绍部分*/
#skills{
    height: 400px;
    overflow-y:hidden;
}
.skills{
    display: flex;
    flex-direction: row;
}
.skills_right{
    display: flex;
    flex-direction: column;
    margin-top: 15 px;
    width: 400px;
}
#skills_img{
    margin: 10px 0 0 0;
    height: 400px;
}
.skillDes{
    margin-top: 10px ;
}
.skillDes img{
    margin: 0%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
#skillsName{
    height: 20px;
    color: aliceblue;
    font-weight:200;
    font-family: 黑体;
    background-color:rgba(4, 52, 4, 0.232);
    border-radius: 5px;
}
#description{
    color: rgb(212, 221, 230);
    font-size: xx-small;
    font-style: italic;
    background-color:rgba(4, 52, 4, 0.232);
    border-radius: 5px;
}