67-68 讲 开班信息案例
代码只写了 67 讲,主要还是 line-heught 让文字垂直居中,font 覆盖行高的问题,这些在前面都讲过。68 讲没什么重要知识点,代码没写,下面是 67 讲的代码:
<html>
<head>
<title> 导航条 </title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:300px;
height:500px;
background:lightgreen;
margin:30px auto;
}
.box .title{
height:30px;
line-height:30px;
background:lightgrey;
border-top:lightgreen 4px solid;
padding:0 5px;
}
.title a{
color:red;
float:right;
}
h3{
display:inline-block;
/* 这里要注意了,父元素 title 设置了行高,子元素 h3 的 font 属性只设置字体大小没指定行高会用默认的行高所以要 18px/30px */
font: blod 18px/30px “ 微软雅黑 ”;
}
</style>
<body>
<div class=”box”>
<div class=”title”>
<h3> 近期开班 </h3>
<a href=”#”>16 年面授开班计划 </span>
</div>
<div class=”content”> </div>
</div>
</body>
</html>
未完。。。