第五章作业

姜韩

于 2024-10-12 20:24:01 发布

阅读量343

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/2401_84313276/article/details/142885817

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走进内心文学的世界</title>
<style type="text/css">
.father {
background-image: url("img/top-bg.png");
height: 110px;
text-align: center; /* 文字居中 */
font-size: 50px; /* 文字大小 */
font-weight: bold; /* 文字加粗 */
line-height: 110px; /* 使文字垂直居中 */
}
.float-left, .float-right {
position: relative;
width: 500px;
height: 100px;
margin: 10px;
background-size: cover; /* 覆盖整个元素 */
background-position: center; /* 背景图片居中 */
text-align: center; /* 文字居中 */
font-size: 30px; /* 文字大小 */
font-weight: bold; /* 文字加粗 */
}
.float-left {
float: left;
background-color: lightblue;
background-image: url("img/menu-bg.png"); /* 添加背景图片 */
}
.float-right {
float: right;
background-color: lightcoral;
background-image: url("img/menu-bg.png"); /* 添加背景图片 */
}
.bottom-text {
position: absolute;
bottom: 0;
font-size: 20px;
font-weight: normal;
text-decoration: underline;
width: 30%; /* 设置每个下划线文字的宽度 */
white-space: nowrap; /* 防止文字换行 */
}
.text-left {
left: 10%; /* 左侧文字位置 */
}
.text-center {
left: 35%; /* 中间文字位置 */
}
.text-right {
left: 65%; /* 右侧文字位置 */
}
   .box{
       border-top: 2px solid #000000; /* 上框线 */
       background-image: url("img/menu-bg.png"); /* 添加背景图片 */
       text-align: center;
   }
       </style>
   </head>
   <body>
       <div class="father">走进内心文学的世界</div>
       <div class="float-left">
       生活随笔
           <div class="bottom-text text-left">感动心灵</div>
           <div class="bottom-text text-center">人生哲理</div>
           <div class="bottom-text text-right">励志文章</div>
       </div>
       <div class="float-right">
       抒情散文
           <div class="bottom-text text-left">唯美句子</div>
           <div class="bottom-text text-center">美文欣赏</div>
           <div class="bottom-text text-right">爱情诗句</div>
       </div>
           <p>当你终于站在时光这头，回首过往的种种，会毫无遗憾地告别此生吗？一位白发苍苍的老者，
           面对镜头说道：这辈子做自己的时光太少，一直在为别人活，从来没有为自己真正活一场。人这
           一生，确实有许多牵绊，让我们放不开手脚，仿佛作茧自缚，一生都在别人眼光做成的无形大网
           中挣扎，从没痛痛快快为自己而活。这样的人生，值得留恋吗？这样的人生，值得回首吗？</p>
           <p>人总会被别人的成功影响，别人混得好，心里总会咯噔一下，仿佛有一块石头堵着，很不舒
           服。为何不放宽心，多看看自己有的，不要总想着别人有的，如此就能释怀很多。人生十之八九
           都是在自寻烦恼，很多事本和自己八竿子打不着，亲戚的儿子混得好，又和你有什么关系呢？世
           界上混得好的人那么多，难道每一个人都要拿出来让自己难受一次吗？多看看自己有的，才能知
           足常乐。</p>
       <div class="box">版权所有©走进内心的文学</div>
   </body>
</html>