网站建设老李教学网站,软件开发的一般流程是什么,网站开发实战,手机wap网站大全DIV CSS布局中主要CSS属性介绍#xff1a;
Float: Float属性是DIV CSS布局中最基本也是最常用的属性#xff0c;用于实现多列功能#xff0c;我们知道div标签默认一行只能显示一个#xff0c;而使用Float属性可以实现一行显示多个div的功能#xff0c;最直接解释…
DIV CSS布局中主要CSS属性介绍
Float: Float属性是DIV CSS布局中最基本也是最常用的属性用于实现多列功能我们知道div标签默认一行只能显示一个而使用Float属性可以实现一行显示多个div的功能最直接解释方法就是能实现表格布局的多列功能。
Margin: Margin属性用于设置两个元素之间的距离。
Padding: Padding属性用于设置一个元素的边框与其内容的距离。
Clear: 使用Float属性设置一行有多个DIV后多列最好在下一行开始之前使用Clear属性清楚一下浮动否则上面的布局会影响到下面。 简单操作实例下面使用实例如果做一个简单又基本的布局效果如下图
代码 !DOCTYPE html PUBLIC
-//W3C//DTD XHTML 1.0 Transitional//EN html xmlns head meta http-equiv Content-Type content text/html; charsetutf-8 / titleDIV CSS布局教程/title style type text/css #Container{ width:1000px; margin: 0 auto; /*设置整个容器在浏览器中水平居中*/ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /*此处对容器设置了高度一般不建议对容器设置高度一般使用overflow:auto;属性设置容器根据内容自适应高度如果不指定高度或不设置自适应高度容器将默认为1个字符高度容器下方的布局元素footer设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法设置content与上面header元素之间的距离*/ background:#0FF; } #Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动实现多列效果div Css布局中很重要的*/ background:#90C; } #Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动实现多列效果div Css布局中很重要的*/ background:#90C; } /*注Content-Left和Content-Main元素是Content元素的子元素两个元素使用了float:left;设置成两列这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度否则设置列将失败*/ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } /style /head body div id Container div id Header div id logo 这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。/div /div div id Content div id Content-Left Content-Left/div div id Content-Main Content-Main/div /div div class Clear !--如何你上面用到 float ,下面布局开始前最好清除一下。--/div div id Footer Footer/div /div /body /html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html xmlns head meta http-equiv Content-Type content text/html; charsetutf-8 / titleDIV CSS布局流程/title style type text/css #Container{ width:1000px; margin: 0 auto; /*设置整个容器在浏览器中水平居中*/ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /*此处对容器设置了高度一般不建议对容器设置高度一般使用overflow:auto;属性设置容器根据内容自适应高度如果不指定高度或不设置自适应高度容器将默认为1个字符高度容器下方的布局元素footer设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法设置content与上面header元素之间的距离*/ background:#0FF; } #Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动实现多列效果div Css布局中很重要的*/ background:#90C; } #Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动实现多列效果div Css布局中很重要的*/ background:#90C; } /*注Content-Left和Content-Main元素是Content元素的子元素两个元素使用了float:left;设置成两列这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度否则设置列将失败*/ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } /style /head body div id Container div id Header div id logo 这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。/div /div div id Content div id Content-Left Content-Left/div div id Content-Main Content-Main/div /div div class Clear !--如何你上面用到 float ,下面布局开始前最好清除一下。--/div div id Footer Footer/div /div /body /html 注解Container作为整个页面的容器控制着整个页面在浏览器的位置此处使用margin:0 auto;控制Container容器在浏览器中水平居中一般固定宽度的布局都会用到这就代码。
