课程内容
通过元素类型的转换让块元素水平并排排版,再通过盒子模型,实现栏目之间的间距与分割
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.contents{
width:1100px;
margin:50px auto;
border-bottom:solid 1px #ccc;
border-top:solid 1px #ccc;
padding:40px 0;
}
.left,.center,.right{
display: inline-block;
width:300px;
vertical-align: top;
}
h3{
font-size:20px;
padding-bottom:20px;
}
ul{
list-style: none;
}
.left p,.center p{
line-height:30px;
font-size:14px;
color:#666;
}
.left{
padding-right:42px;
border-right:dotted 2px #ccc;
height:290px;
margin-right:42px;
}
.center{
padding-right:42px;
border-right:dotted 2px #ccc;
margin-right:42px;
}
.right a{
color:#666;
text-decoration: none;
line-height:30px;
font-size:14px;
}
</style>
</head>
<body>
<div class="contents">
<div class="left">
<h3>VUE渐进式JavaScript框架</h3>
<p>基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。经过编译器优化、完全响应式的渲染系统,几乎不需要手动优化。丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如。</p>
</div>
<div class="center">
<h3>HTML盒子模型</h3>
<img src="box.bmp" width="300" height="180" alt="">
<p>所有的标签都可以看做是一个盒子(容器),这个盒子由内到外由4层嵌套形成的</p>
</div>
<div class="right">
<h3>热门文章</h3>
<ul>
<li><a href="">CSS3弹性布局内容对齐</a></li>
<li><a href="">Git:代码冲突常见解决方法</a></li>
<li><a href="">JavaScript基础:回调(callback)是什么?</a></li>
<li><a href="">带悬停动画效果的CSS按钮</a></li>
<li><a href="">CSS3弹性布局内容对齐</a></li>
<li><a href="">Git:代码冲突常见解决方法</a></li>
<li><a href="">JavaScript基础:回调(callback)是什么?</a></li>
<li><a href="">带悬停动画效果的CSS按钮</a></li>
</ul>
</div>
</div>
</body>
</html>