这篇博客通过HTML和CSS展示了如何将诗词以竖向排列展示，背景设为一张图片，并使用了特定字体和颜色，以及调整了文字间距和行间距。尽管诗词的内容遭受生活的打击，但作者坚持用代码表达对未来的信念。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>诗词</title>
<style>
.content{
background-image: url("http://s15.sinaimg.cn/mw690/003ieNgKzy6UtU5Kn26fe&690");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
font-family: "华文行楷";
font-size:22px;
height: 100%;
}
.shici{
padding-top: 15px;
writing-mode: tb-rl;
color:#FF00CC;
border: 1px solid #FFF;
width: 100%;
overflow:scroll;
overflow-y:hidden;
padding-bottom: 15px;
}
.shici p{
padding: 0;
margin: 0;
letter-spacing:1px;/*设置文字之间的间隔。*/
/*line-height:1px; */ /*文字行间距无效*/
}
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div class="content">
<div class="shici">
<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>
<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>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>诗词</title>
<style>
.content{
background-image: url("http://s15.sinaimg.cn/mw690/003ieNgKzy6UtU5Kn26fe&690");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
font-family: "华文行楷";
font-size:22px;
height: 100%;
}
.shici{
padding-top: 15px;
writing-mode: tb-rl;
color:#FF00CC;
border: 1px solid #FFF;
width: 100%;
overflow:scroll;
overflow-y:hidden;
padding-bottom: 15px;
}
.shici p{
padding: 0;
margin: 0;
letter-spacing:1px;/*设置文字之间的间隔。*/
/*line-height:1px; */ /*文字行间距无效*/
}
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div class="content">
<div class="shici">
<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>
<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>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
