今天主要来学习下列布局,一个好的网页需要有好的布局方式,如果布局很乱,那么用户在浏览的时候,就会感觉很糟糕,以至于下次不会再来查看我们的网站。
1.首先创建个index.html页面,然后添加个div,为了使div能清楚看到,我们加上背景色
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DIV+CSS学习(二)</title> </head> <style> .div{ width:300px; height:400px; background:red; } </style> <body> <div class="div">这是一个div</div> </body> </html>
代码很简单,就设置了div的宽度和高度,浏览结果如下:
现在我们让这个DIV固定宽度居中,要解决这个问题,这里使用margin属性,即外边距,也就是我们当前元素到浏览器的边框距离。
我们在css中添加上这个属性,让其居中
.div{ width:300px; height:400px; background:red; margin:auto; }
得到的结果:
注意,margin这个属性有四个参数,对应的意思分别是上右下左对应的边距。
同样我们可以设置body的margin属性,可以设置为0,这样当我们的宽度不设置的时候,就不会存在边框了,而是紧贴着浏览器的。
下面再来进行一个布局,也就是我们网页经常被分为上中下三部分,那么用DIV+CSS该如何写呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DIV+CSS学习(二)</title> </head> <style> .header{ width:80%; height:100px; background:#9f9; margin:5px auto; } .bodyer{ width:80%; height:400px; background:blue; margin:5px auto; } .footer{ width:80%; height:100px; background:#9f9; margin:5px auto; } </style> <body> <div class="header">头部信息</div> <div class="bodyer">中间部分</div> <div class="footer">尾部信息</div> </body> </html>
注意margin,每个都是距离上的边距为5px,其他为自动,浏览结果如下:
是不是很方便就弄出来了,而没有使用table
相关推荐
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
DIV+CSS布局示例 网页制作 制作网站 学习网站不错的资料
div+css做的几套购物网站模板,适用于初学者参考学习的顶级资料。
DIV+CSS学习基础规则大全,精心整理的HTML网页设计基础规则知识,从菜鸟到高手都需要了解的HTML知识。
DIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSSDIV+CSS
欢迎大家学习《十天学会web标准》,也就是我们常说的DIV+CSS。不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准。 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局。如果...
用DIV+CSS设计的网站,对DIV+CSS的设计及应用更好地学习DIV+CSS
DIV+css学习笔记DIV+css学习笔记
40款网页模板源文件(DIV+CSS),40款网页模板源文件(DIV+CSS),40款网页模板源文件(DIV+CSS)
div+css布局大全PDF电子书,是学习div+css的好资料。
CSS实例,20章教程;20个DIV+CSS的实例,详细介绍了css布局,学习DIV+CSS的初级良好教程
今天看到一个Div+CSS 布局的经典教程,奉献给大家,...教程共分5 节,其实就一点点内容,不过通过学习,一定能让你领会到DIV+CSS 的精髓,不要嫌文字多,一个小时一定能让你学完,当然是针对熟悉网页制作 基础的朋友。
这是一个非常适用学习的DIV+CSS+JQUERY的学习模板,可以好好研究。
div+css网页布局学习
div+css网站布局案例精粹(第2版)30个书本案例代码及文件,学习必备。另有50个赠送案例的全部代码及文件,因小弟只有最大60MB上传权限,所以只能分两个资源上传。
一款div+css做的网站,有助于学习div+css网站技术.
DIV+CSS课件,帮助大家系统的学习网页制作的知识,欢迎大家下载学习
对于一个开发人员来讲尤其是网站开发人员必须要懂的这些
韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记
DIV+CSS源文件,学习用的经典实例,不要错过,