开发者学堂课程【CSS 快速掌握:列表样式属性案例】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/611/detail/9176
列表样式属性案例
内容介绍
一、案例
一、案例
首先来个 div,在 div 里面放一个标题标记,表示这个频道推荐,下面的内容可以用无序列表。
<!DOCTYPE htm1>
<htm1 lang=”en”
<head>
<meta charset=UTF-8>
<title>
列表样式属性案例<title>
<head>
<body>
<div class=’’box’’
<h2>
新闻频道<h2>
<body>
<htm1>
这个时候<u1>下面就会出现以下内容
<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>
这个时候可以去网页上复制些内容过来,然后点右键在浏览器中打开。
在写 CSS 代码时第一步需要给 div 设置一个边距,并且让这个 div 在浏览器上面是居中显示。
要让 div 居中就要了解外边距
外边距:HTML 中的表格标记属性 cllspacing 单元格与单元格之间的距离,在 css 中,盒子与盒子之间的距离也称为外边距。
其中margin-left:auto 意思为将左外边距的值设置为 auto,margin-right:auto 意思为将右外边距的值设置为 auto。
这时候我们来设置 h2
.box h2{
border:1px solid skyblue;
height:40px;
line-height:40px;
color:#f00
}
若要去除加粗效果则加上个 font-weight:normal