div+CSS
2016-07-08 17:29
477 查看
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局。
转载请标明:http://www.kwstu.com/ArticleView/divcss_2013929173533658
关于DIV+CSS布局中用到的CSS必备知识请看:http://www.kwstu.com/ArticleView/divcss_201442291125960
DIV+CSS布局中主要CSS属性介绍:
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。
实例讲解:下面使用实例如果做一个简单又基本的布局,效果如下图:
代码:
?
注解:Container作为整个页面的容器,控制着整个页面在浏览器的位置,此处使用margin:0 auto;控制Container容器在浏览器中水平居中,一般固定宽度的布局都会用到这就代码。
本文只讲述最基本的布局,在具体开发实践中可能会遇到浏览器兼容性等其他问题,遇到细节问题请自行百度解决,解决的多了经验就积累起来了。
所属分类: DIV+CSS页面布局
2013/9/29 17:35:33 divcss 阅读(243110) 评论(0)
转载请标明:http://www.kwstu.com/ArticleView/divcss_2013929173533658
关于DIV+CSS布局中用到的CSS必备知识请看:http://www.kwstu.com/ArticleView/divcss_201442291125960
DIV+CSS布局中主要CSS属性介绍:
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。
实例讲解:下面使用实例如果做一个简单又基本的布局,效果如下图:
代码:
?
本文只讲述最基本的布局,在具体开发实践中可能会遇到浏览器兼容性等其他问题,遇到细节问题请自行百度解决,解决的多了经验就积累起来了。
所属分类: DIV+CSS页面布局
2013/9/29 17:35:33 divcss 阅读(243110) 评论(0)
相关文章推荐
- CSS--position属性
- CSS3属性之多栏布局column
- MVC @Html.TextBox 添加属性和样式
- 【转】手机web——自适应网页设计(html/css控制)
- css3-立方体3d旋转动画
- css3 Animation ,transform,keyframess属性以及实例
- CSS各个浏览器Hack的写法
- CSS的布局模型
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- css3中transition属性详解
- css实现内部滚动
- 深入理解CSS3 Animation 帧动画
- CSS---Tips2背景
- css中visibility与display的区别
- CSS Secret——Transitions & Animations
- 在CSS中,html中的标签元素三种不同的类型
- CSS基本知识汇总
- Emmet:HTML/CSS代码快速编写神器
- CSS弹性盒模型 box-flex
- 层层叠叠,用好z-index