11.7今天练习了CSS的相关内容，制作了一个永夜星河的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
color:rgb(229, 134, 185);
text-decoration: none;
}
#title{
font-size: 36px;
text-align: center;
font-weight: bolder;
color:rgb(233, 132, 182);
background-color: coral;
height: 150px;
}
img{float: left;
border: 5px solid rosybrown;
padding: 10px 5px 15px 5px;
}
#p{
text-indent: 35px;
line-height: 40px;
text-align: left;
background-color: darksalmon;
padding: 6px 5px;
}
</style>
</head>
<body>
<div id="title">
<h1><a href="https://v.qq.com/x/cover/mzc002007sqbpce/p4100swv33g.html>">永夜星河</a></h1>
</div>
<div>
<img src="../网页设计素材/素材/素材/img/永夜星河1.jpg">
</div>
<div id="p">
<p>
《永夜星河》讲述了鬼马少女凌妙妙意外穿进志怪小说《捉妖》，在系统的任务驱使下，她不仅要击杀大妖、拯救世界，还要攻略书中的“反派”慕声。凌妙妙的到来，悄然改写了这个系统的框架，写下了摆脱既定命运、实现自我意识觉醒的全新故事。剧中“系统”的设定并非简单的任务发布器，而是一个与剧情紧密相连、充满奇幻色彩的完整体系。基于凌妙妙是进入小说的虚拟世界，剧集则以“书籍+文字”为核心元素，在视觉上打造出独特的“文字空间”，让观众仿佛置身于一个由文字构成的奇幻世界。
</p>
<p>
在人物塑造和情感渲染上，该剧同样颇具匠心。凌妙妙带着现代人的独立与智慧，不拘泥于系统的框架，勇于探索未知，试图以自己的方式改写系统限制下既定的人物命运。在与慕声的相处中，她不仅没有盲目顺从“剧情”的安排，还勇于挑战、用智慧与勇气开辟出属于自己的道路。而慕声原本无法直面自身“半人半妖”的混血身份，困囿于他人对自己的评价体系中，在一次次与伙伴们并肩作战中，他渐渐明白了重要的并非是身份而是与人为善的本心，最终完成了自我接纳。慕瑶和柳拂衣一个正派端庄、勤奋刻苦，一个温润如玉、坚守正道，也在历经重重磨难后实现了自我成长。这些人物在性格、品格上有着很强的个人标签，共同构成了这个丰富多彩的故事世界。而剧中对于家庭、亲情的温馨渲染，更是打动了无数观众的心。凌妙妙与爸爸的父女情、慕声与慕瑶的姐弟情等，都成为了推动人物成长、传递温暖能量的重要线索。例如，在现实世界中已经离世的凌爸爸，与凌妙妙在“系统”中再次以父女身份重逢，这些细腻的情感线索的设定，给予现实中的人以情感慰藉的同时，时刻牵绊着凌妙妙，也让她在这个本不属于自己的世界找到了爱与归属感。
</p>
<p>
同时，该剧在“人与自然和谐共存”这一议题上也进行了延展与探讨。剧中所谓“妖”，小到尘妖，大到水妖、竹妖，都是自然界万物的化身，他们有自己的情感、情绪。在人与妖的相处中，双方逐渐放下了对彼此的成见，达成了共情与理解。在剧中，有一幕细节画面尤为令人印象深刻。当凌妙妙为了完成任务而深入妖界时，她遇到了一只被人类追捕的小妖，虽身为“捉妖师”，但面对无助的小妖，凌妙妙没有冷漠旁观，而是挺身而出保护了它。这些情节不仅展现了生而为人的善良本性，更传递着包容与理解的正向价值观。
</p>
<p>
该剧作为一部充满奇幻色彩的冒险剧，为观众打开了一种新视野，让观众发现了探索的无限可能（新华网评）
</p>
</div>
<div>
</div>
</body>
</html>
知识点：字体样式标签：font-size、color等；
文本样式标签：text-indent，text-decoration，line-height等；
图片样式标签：img、float、border等；
背景样式标签：background-color等
盒子模型等
同时也结合了相关html的知识
11.9今天跟练文件结合HTML和CSS，更换了相关图片，完成了页面的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天天好心情</title>
<style>
#title {
width: 65%;
margin: 0 auto;
}
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 40px;
}
#foot{
text-align: right;
}
</style>
</head>
<body>
<div id="title">
<img src="../网页设计素材/素材/素材/img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>天天好心情</h1>
<hr>
<span id="time">2023年03月02日 21:50</span>
<span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
<hr>
<video src="../网页设计素材/素材/素材/video/《穿普拉达的女王》：坚持你的梦想吧，哪怕需要重头开始。(梅丽尔.斯特里普，安妮.海瑟薇主演）（bgm：La La Land）.mp4" controls width="950px"></video>
<p>
<strong>天天消息</strong>
</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut dignissimos voluptas saepe qui, at impedit? Dignissimos dolorum magnam laudantium optio reiciendis perferendis in nesciunt at ea incidunt. Expedita, impedit commodi?
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut dignissimos voluptas saepe qui,
</p>
<img src="../网页设计素材/素材/素材/img/huawei.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet debitis unde accusamus! Error, natus. Ipsam earum iusto maxime, suscipit, quibusdam ut, veritatis inventore nostrum placeat alias veniam enim sed doloribus.
</p>
<img src="../网页设计素材/素材/素材/img/alibaba.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p id="foot">
责任编辑:小耐cc
</p>
</div>
</body>
</html>
