HTML - 布局div

最新推荐文章于 2024-02-18 19:14:26 发布
最新推荐文章于 2024-02-18 19:14:26 发布
阅读量1.7w 收藏 145
点赞数 33
分类专栏： Html 文章标签： html 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pipisorry/article/details/78929615
版权

http://blog.csdn.net/pipisorry/article/details/78929615

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

Note: table标签是不建议作为布局工具使用的 - 表格不是布局工具。table布局参考[使用 <table> 元素的网页布局]。

div元素布局

div 元素是用于分组 HTML 元素的块级元素。具体关于div标签参考[HTML - 元素/标签详解 HTML区块<div>和<span>]

div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left;"。其实其它元素，如img，也可以直接水平并排而不需要在外面加上div，只是img不会自动换行。

Note: 前一个div加上style="float:left;"就可以，最后一个不要添加，否则下一行的div就不会自动加上换行而是和上一行的水平并排了！

某小皮



div布局示例

示例1

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aaa(aaa.com)</title>
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © aaa.com</div>

</div>
 
</body>
</html>

示例2

                <div>
                    <img style="float:left;" src="images/verticalbar.png">
                    <span style="float:left;font-family:arial;font-size:3;" οnmοuseοver="red(this)" οnmοuseοut="black(this)">联系我们</span>
                    <span style="float:left;color: #C0C0C0"><small>&nbsp;Contact Us</small></span>
                    <span><a style="float:right;color:#C0C0C0;" href="#">More>></a></span>
                </div>
                <br>
                <div style="margin-top: 20px;">
                    <img style="float:left;" src="images/2.2.png" class="img-responsive">
                    <div style="float:left; margin-left: 20px; margin-top: 10px">
                        <img style="float:left;" src="images/phone.png" alt=" " class="img-responsive ">
                        <img style="margin-left: 50px;" src="images/qq.png " alt=" " class="img-responsive ">
                        <!-- class="img-responsive" add newline -->
                        <span style="font-size: small; ">全国服务热线：</span>
                        <br>
                        <span style="font-size: 3; font-weight: bold ">400-005-6621</span>
                    </div>
                </div>


from: http://blog.csdn.net/pipisorry/article/details/78929615

ref:


