简单的两个静态页面，因为页面不算复杂，所以采用头部内嵌式样式和内联式样式。
图片为相对路径，下图为结构图
整体遵循w3c标准命名，不足之处还望指出。
新闻界面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>"老腔'何以令人震撼</title>
</head>
<style>
*{
/*初始化*/
margin: 0;
padding: 0;
}
.content-wrap{
min-height: 100vh;
text-align: center;
}
.text-title,.desc-content,hr{
margin-top: 20px;
}
.img-wrap h3{
margin: 20px 0 20px 0;
}
.texts-content{
text-align: left;
margin-top: 20px;
padding: 20px;
}
.texts-content div{
font-size: 13px;
font-weight: 700;
}
</style>
<body>
<div class="content-wrap">
<div class="text-title">
<h1>"老腔'何以令人震撼</h1>
</div>
<div class="desc-content">
<span>2021-05-15</span>
<span>来源：</span>
<span style="color: #8EC5FC">网络侵删</span>
<span>
<input type="text">
<button>搜索</button>
<a href="./Register.html">注册用户</a>
</span>
</div>
<hr>
<div class="img-wrap">
<h3>"老腔'何以令人震撼</h3>
<img src="./static/images/huoxing.jpg" alt="">
</div>
<div class="texts-content">
<div>高考某考生作：</div>
<p title="“老腔”何以令人震撼">“老腔”何以令人震撼
华阴老腔，在几年前还是个名不见经传的小曲目。<br>
然而，这样一个小众甚至是默默无闻的老腔，却让陈忠实先生情难自禁，沉醉其中，不可自拔。不禁很好奇，“老腔”究竟何以令人震撼?
<br>
也许是那一声声铿锵有力、直击人心的嘶吼，也许是那一段段百转千回、悠扬婉转的曲调，也许是台上台下演员的倾力演唱、人们的激情感染……或者，
是藕断丝连的缕缕乡愁，是深结于心的归属与认同。前三者自不消说，确实打动了很多人，却难以让人有更深层次的、发自心灵的震颤和共鸣——这种共鸣，是需要共同的记忆和情感的。
陈忠实生于关中，长于关中，他了解并几十年如一日地热爱着它;而在老腔中，在极富感染力和冲击力的表演中，他不能更加清晰地看到了故乡的面目，听到了自己引以为豪的土地的神灵之歌。
这才是老腔之所以让人震撼的原因。这种深刻而广阔的民族归属感和文化认同感，让我们在与西方文明接轨、渐渐西洋化、渐渐遗忘了民间小调的时候，
可以被一曲乡音震得泪流满面。这实在是一件可喜又可悲的事情。
<br>
喜的是，像老腔一样的民间文化依旧可以轻而易举地引起我们的感动和震撼;
悲的是，像老腔一样的的民间文化居然可以轻而易举地引起我们的感动和震撼。难能方为可贵，都是越不容易得到，才越发觉得珍贵，觉得眼前一亮。本应深植于日常生活的风土
现在的人们，是不是已经走得太远，以至于都要看不见回家的路了呢?
<br>
两年前，坐在课桌前的考生们面对着“北京老规矩”的茫然无措依旧历历在目。
家家户户四合院、七折八拐胡同湾的景象已经不复存在，似乎连带着那些陈旧又充满温情的习惯也跟着一同去了。<br>
听得别人提起，才会恍然大悟，惊喜非常：就应该是这样的啊!老腔是如此，老规矩是如此，甚至连大名鼎鼎的国粹京剧，<br>
也不知道有多少个孩子有过完完整整听一出戏的经历。这片土地记忆的格调，就在我们这一代中逐渐被更改;<br>
这片土地文化的精粹，就在我们这一代中逐渐被掩埋。
偶然听到、看到、感受到，所带来的震撼终究是短暂的，短暂之后又是长久的遗忘;而我们需要的，从来都不是遗忘。<br>
在追逐更加多样的未来的时候，有时也需要停下来，多看看来时的路。
即使登上顶峰，一个没有自己独有回忆的人也不是一个完整的人;即使快速发展，一个没有自己独特文化的国家也不是一个值得尊敬的国家。<br>
希望在不久的将来，我们领略到和老腔类似的民间艺术时，不会再如此“肤浅”地被震撼。</p>
</div>
</div>
</body>
</html>一个注册界面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
* {
/*初始化*/
margin: 0;
padding: 0;
}
.register-wrap {
min-height: 100vh;
display: flex;
background-color: #f5f5f5;
justify-content: center;
align-items: center;
}
.register-content {
width: 600px;
height: 500px;
background-color: #fff;
border-radius: 15px;
}
.form-content {
margin-left: 115px;
text-align: left;
}
.register-content .title {
margin-top: 20px;
font-size: 30px;
font-weight: 700;
text-align: center;
}
.input-wrap {
margin-top: 20px;
height: 50px;
}
.input-wrap input {
outline-color: #E0C3FC;
border-radius: 10px;
text-align: center;
padding: 1px;
}
.now-location input {
width: 70px;
}
.education-degree input {
width: 80px;
}
.Personal-introduction textarea {
width: 250px;
height: 40px;
}
.register-btn-wrap {
margin-left: 130px;
}
.promise {
margin: 20px 0 0 110px;
}
</style>
</head>
<body>
<div class="register-wrap">
<div class="register-content">
<div class="title">
注册用户
</div>
<div class="form-content">
<form action="">
<div class="input-wrap">
账户：<input type="text" class="input-text"><br>
密码：<input type="password" class="input-pwd">
</div>
<div class="gender-select">
<span>性别：</span>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</div>
<div class="birth-date">
<span>生日：</span>
<select name="" id="year-selection">
<option value="" selected>请选择年份</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
</select>
<select name="" id="month-selection">
<option value="" selected>请选择月份</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select name="" id="day-selection">
<option value="" selected>请选择日</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</div>
<div class="now-location">
所在地区： <input type="text">
</div>
<div class="marriage">
<span>婚姻状况</span>
<input type="radio" name="marriage" value="unmarried">未婚
<input type="radio" name="marriage" value="married">已婚
<input type="radio" name="marriage" value="divorce">离婚
</div>
<div class="education-degree">
学历：<input type="text">
</div>
<div class="favourite">
<span>喜欢的类型：</span>
<input type="checkbox" name="marriage" value="unmarried">好的
<input type="checkbox" name="marriage" value="unmarried">不好的
<input type="checkbox" name="marriage" value="unmarried">挺好的
<input type="checkbox" name="marriage" value="unmarried">很不好的
<input type="checkbox" name="marriage" value="unmarried">都喜欢
</div>
<div class="Personal-introduction">
<soan>个人介绍：</soan>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="register-btn-wrap">
<button type="submit">免费注册</button>
<br>
<input type="checkbox">我同意注册条款和加入标准
</div>
<div class="promise">
<span>我承诺：</span>
<ul>
<li>1.凑字数凑字数凑字数凑字数</li>
<li>2.凑字数凑字数凑字数凑字数</li>
<li>3.凑字数凑字数凑字数凑字数</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
