（7.21）前端体验课学习笔记2

it2022-05-05 204

本节CSS属性一览：属性功能值的例子border边框1px dashed graymargin外边距（一周）10pxmargin-left左外边距10pxmargin-top上外边距10pxpadding内边距10pxtext-align文本内容水平对齐方式center（居中）line-height文本内容所在行的高度20pxtext-decoration文本修饰text-decoration:none(无下划线) 常用的边框样式：实线（solid）、虚线边框（dashed）、点线边框（dotted）、双线边框（double）。内边距置零用来消除无序列表的前面占位。text-align不能设置给元素，要设置给元素的外层标签。把line-height设置成外层div的高度一样的值可以实现文本内容垂直方向的居中。超链接是默认有下划线的（default值:text-decoration:underline），将text-decoration的值设置为none可以取消下划线。

分析：

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文章列表效果</title> <style> #box { width: 200px; height: 300px; background-color: yellow; } h3 { font-size: 18px; font-weight: 600; text-align: center; /*标题居中*/ } ul { list-style-type: none; /*去掉列表自带黑*/ padding: 0; /*去掉前面空格*/ } li { padding: 10px; /*上下左右都10px，并且垂直居中了*/ border-top: 1px dashed lightgray; /*设置行与行间的虚线*/ } a { text-decoration: none; /*去掉超链接的下划线*/ } </style> </head> <body> <div id="box"> <h3>文章列表</h3> <ul> <li><a href="#">项目一</a></li> <li><a href="#">项目二</a></li> <li><a href="#">项目三</a></li> <li><a href="#">项目四</a></li> <li><a href="#">项目五</a></li> </ul> </div> </body> </html> 页面效果：

专利

最新回复(0)