-柚子皮-
关注
  • 33
    点赞
  • 踩
  • 145
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 div布局与table布局详解
09-27
主要为大家详细介绍了html5 div布局与table布局，区分div布局与table布局的异同,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html如何布局div标签,用Div标签进行网页布局
weixin_39584571的博客
06-20 5505
一、插入Div标签可以通过手动插入Div标签并对它放们应用CSS定位样式来创建页面布局。要添加Div标签，将插入点放置在要显示Div标签的位置，选择【插入】>【布局对象】>【Div标签】，或在【插入】栏的“布局”选项卡中，单击【插入Div标签】按钮，打开【插入Div标签】对话框，如下图。如需指定类或ID，以便应用对应CSS样式，可以在弹出的【插入Div标签】对话框中指定。图1二、编辑D...
HTML板块左右排列布局——左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面
最新发布
qq_68725483的博客
02-18 709
我们可以借助CSS中的 float 属性来实现。
HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx
11-17
HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx
HTML---布局（详解）
Philo的博客
01-12 1万+
文章目录网页布局常用标签网页布局实例实例1:用div实现：实例2:用table实现 我们在完成老师布置的前端html任务时，往往布局是最关键的，我们必须先从宏观上把握页面大致的构成，通过标签先确定下页面总体有那些东西，将整体框架写好，之后才是对各个部分进行细致的填充。 网页布局常用标签 div：是块级元素，它可用于组合其他 HTML 元素的容器，它没有确切的含义，天生是用来进行页面布局的，除此之外，由于它属于块级元素，浏览器会在其前后进行换行。 table：是表格元素，每个表格均有若干行（由 &lt
DIV与TABLE的HTML布局
个人学习笔记库，一篇一篇记录成长的足迹
09-21 1146
DIV布局 div标签是块级元素，本身没有意义，用于其他元素的容器，由于div自带折行效果，因此div默认是列排列 // 两个div默认列排列 <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div style="background-color: black; width: 100px ; height
HTML之样式定义、div布局、按钮布局
晴天的博客
03-13 1万+
HTML之样式定义、div布局、按钮布局
Html5---div布局方式
C221127的博客
04-11 1154
1.div是块级元素：块级元素在页面中的独占一行默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div(盒子)和div(盒子)之间是上下排列的我们在实际的开发网页中，网页的整体部分一般是由div标签来进行布局的。当然在使用div布局之前就要了解div的属性还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素 但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动。
div的简单布局
m0_46179473的博客
04-02 1万+
div的简单布局 一、标签定义及使用说明： 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 **二、提示和注释** 提示： 元素经常与 CSS 一起使用，用来布局网页。 注释：默认情况下，浏览器通常会在 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。 **三、属性** *1、全局属性* 1）accesskey 设置访问元素的键盘快捷键。 2）class 规定元素的类名（classname） 3）cont
div的布局
qq_38964133的博客
07-15 3036
左边固定宽度 右边自适应布局 两栏自适应 左侧浮动 右侧使用margin-left <!--左边固定宽度 右边自适应布局 两栏自适应布局 --> <!DOCTYPE html> <html> <head> <title>自适应布局</title> <style> .containe...
h5的div布局详解
aibai666的博客
12-24 1万+
在实际的网页开发中，网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性 div是块级元素 块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div和div之间是上下排列的 还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素 但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动 如图所示，该页面的整体结构的搭建是使用div搭建的。主要有一个大的整体的..
HTML＋CSS＋DIV网页设计与布局.pdf
05-07
以html语言为基础，围绕最新的css技术精髓展开深入讲解，包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框边距、元素布局、网页...
B03-网页DIV布局速成教程
01-25
网页DIV布局速成教程：• 本教程假设你是零起点的初学者，或已经接触过一星半点理论知识； • 本教程将通过实例编程从一个全面和概要的角度来讨论HTML、CSS、JavaScript、C#和SQL等基础知识，你只要浏览这些教程并且...
HTML的五种经典布局方式（一）
小陈同学の博客
04-16 8150
一、浮动布局（float布局）（流动布局） 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 tip：使用float浮动时，margin:0 auto;使块元素居中将会失效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
HTML布局总结
2203_76017613的博客
04-11 2467
概括了前端布局的大部分解释及标注
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
多个div横向排列的几种方法
热门推荐
syq8023的博客
07-15 3万+
以下面这组 div 为例，group的高度由内容撑开 <div id="group"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </div> 显示结果如下为上下排列 常见的有三种方法可以让div横向排列，分别是flex 弹性盒模型、float 浮动和通过i...
div布局、table布局、flex布局、多列布局、网格布局 示例
ylnzzl的博客
04-20 3091
目录 基础代码 demo.html css/common.css div实用布局示例 代码 效果图 table布局 代码 效果图 flex布局 代码 效果图 多列布局 代码 效果图 网格布局 代码 效果图 基础代码 demo.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv.
HTML div布局
qq_64131715的博客
03-22 2252
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-.
html三行div布局
04-21
很高兴回答这个问题。HTML的三行布局可以使用flexbox或者grid布局实现。下面是一个使用flexbox布局的例子： HTML代码： ``` <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> ``` CSS代码： ``` .container { display: flex; flex-direction: column; height: 100vh; } .box1 { flex: 1; background-color: red; } .box2 { flex: 1; background-color: yellow; } .box3 { flex: 1; background-color: blue; } ``` 这个例子中， `container` div是一个容器，使用flexbox布局， `flex-direction` 属性被设置为 `column` ，这样三个div元素就垂直排列了。每个 `box` 元素都设置为 `flex: 1` ，这样它们会均匀地填充 `container` 的高度，每个元素的背景色也不同，方便区分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值