index代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：单词
RGB 0~F
RGBA A: 字体透明度0~1
text-align: 排版，居中
text-indent: 段落首行缩进
行高，和块的高度一致，就可以上下居中
text-decoration: underline 下划线
text-decoration: line-through 中划线
text-decoration: overline 上划线
-->
<style>
body{
font-family: 华文行楷;
font-size: 30px;
color: #b31542;
}
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
text-decoration: underline;
}
.p3{
background: chartreuse;
height: 200px;
line-height: 50px;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">1234456</a>
<h1>故事介绍</h1>
<p class="p1">一个人静静的凝望着晦暗的天空，阴霾弥漫的苍穹让人有了些许的落寞。</p>
<p class="p3">孤寂的风吹开了笔端深处褶皱的想念，萦绕在跌宕起伏的心间，脑海放映着旧日缱绻的缠绵，
妖娆着以前唯美的国度，洋溢着身心皆暖的幸福。你的深情脉脉有如初秋的细雨洗涤着我心灵的尘埃，我沉醉在你柔情似水的剪影里，
祈盼着时光的滞留，渴望着将此旖旎绣成一副美轮美奂的画卷装裱成框，织就我的梦。 </p>
</body>
</html>
结果展示
index2代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐~参照物， a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/1.png" alt=""width="300px"height="300px">
<span>好酷啊</span>
</p>
</body>
</html>
结果展示
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/279115.html