<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*清除标签默认的padding和margin*/
*{
padding: 0;
margin: 0;
}
body
{
background-color: gainsboro;
}
.content{
width: 328px;
height: 226px;
border: 1px solid #00BFFF;
margin: auto;
margin-top:100px;
padding:0 15px;
}
h3
{
font-size: 10px;
margin-top: 18px;
border-bottom: 1px solid orange;
padding-bottom:6px ;
}
span
{
font-size: 14px;
}
ul
{
margin-top:10px ;
}
li
{
font-size: 12px;
/*清除列表标签的黑点*/
list-style: none;
line-height: 30px;
border-bottom: 1px dashed red;
padding-left:20px;
}
a{
text-decoration: none;
color: #080808;
list-style: none;
}
</style>
</head>
<body>
<div class="content">
<h3>最新文章<span>new articles</span></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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.content
{
width: 260px;
height: 327px;
border:1px solid orange;
margin: 0 auto;
margin-top: 20px;
background-color:pink;
padding: 10px;
}
h3
{
font-family: "黑体";
font-size: 20px;
color: white;
border-left:4px solid #1B6D85 ;
padding-left:5px;
}
li
{
font-size: 12px;
list-style: none;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed mediumpurple;
padding-left:16px ;
}
a{
text-decoration: none;
color: #4CAE4C;
}
ul
{
background-color: white;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="content">
<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>
<li><a href="#">这是一条新闻</a></li>
</ul>
</div>
</body>
</html>
伪类:
行高:
- 应用:将行高设置等于容器的高度可以让文本垂直居中
- 原理:为什么行高等于容器的高度可以让文本垂直居中
文本中的各条线:
补充:行高是可以继承的
行高的单位,取值:
- 具体的像素值
- 使用em(em指当前标签设置的字体大小)
- 使用%
- 可以什么单位都不带
注意:
- 在设置行高时,如果单位是em或%,那么将来行高会先计算出来结果以后再继承给子元素
- 在设置行高时,如果单位是没有,那么将来行高会先继承给子元素,然后计算出行高
行高与font关系:
font-style font-weight font-size/font-height font-family
默认:
默认值会覆盖所以没有效果
margin两种特殊现象:
- 外边框的合并现象:如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值为较大的那个。
- margin的塌陷现象:如果一个大盒子包含一个小盒子设置margin-top大盒子会一起向下平移
解决方案:
- 给大盒子加一个边框
- 给大盒子设置一个overflow属性