<!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>
结果展示