DIV布局与效果实战
参考
https://blog.csdn.net/jiary5201314/article/details/38336559
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
1、Height:设置DIV的高度。
2、Width:设置DIV的宽度。
-->
<div style="width:200px;height:200px;background-color:Black;">
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
margin:用于设置DIV的外延边距，也就是到父容器的距离。
-->
<div style="background-color:Black;width:500px;height:500px;">
<!--
40px：控制父容器上边界
80px：控制子容器到父容器左边界距离
60px：测试无任何效果
90px：测试五任务效果
-->
<div style="margin:40px 60px 90px 80px;width:200px; height:200px;background-color:red;">
</div>
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
margin-left:到父容器左边框的距离。
margin-right:到父容器右边框的距离。
margin-top: 到父容器上边框的距离。
margin-bottom:到父容器下边框的距离。
-->
<div style="width:300px;height:300px;background-color:Black;">
<div style="margin-left:50px; margin-top:50px; width:100px; height:100px;background-color:darkred;">
</div>
</div>
<div style="width:300px;height:300px;background-color:blue;">
<div style="margin-left:0px; margin-top:0px; width:100px; height:100px;background-color:greenyellow;">
</div>
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
padding:用于设置DIV的内边距。
padding的格式和margin的格式一样，可以对照学习。
可以看黑色DIV与蓝色DIV的边距来体会此属性的效果。
这是还需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中)，
比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。
-->
<div style="padding:20px 100px 20px 40px;background-color:Black;width:300px;height:300px;">
<div style="width:200px; height:200px;background-color:blue;"></div>
</div>
<div style="padding:0px 0px 0px 0px;background-color:Black;width:300px;height:300px;">
<div style="width:200px; height:200px;background-color:blue;"></div>
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
padding-left:左内边距。
padding-right: 右内边距。
padding-top; 上内边距。
padding-bottom: 下内边距。
-->
<div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;">
<div style="width:140px; height:140px;background-color:White;">
</div>
</div>
<div style="padding-left:0px;padding-top:0px;width:150px;height:150px;background-color:blue;">
<div style="width:140px; height:140px;background-color:red;">
</div>
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
position:设置DIV的定位方式。
position的属性中有static、fixed、relative、absolute四个属性。
常用relative和absolute。
若指定为static时，DIV遵循HTML规则；
若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移，但是此时不可使用层；
若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位；
若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果(期待高手指点原因)；
-->
<div style="width:200px; height:200px;background-color:Black;">
<div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;">
</div>
<div style="position:absolute; top:60px;left:160px; background-color:red;width:100px;height:100px;">
</div>
<div style="position:fixed; top:210px;left:210px; background-color:green;width:100px;height:100px;">
</div>
</div>
<div style="position:absolute; top:50px;left:50px; background-color:greenyellow;width:100px;height:100px;">
</div>
<div style="position:fixed; top:200px;left:200px; background-color:orange;width:100px;height:100px;">
</div>
<div style="position:static; top:200px;left:200px; background-color:white;width:100px;height:100px;">
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。
top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。
right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。
bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。
z-index:设置DIV的层叠顺序。数字越小，在最里层。
还要说明的是用z-index属性时，position必需要指定为absolute才行。
-->
<div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:red;z-index:3;">
</div>
<div style="position:absolute; top:60px;left:60px; width:100px; height:100px; background-color:Blue;z-index:2;">
</div>
<div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;z-index:1;">
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
font:指定DIV中文本的样式，其后可跟文本的多个样式。
font后可以跟文本样式的多个属性，如字体粗细、字体大小、何种字体等等。
-->
<div style=" font:bold 14px 微软雅黑;background-color:red">
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
font-family:设置要用的字体名称；
font-weight:指定文本的粗细,其值有bold bolder lighter等。
font-size:指定文本的大小。
font-style:指定文本样式，其值有italic normal oblique等。
color:指定文本颜色。
text-align:指定文本水平对齐方式，其值有center(居中) left right justify。
text-decoration:用于文本的修饰。其值有none underline overline line-through和blink的组合。
(在IE中无闪烁效果，FF中有效果。期待高手指点，)
text-indent:设置文本的缩进。
text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none。
-->
<div style="text-align:left; text-decoration:line-through blink; text-indent:60px;
text-transform:capitalize;color:red; font:bold normal 16px 微软雅黑; background-color:blue">
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
abcdefghijklmnopqRSTUVWXYZ
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
overflow:内容溢出控制，其值有scroll(始终显示滚动条)、visible(不显示滚动条，但超出部分可见)、
auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。
direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左)。 从测试来看：控制滑动块是在左还是在右。
line-height:指定文本的行高。
Word-spacing:字间距。从测试来看，表现处明月几时有开头的间距。
-->
<div style="font:16px 微软雅黑;width:600px;height:200px; word-spacing:5px; line-height:20px;
direction:ltr; overflow:auto;background-color:greenyellow">
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
</div>
<br />
<div style="font:16px 微软雅黑;width:600px;height:200px; word-spacing:50px; line-height:30px;
direction:rtl; overflow:auto;background-color:greenyellow">
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
border:设置DIV的边框样式
-->
<div style="border:dotted 4px black; background-color:Yellow; width:100px;height:100px;">
</div>
<!--
border-style:设置边框的样式。
border-width:设置边框的宽度。
border-color：设置边框的颜色。
-->
<label style="font-size:14px;">选择样式：</label>
<select id="bstyle" οnchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;">
<option selected="selected">none</option>
<option>dashed</option>
<option>dotted</option>
<option>groove</option>
<option>hidden</option>
<option>inset</option>
<option>outset</option>
<option>ridge</option>
<option>double</option>
<option>solid</option>
</select>
<div id="tdd" style="border-style:solid; border-width:2px; border-color:blue; width:100px;height:100px;background-color:gold;">
</div>
<!--
border是对四个边框同时进行设置。也可以单独对某一边或几个边进行设置，此时用以下属性：
border-top:设置上边框样式。
border-bottom:设置下边框样式。
border-left:设置左边框样式。
border-right:设置右边框样式。
说明：某一边框的某一样式也可单独设置，以上边框为例可以用：border-top-style、border-top-width、border-top-color来分别设置，由于使用各border相同，所以不在举例说明。
display:设置显示属性。其值有block、none,如果为none，div将不显示。
float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none。
background:设置DIV的背景样式。
-->
<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll; overflow:auto;border-top:dotted;border-bottom:solid;
border-left:inset;border-right:double;display:block">
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
background-color:设置背景颜色。
background-attachment:背景图像的附加方式，其值有scroll、fixed。
background-image:指定使有的背景图片。
background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、
repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)。
background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标
指定具体的位置。
-->
<div style="border-style:solid;background-color:Yellow; background-image:url(timg.jpg);
background-position:left top; background-attachment:scroll; width:600px;height:200px;">
</div>
<div style="border-style:solid;background-color:Yellow; background-image:url(timg.jpg);
background-position:left top; background-attachment:fixed; width:600px;height:200px;">
</div>
<div style="border-style:solid;background-color:Yellow; background-image:url(timg.jpg);
background-position:right bottom; background-attachment:fixed; width:600px;height:200px;">
</div>
</body>
</html>2 效果
实战
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试DIV</title>
</head>
<body>
<!--
<div style="width:100%">
表示让这个DIV的宽度为百分之百显示，这取决于父级的宽度。
如果父级为body，那么这个div就是跟浏览器的宽度相同。
如果父级为其他的DIV并且父级DIV有宽度，比如父级的DIV是500PX，那这时的div宽度就是500px。
style是样式表的意思，里面的width是宽度，宽度可以使用百分比，也可以用PX（像素）来表示。
https://blog.csdn.net/chengzhangbiji/article/details/42462631
注意：Html级元素默认宽度是100%；但是高度并不是100%，而仅仅是一行而已。
-->
<div style="width:100%;height: 100%;background-color: bisque;">
<!-- 第一行展示，两个div各占一半空间 -->
<div>
<div style="float: left;width: 50%;">
商品名称1：<input id="searchUserId1">
</div>
<div style="float: left;width: 50%;">
商品类型1：<input id="searchProductInfoId1">
</div>
</div>
<!-- 第二行展示 ，两个div是3:7-->
<div>
<div style="float: left;width: 30%;">
商品名称2：<input id="searchUserId1">
</div>
<div style="float: left;width: 70%;">
商品类型2：<input id="searchProductInfoId1">
</div>
</div>
<!-- 第三行展示，两个div是7:3 -->
<div>
<div style="float: left;width: 70%;">
商品名称3：<input id="searchUserId1">
</div>
<div style="float: left;width: 30%;">
商品类型3：<input id="searchProductInfoId1">
</div>
</div>
<!-- 第四行展示，两个div各占一半，但第2个div是右对齐 -->
<div>
<div style="float: left;width: 50%;margin-top: 0.5%;">
商品名称4：<input id="searchUserId2">
</div>
<div style="float: left;width: 50%;text-align: right;margin-top: 0.5%;">
商品类型4：<input id="searchProductInfoId2">
</div>
</div>
<!-- 第五行展示，增加了margin-top属性 -->
<div>
<div style="float: left;width: 100%;margin-top: 0.5%">
时间范围5：<input id="searchStartTime">- <input id="searchEndTime">
<div style="float: right;width: 50%;text-align: right;">
商品类型5：<input id="searchUserType">
</div>
</div>
</div>
<!-- 第六行展示，增加了margin-top属性 -->
<div>
<div style="float: left;width: 100%;margin-top: 0.5%">
时间范围6：<input id="searchStartTime">- <input id="searchEndTime">
<div style="float: right;width: 50%;text-align: right;">
商品类型6：<input id="searchUserType">
</div>
</div>
</div>
<!-- 第七行展示，注意 margin-right: 4%-->
<div>
<div style="float: right;margin-top: 0.5%;width: 100%;text-align: right;margin-right: 4%;">
<button type="button">
搜索
</button>
<button type="button">
导出
</button>
</div>
</div>
<!-- 第八行展示，注意没有 margin-right: 4%-->
<div>
<div style="float: right;margin-top: 0.5%;width: 100%;text-align: right;">
<button type="button">
搜索
</button>
<button type="button">
导出
</button>
</div>
</div>
<!-- 第九行展示，注意 margin-right: 0%-->
<div>
<div style="float: left;width: 100%;margin-top: 0.5%">
<button type="button">
搜索
</button>
<button type="button">
导出
</button>
</div>
</div>
<!-- 第十行展示，注意 float: left-->
<div>
<div style="float: left;width: 100%;margin-top: 0.5%;margin-left: 4%;">
<button type="button">
搜索
</button>
<button type="button">
导出
</button>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
}
</style2 效果
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
