整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基础教程:div元素实现布局

用 <div> 元素的 HTML 布局

注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局:

<html>
<head>
<style>
#header {
 background-color:#1aaa11;
 color:white;
 text-align:center;
 padding:5px;
}
#nav {
 line-height:30px;
 background-color:#eeeeee;
 color:#faaaff;
 height:300px;
 width:100px;
 float:left;
 padding:5px;	 
}
#section {
 width:350px;
 float:left;
 padding:10px;	 	 
}
#footer {
 background-color:#166611;
 color:white;
 clear:both;
 text-align:center;
 padding:5px;	 	 
}
</style>
</head>
<body>
<div id="header">
<h1>天华信息教育</h1>
</div>
<div id="nav" >
第一组<br>
第二组<br>
第三组<br>
</div>
<div id="section">
<h2>这是标题</h2>
<p>
这是内容
</p>
<p>
这是内容
</p>
</div>
<div id="footer">
天华信息教育
</div>
</body>
</html>

HTML基础教程:div元素实现布局

一点都不会程序也不懂程序,也从来没有接触过程序语言,能不能做前端网页布局,答案是肯定的,CSS层叠样式是一块不同于程序且与程序相似的一种语言。说它与程序相似因为它也像程序代码一样需要写且是英文一般的代码等特性。说它不同于程序是因为CSS代码不像程序需要通过服务器解释与处理,而是直接由浏览器解释而直接呈现给浏览用户。CSS是比较有规律非常简单且容易掌握的一种语言。您只需要记住掌握这些规律那就恭喜您已经会CSS。CSS有什么规律?第一就是有属于他自己的名称,也叫选择器,第二就是要有他的属性类似这种格式{key:value}。第三要把css名称放到html代码中,要想学会html就是多看别人的网页源代码总结经验,了解html基础可以多看看html相关教程,尤其是新手,一定要自己动手制作DIV与CSS页面,遇到问题要多问(问答)及多查看资料,多做笔记。进步成为高手的关键是自己动手多制作页面。在网页html中查看源代码会看到很多代码,包括html标签、css的标签等。

附​div与css布局代码:

用浏览器打开效果图:

么是DIV?
  DIV是层叠样式表中的定位技术,全称DIVision或叫做划分。在网站制作中DIV元素一般是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。当使用DIV+CSS布局的时候, 主要把它当做盒子然后把需要的文字,图像等内容放在DIV标签之中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。所以把它称作“层次”,或者直接就叫一段在 DIV 中的 HTML。

什么是CSS和CSS3?
  CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
  CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器360、chrome、safari、firefox、opera等都支持CSS3绝大部分功能,IE10以后也开始全面支持CSS3了。CCS3可以让使用者能更加快速地访问互联网。在CSS3语言下,不需要图片,仅用文字即可。这让网页的文字在变得越来越漂亮的同时,不会影响浏览速度,并且还能被搜索引擎搜索。
  现在国内用H5+css3做的网站越来越多,功能、交互等都给用户体验带来了很大的提升。在移动端,微信朋友圈的各种H5游戏更是把H5推向了高峰。H5+css3就是发展的趋势。