1、居左：
对要靠左对齐（局左）的div样式加float:left。
示例代码：
css部分：
<style>
.divcss5-left{float:leftwidth:250pxheight:50pxborder:1px solid #F00}
</style>
HTML部分：
<div class="divcss5-left">此DIV靠左对齐显示</div>
2、居右：
对要靠右对齐（局右）的div样式加float:right。
示例代码：
css部分：
<style>
.divcss5-right{float:leftwidth:250pxheight:50pxborder:1px solid #F00}
</style>
HTML部分：
<div class="divcss5-right">此DIV靠右对齐显示</div>
3、居中：
对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
示例代码：
css部分：
<style>
.divcss5-cent{margin:0 autowidth:250pxheight:50pxborder:1px solid #F00}
</style>
<div class="divcss5-cent">此DIV居中右对齐显示</div>
扩展资料：
CSS清除浮动：
浮动：因为使用了float:left或float:right或两者都是有了而产生的浮动。
对父级设置适合CSS高度：
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。
示例代码：
css部分：
.divcss5{ width:400pxborder:1px solid #F00background:#FF0 height:102px}
.divcss5-left,.divcss5-right{width:180pxheight:100px
border:1px solid #00Fbackground:#FFF}
divcss5-left{ float:left}
.divcss5-right{ float:right}
HTML部分：
<div class="divcss5">
<div class="divcss5-left">left浮动</div>
<div class="divcss5-right">right浮动</div>
</div>
用CSS控制的下拉菜单，在各个浏览器中表现的不够完美，最佳的方法是使用jQuery来制作，代码如下，加了一个缓动的效果：[HTML部分]
<div id="nav">
<ul>
<li><a href="#">菜单零</a></li>
<li><a href="#">菜单一</a></li>
<ul class="childnav">
<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>
<li><a href="#">菜单二</a>
<ul class="childnav">
<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>
</li>
<li><a href="#">菜单四</a></li>
<!-- /nav -->
</ul>
</div>
[JS部分]
<script type="text/javascript">
$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown('fast').show()
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp('slow')
})
})
})
</script>
[CSS部分]
<style type="text/css">
* { padding:0margin:0list-style:none}
#nav {
margin:200px
}
#nav ul { background:#333padding:5pxfloat:leftwidth:100%}
#nav li {
float:left
padding:0 5px
position:relative
}
#nav li a {
float:left
padding:0 5px
display:block
text-align:center
color:#fff
text-decoration:none
font-size:12px
height:18px
line-height:18px
}
#nav li a:hover, #nav li a.on {
background:#444
text-decoration:none
}
#nav li ul {
display: none
position: absolute
left: -2px
top: 18px
background: #999
border-bottom:3px solid #333
z-index:1000
}
#nav li ul li {
background:none
float:none
padding:0
}
#nav li ul a {
float:none
}
#nav li ul a:hover {
background:#888
}
#nav li:hover ul, #nav li.over ul {
display: block
z-index:999
}
</style>
《CSS3DIV网页样式与布局从入门到精通》百度网盘pdf最新全集下载:
链接: https://pan.baidu.com/s/1aBFLBnJ22Bv9jGXyM5rCKA
?pwd=7vgd 提取码: 7vgd简介：全书分三大部分，共16章。第一部分主要介绍了CSS相关基础知识，包括CSS样式设计基础，使用CSS设置字体和文本样式、图片样式，控制背景图像，设计列表样式、表格样式、表单样式，定义链接样式，使用DIV+CSS布局网页，CSS定位与网页版式设计等；第二部分介绍了CSS新技术，包括使用CSS3布局网页和设计动画；第三部分为扩展应用部分，介绍了如何使用JavaScript控制 CSS样式、使用CSS设计XML文档样式、使用CSS设计移动页面等。
