html div 浮动_随笔

不知道是不是这个效果，代码：

</div>

设置div样式 z-index:auto

auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。

前提是div是定位元素代码实例如下：

1、<html>

2、 <body>

3、<style type="text/css">

3、.div1{ width: 200px height: 100px background: red float: left }

5、.div2{ width: 300px height: 350px background: yellow }

6、</style>

7、 <div class="div1"></div>

8、<div class="div2"></div>

9、 </body>

10、</html>

扩展资料

一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘 *** 作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

参考资料

百度百科-html

新建一个html网页，在body中插入【<div class="content"></div>】并引入CSS【.content{width: 420pxheight: 100pxbackground: #d4d4d4padding: 5px 0 5px 5px}】。

请点击输入图片描述

在大DIV中插入一个DIV【<div class="a"></div>】并引入CSS【.a{width: 100pxheight: 100pxmargin-right: 5pxbackground: #ff0000}】定义它的高，宽，外边距，背景色。

请点击输入图片描述

继续添加一个同级的DIV【<div class="a b"></div>】并引入样式a和样式b，样式B只定义背景色【.b{background: #FF5F00}】。可以看到第2个DIV排到了第一个的下方位置。

请点击输入图片描述

按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【<div class="a c"></div><div class="a d"></div>】。然后引入CSS【.c{background: #FFED00}.d{background: #00FF93}】。刷新后可以看到预览效果是4个IDV垂直排列的，怎么能让他们水平排列在一行呢？

请点击输入图片描述

为了方便朋友们查看顺序，把4个DIV分别插入一个数字，相当于给他们编一个号码。

请点击输入图片描述

接下来就要用到浮动代码了。在4个DIV共用的a样式中，加入左浮动【float: left】。保存并刷新网页可以看到已经都在一行上了，而且是按照编码顺序从左到右排列的。

请点击输入图片描述

我们再来试一下右浮动【float:right】，可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？

请点击输入图片描述

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6103660.html

html div 浮动

发表评论

评论列表（0条）