简单页面设计（作业）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>西宫硝子</title>
<style>
body{
margin: 0;
background-color: #eeeeee;
}
#auth{
height: 100%;
20%;
background-color: #4e4d4d;
position: fixed;
color: #a9a9a9;
float: left;
}
#photo {
border: #ffffee 5px solid;
200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin-left: 20%;
margin-top: 20px;
}
#photo img{
100%;
}
#auth_motto{
text-align: center;
}
#msg{
text-align: center;
padding-top: 50px;
font-size: 24px;
}
#main{
float: right;
height: 100%;
80%;
background-image: url("background.png");
}
.bar{
background-color: white;
box-shadow: 5px 10px 5px rgba(0,0,0,0.7);
97%;
height: 160px;
margin-top: 25px;
margin-left: 15px;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
.head{
font-weight: bolder;
font-size: 24px;
padding-top: 20px;
padding-left: 20px;
border-left: red 10px solid;
/* 50%;*/
float: left;
}
.data{
font-weight: bolder;
float: right;
padding-right: 20px;
padding-top: 20px;
}
.content{
font-weight: lighter;
padding-left: 20px;
padding-top: 25px;
}
.bar_tag{
padding-left: 20px;
}
a:link{color: #a9a9a9}
a:hover{color: #ffffff;font-weight: bolder}
a:visited{color: #a9a9a9}
a{text-decoration: none}
</style>
</head>
<body>
<div id="auth">
<div id="photo">
<img src="lp.png" alt="">
</div>
<div id="auth_motto">
<p style="font-size: 30px"><a href="https://baike.baidu.com/item/%E8%A5%BF%E5%AE%AB%E7%A1%9D%E5%AD%90/13477940?fr=aladdin">西宫硝子</a></p>
<p><a>以声之形,塑花之形,以你之名,刻于我心</a></p>
</div>
<div id="msg">
<p><a href="https://baike.baidu.com/item/%E8%A5%BF%E5%AE%AB%E7%A1%9D%E5%AD%90/13477940?fr=aladdin" target="_blank">关于人设</a></p>
<p><a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">相关作品</a></p>
<p><a href="https://www.bilibili.com/bangumi/play/ep118317">影视链接</a></p>
</div>
</div>
<div id="main">
<div class="bar">
<div class="title clearfix">
<div class="head">西宮硝子（にしみや しょうこ）</div>
<div class="data">2020年5月14日</div>
</div>
<div class="content">西宫硝子，日本漫画《声之形》及其衍生作品女主角，听力障碍的少女，因长期听觉障碍而难以发出声音，受到班上同学的孤立和欺负。</div>
<hr style="">
<div class="bar_tag">硝子出生时期就身患疾病，3岁的时候才被发觉有听力障碍，也因此成为了单亲家庭。硝子为能与他人交流学会了手语，也希望通过笔记本同他人交谈，但因听力问题从小饱受他人欺凌；小学六年级时期转至将也所在班级，但最终因霸凌转学；高中就读于一所启聪学校，与与从小在听障环境中的孩子一起学习。</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">创作背景</div>
<div class="data">2020年5月14日</div>
</div>
<div class="content">大今良时制作漫画《声之形》的目的在于表达“人与人之间交流的渴望”，描写的是“人与人之间复杂的联系与沟通”而非“凌霸”。在创作过程中，《声之形》也受到了作者亲身经历的影响。</div>
<hr style="">
<div class="bar_tag">《声之形》日文原名中的“声”为繁体汉字，繁体的“声”字由“声”、“殳”和“耳”组成，给作者的感觉是传递思想的方式断裂了，单凭声音无法传递思想是作品的关键。作者认为形状可以作为表达思想的一种可能性，想通过漫画来表达这样的多样性。</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">故事内容</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">“我要是没有遇到你这种人就好了。但是还是想再见一次。”耳朵听得见的少年——石田将也，听力障碍的转校生——西宫硝子，两人命中注定地相遇了。然而，将也欺负了硝子，不久后，在教室里被欺负者从硝子变成了将也。几年之后，将也愈发强烈地觉得一定要再次和硝子见面。</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">石田将也（いしだ しょうや）</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">小孩子时期是孩子王，带头欺负硝子的人。但是自从出了硝子的事情被校长知道后以后就被周围的人孤立。一直都活在孤独和自我厌恶中。高中时期为了赎罪而去补偿硝子；被硝子表过白，但因发音问题，将也没能理解。</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">硝子的母亲（西宫八重子）</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">硝子的母亲，非常强势，不希望硝子因为听障而被宠坏，所以严格地对待她。她虽然也有考虑到孩子，但她只重视硝子如何成长，孩子的情绪想法一点不重要。曾为了让硝子少受欺负而强行让她剪男孩子的发型。</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">植野直花（うえの なおか）</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">硝子的小学同学。对硝子有误会，也非常讨厌硝子“悲剧女主角”的样子，但硝子却非常理解植野，对她的行为感到非常感动。</div>
</div>
</div>
</body>
</html>
