在HTML开发中如何利用DIV实现这样的布局？
拿去用
div主要的网页标题内容在这里侧边版权
首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。在CSS文件中设置DIV的边框，首先我们可以先给div一个宽度与高度。得到了宽度与高度后，如果我们没有边框，是看不到样式的。如果您的div中有内容，那么只是显示那些内容而已。接下来，添加一个border边框我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话，边框并不会显示，您现在可以刷新一下您的页面看一下，添加了border:1px后是否显示，答案是肯定不显示的，因为我们参数没有写完整。参加第二个参数颜色值，具体的颜色您可以百度搜索具体的样式值的代码，您可以使用基本色直接使用单词拼写也是可以的。最后一个参数是显示样式，您可以选择不同的样式来进行显示，我们这里使用的是实线的方式来实现。如果您使用的是一些专门用来做前端开发的软件，您输入后，会有一些提示，您如果选择不同样式来试一试看。添加了上述的三个属性后，您的div边框即可显示出来了。您可以根据您的需求，对边框做其他操作。
田字格布局，要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的，现在要做的是把四个大小相同的方块，排列成“田”字。第一步、新建html文档并搭建框架
新建一个TXT文档，重命名为“田子格布局.html”，然后用记事本打开，输入表头信息，已经html整体框架搭建。包括head与body。
第二步、DIV布局
分别复制4个不同的div作为4部分，并且分别命名为不同id；显示内容为块1、块2、块3、块4。
【提示】div在html里是单独占一列的（如果不控制），现在4个div布局完成。
【代码如下】
</head>
<body>
<div id="prat1">块1</div>
<div id="prat2">块2</div>
<div id="prat3">块3</div>
<div id="prat4">块4</div>
</body>
</html>
第三步、CSS控制4个DIV显示
输入style然后开始对4个div进行控制，分别对四个块进行大小和颜色的设定，处理之后在浏览器中打开显示如下图所示。
【提示】由于是田子格，所以四个div大小应该相同，为了可以区分颜色分别采用不同的颜色。
【代码如下】
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;/*边长200像素的蓝色方块*/
}
#prat2{
width: 200px;
height: 200px;
background: red;/*边长200像素的蓝色方块*/
}
#prat3{
width: 200px;
height: 200px;
background: yellow;/*边长200像素的蓝色方块*/
}
#prat4{
width: 200px;
height: 200px;
background: green;/*边长200像素的蓝色方块*/
}
</style>
第四步、使用浮动
在CSS里控制输入float：left；四个div全部输入一样内容，这时候看到的是四个并排的div，而没有达到想要的效果，如下图所示。
【代码如下】
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
</style>
第五步、清除浮动
在第三块上使用清除浮动clear：left；其余的代码保持不变，然后保存代码，刷新打开的页面，就会看到一个田字格了，如下图所示。
【代码如下】
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三块的就可以了。
【完整的代码】
<!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>田字格布局</title>
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id="prat1">块1</div>
<div id="prat2">块2</div>
<div id="prat3">块3</div>
<div id="prat4">块4</div>
</body>
</html>
中间红色那个DIV定义它的position，然后利用margin定位！！
下面三个你自己知道吧 最后一个 可以用绝对定位 然后调Top 或者直接调margin-top为负数
教你HTML5开发基本常识
随着HTML5行业的发展，国外HTML5开发者和后端开发者的比例是1:1。目前国内比例还在1:3以下，HTML5开发岗位人才缺口已经达到近50万。4.HTML5工程师需要学习？第一阶段是HTML页面结构和CSS3属性。HTML语句，HTML页面结构，css语法，样式属性，链接和样式标签，id属性，以及HTML语句中的其他相关属性。处理...
移动开发中HTML5能否替代本地程序?
替代是不可能的。最多是本地程序加个webview框架，套一个h5代码的网页，现实中有很多都这样搞的。
Web前端开发html要掌握哪些知识?
推荐你从这本书培养兴趣 HTML5+CSS3+JavaScript从入门到精通 它系统的整合了htmlcss和js的基础，有丰富的案例给你练习，这本书看完你从头到尾手lu一个网站不成问题，有了练习就会有成就感救能更乐意去探索和学习。这本书看完之后，我们继续进阶学习一下es6语法，当下所有开发基本上都是es6以后的语法...
零基础html5网站开发学习步骤方法
Web前端开发和采集工程师需要与上游交互设计师、可视化设计师和产品经理，以及下游服务器端工程师进行沟通，需要掌握很多技能。因此，本文从常识的广度出发，为Web前端开发和采集工程师提出一些建议。想要精通前端开发，至少要精通十条线，但这样的多面手在现实生活中并不多见，需要了解即可！可以说Html5开发的...
手机端的页面怎么开发,和web html有区别吗
在技术上，手机端的页面开发可以采用多种技术栈，如原生应用开发、Web应用和混合应用等。其中，Web应用由于其跨平台的优势，被广泛应用于移动端开发。在Web应用开发中，HTML5、CSS3和JavaScript等技术扮演着重要的角色。与Web HTML开发相比，手机端的页面开发需要特别注意移动端特有的API和特性，如触摸事件...
html 5 如何开发
html 5总的来说是文本，所有任何文本编辑器都可以。但是，有很多编辑器多了好多辅助功能，比如调试和语法高亮自动补完。写纯静态的网页，html5和html4也没区别，要所见即所得的就用dreamweaver，甚至直接photoshop切片输出html都可以，喜欢写源码的，用任何顺手的文本编辑器就可以了，不会vim的就推荐...
有什么方法用html开发桌面软件?
打包成功后，就能在输出目录HelloApp下的Hello-win32-x64目录中找到刚才打包好的Hello.exe应用程序，双击就能打开，如下：至此，我们就完成了将HTML打包为桌面应用程序，其实就是用HTML开发桌面程序。总的来说，整个过程很简单，就是配置有些麻烦，只要你熟悉一下相关过程和参数，多练习几遍，很快就能掌握...
html怎么设置图片垂直居中显示
2、第二步，在顶部head标签里引入外部CSS文件。当然，因为本例比较简单，就直接写在style标签里了。建议实际开发应该写在外部CSS文件中。3、第三步，在Body中写简单的html代码。在一个容器p中，给一个类名，然后加一个子p，命名类名，用来填充文字。子p中加一个h标签，引入文字，随便写几个文字。
如何在HTML中插入空格
在前端开发中，有时候需要在页面中添加空格，那么如何添加？本篇文章就给大家介绍在html页面中插入空格的方法，希望对大家有所帮助。【相关视频教程推荐：HTML教程】一、键入空格在html页面中，我们可以通过键入“空格”键来插入空格。例：在p.p1中键入一个空格，在p.p2中键入5个空格。注：此时是半角...
html中鼠标如何设置显示小手状?
材料\/工具：css 1、打开前端开发软件，新建一个html代码页面 2、在新建的html代码页面上找到<body>,在这个<body>标签里创建一个标签，a案例中使用的是<a>。代码：<a href=""> 大家好，鼠标放到我身上就可看到效果 <\/a> 3、为新家<a>添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在...
厉旭阿司： div是框架,css是样式, 先定义框架在定义样式,<div class=＂top＂></div>.top{width:20px;height:10px;} top的一个框,宽度20,高度10
沙坪坝区18920511779： html中div怎么用,请详细讲解!谢谢了 - ？
厉旭阿司： div是html的层,用css来控制层的样式,比如<div class=＂aaz＂>dddd</div> aaz这个样式可以设置这个层的样子,比如宽、高、边框什么的.具体可参考http://www.diybl.com/course/1_web/html/htmlshl/2008324/106636.html
沙坪坝区18920511779： html中div标签怎么用? - ？
厉旭阿司： <div></div> 就把DIV看成一个 纯净的箱子吧.....啥属性都没有....默认宽度100% 高度0 高度是 按DIV里的 内容而变高 也可以在 CSS里 设置 宽高....DIV就是 典型的 标签.. P UL LI 等 标签 用DIV 都能做...它们都是 以DIV的 基础+CSS 而形成的...以上 是本人理解 DIV的想法.....
沙坪坝区18920511779： 请问HTML达人div怎么用? - ？
厉旭阿司： <div class=＂...＂ id=＂...＂ align=＂...＂></div>是插入一个模块.其中class=＂...＂ id=＂...＂ 是标记,具体看你怎么设置的,比如做有三个模块,那么class=＂...＂ id=＂...＂ 就等于你其中的一个.align=＂...＂ 是置放这个模块的位置,一般有...
沙坪坝区18920511779： html中div标签怎么用? - ？
厉旭阿司： 就把DIV看成一个 纯净的箱子吧.....啥属性都没有....默认宽度100%高度0高度是 按DIV里的 内容而变高也可以在 CSS里 设置 宽高....DIV就是 典型的 标签.. P UL LI...
沙坪坝区18920511779： HTML中DIV怎么实现并排 - ？
厉旭阿司： 你现在写的是行内样式,如果样式都放在CSS文件里,那么你可以用link链接,例如:<LINK href=＂images/base.css＂ type=text/css rel=stylesheet> 也可以用import,例如:<style type=＂text/css＂> @import url(＂images/style.css＂);</style>
沙坪坝区18920511779： 如何用HTML中的DIV制造简单的登录界面(不需要有功能,只需要界面就行了,效果如图,XXX是背景) - ？
厉旭阿司： <h1> 用户登录 </h1> <div > <form> <div style=＂margin-bottom: 15px;＂> <div > <input type=＂text＂ name=＂username＂ id=＂email＂ placeholder=＂请输入用户名或邮箱＂ autocomplete=＂off＂ style=＂height: 40px;＂> </div> <div > <span ...
沙坪坝区18920511779： 如何在div中显示一个html页面 - ？
厉旭阿司： 可以采用ajax方式:ajax加载数据后,直接赋予 externalhtml.innerhtml 即可.
沙坪坝区18920511779： html中用div完成田字格的布局怎么弄 - ？
厉旭阿司： 这个比较简单,可以拆分一下,先上下布局,在子区域里左右布局.<div><div style=＂float:left;width:49%＂>上左</div><div style=＂float:rightwidth:49%＂>上右</div></div><div><div style=＂float:left;width:49%＂>下左</div><div style=＂float:rightwidth:49%＂>下右</div></div> 具体css自行设置 当然,先左右布局,在子区域里上下布局也行
沙坪坝区18920511779： 新手请教html怎样用div画出下面这个图的,就是在网页中画出正方形框? - ？
厉旭阿司： <html><head> <style> .main{width:1000px;margin:0 auto;border:1px solid red;} .main ul li{width:400px;height:400px;float:left;background:#000;list-style:none;margin:25px;} .cl{clear:both;} </style></head><body><div class=＂main＂> <ul> <li></li> <li...
