DIV+CSS布局属性的基础的学习笔记！

最新推荐文章于 2021-08-03 22:56:07 发布

熊猫_water

最新推荐文章于 2021-08-03 22:56:07 发布

阅读量238

点赞数

分类专栏： html 文章标签： DIV css 网页美工 html

本文链接：https://blog.csdn.net/xxlovesht/article/details/80733395

版权

html 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

DIV+CSS布局属性

div和span

盒模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style type="text/css">
			*{margin: 0;}
			.d1{
				width:500px;
				height: 500px;
				background: #666;
				margin: 100px;
				border: red;
				padding: 40px;
			}
		</style>
	</head>
	<body>
		<div class="d1">
		<img src="timg.jpg" width="300" height="400"/></div>
	</body>
</html>

运行结果：

布局相关的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style type="text/css">
			.img1{position: absolute;
			    left: 100px;
			    top:160px;
			    border: red solid 2px;
			    z-index: 2;
			    display: none;}
			   
			.img2{position: absolute;
			    left: 100px;
			    top:160px;
			    border: yellow solid 2px;
			    z-index: 1;
			    display: block;
			    float: right;
			    }
		</style>
	</head>
	<body>
		<img src="timg.jpg" width="300" height="400"class="img1"/>
		<img src="timg.jpg" width="300" height="400"class="img2"/>
		<h1 style="position: absolute;left: 0; top:0;z-index: 1;color: red;">好好学习，天天向上</h1>
		<h1 style="position: absolute;left: 2px; top:2px;z-index: 2;color: blue;">好好学习，天天向上</h1>
		<h1 style="position: absolute;left: 4px; top:4px;z-index: 3;color: purple;">好好学习，天天向上</h1>
		<h1 style="position: absolute;left: 6px; top:6px;z-index: 4;color: gold;">好好学习，天天向上</h1>
		<h1 style="position: absolute;left: 8px; top:8px;z-index: 5;color: green;">好好学习，天天向上</h1>
	</body>
</html>

运行结果：

DIV+CSS布局属性

熊猫_water

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
DIV+CSS布局属性的基础的学习笔记！

DIV+CSS布局属性div和span盒模型：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;盒模型&lt;/title&gt; &lt;style type="text/css"&gt; *{margin:
复制链接

扫一扫