1.两端对齐方法
说明：利用外部div的padding使div居中对齐，左右浮动两端对齐
<div class="clearfix" style="padding:20px">
<div class=left>
</div>
<div class=right>
</div>
</div>
2.多列布局
说明：关键代码.ui-courses { 1020px;}，.ui-courses-item{ 320px;margin-right: 20px;}利用外部的div撑开多20个像素。
<div class="ui-box-content" style="padding: 10px 0">
<div class="ui-courses fn-clear">
<div class="ui-courses-item fn-left">
<img src="images/课程1.png" alt="">
<h3>飞鹰训练营</h3>
<p>铭智集团《飞鹰训练营》第17期于2016年4月15-21日为期七天培训。主要内容围绕四大模块展开，打造针对企业全国运营......</p>
</div>
<div class="ui-courses-item fn-left">
<img src="images/课程1.png" alt="">
<h3>飞鹰训练营</h3>
<p>铭智集团《飞鹰训练营》第17期于2016年4月15-21日为期七天培训。主要内容围绕四大模块展开，打造针对企业全国运营......</p>
</div>
<div class="ui-courses-item fn-left">
<img src="images/课程1.png" alt="">
<h3>飞鹰训练营</h3>
<p>铭智集团《飞鹰训练营》第17期于2016年4月15-21日为期七天培训。主要内容围绕四大模块展开，打造针对企业全国运营......</p>
</div>
</div>
</div>
导航居中布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中导航</title>
<style>
body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
padding: 0;
margin: 0;
}
body, textarea, select, input, button {
font-size: 12px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
}
.m-top, .m-top .logo a, .m-nav li, .m-nav li span, .m-nav a, .m-nav a em, .m-nav .cor, .m-nav .hot, .m-srch .srchbg, .m-subnav, .m-subnav .nav a, .m-subnav .nav em, .m-tophead, .m-mail, .m-tophead .head .mask, .m-msg{
background: url(topbar.png) no-repeat 0 9999px;
}
.m-subnav{
height: 35px;
background-position: left -230px;
background-repeat: repeat-x;
}
.m-subnav .wrap {
911px;
margin: 0 auto;
}
.m-subnav .nav li {
display: inline;
margin: 0 17px;
}
.m-subnav .nav li, .m-subnav .nav a, .m-subnav .nav em {
float: left;
height: 35px;
overflow: hidden;
}
.m-subnav .nav em {
padding-right: 14px;
line-height: 35px;
color: #fff;
text-shadow: 0 1px 0 #650303;
}
.m-subnav .nav a {
padding-left: 14px;
}
.m-subnav .nav a:hover, .m-subnav .nav a.z-slt {
background-position: left -268px;
}
.m-subnav .nav a:hover em, .m-subnav .nav a.z-slt em {
background-position: right -268px;
}
</style>
</head>
<body>
<div class="m-subnav">
<div class="wrap f-pr">
<ul class="nav">
<li><a href="" class="z-slt"><em>推荐</em></a></li>
<li><a href=""><em>排行榜</em></a></li>
<li><a href=""><em>歌单</em></a></li>
<li><a href=""><em>主播电台</em></a></li>
</ul>
</div>
</div>
</body>
</html>