html+css复习(六)

最新推荐文章于 2024-07-15 13:24:30 发布

df5465695

最新推荐文章于 2024-07-15 13:24:30 发布

阅读量189

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/df5465695/article/details/126221121

版权

1.static定位

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>
CSS:
div {
	margin:10px;
	padding:5px;
	font-size:12px;
	line-height:25px;
}
#father {
	border:1px #666 solid;
	padding:0;
}
#first {
	background-color:#f2bb6f;
	border:1px #B55A00 dashed;
}
#second {
	background-color:#003580;
	border:1px #0000A8 dashed;
}
#third {
	background-color:#f3f3f3;
	border:1px #395E4F dashed;
}

2.relative定位

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>
CSS:
body{
	padding: 20px;
}
div {
	margin:10px;
	padding:5px;
	font-size:12px;
	line-height:25px;
}
#father {
	border:1px #666 solid;
	padding:0px;
}
#first {
	background-color:#f2bb6f;
	border:1px #B55A00 dashed;
	position:relative;
	top:-20px;
	left:20px;
}
#second {
	background-color:#003580;
	border:1px #0000A8 dashed;
}
#third {
	background-color:#f3f3f3;
	border:1px #395E4F dashed;
	position:relative;
	right:20px;
	bottom:30px;
}

3.浮动元素使用relative定位

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>
CSS:
body{
	padding: 10px;
}
div {
	margin:10px;
	padding:5px;
	font-size:12px;
	line-height:25px;
}
#father {
	border:1px #666 solid;
	padding:0px;
}
#first {
	background-color:#f2bb6f;
	border:1px #B55A00 dashed;
	position:relative;
	right:20px;
	bottom:20px;
}
#second {
	background-color:#003580;
	border:1px #0000A8 dashed;
	float:right;
	position:relative;
	left:20px;
	top:-20px;
}
#third {
	background-color:#f3f3f3;
	border:1px #395E4F dashed;
}

4.absolute定位

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>
CSS:
body{margin:0;}
div {
	padding:5px;
	font-size:12px;
	line-height:25px;
}
#father {
	border:1px #666 solid;
	margin:10px;
	position:relative;
}
#first {
	background-color:#f2bb6f;
	border:1px #B55A00 dashed;
}
#second {
	background-color:#003580;
	border:1px #0000A8 dashed;
	position:absolute;
	/* top: 0; */
	right: 30px;
	/*top: 30px;*/
	/* right:30px; */
}
#third {
	background-color:#f3f3f3;
	border:1px #395E4F dashed;
}

5.fixed定位

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fixed的使用</title>
    <style>
        body{
        height: 1000px;
        }
        div:nth-of-type(1) {  /*第一个div设置绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {  /*第二个div设置固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6z-index属性

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>z-index属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
  <ul>
    <li><img src="image/maple.jpg"  alt="香山红叶" /></li>
    <li class="tipText">京秋魅力&#8226;相约共赏香山红叶</li>
    <li class="tipBg"></li>
    <li>时间：11月16日 星期六 8:30</li>
    <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
  </ul>
</div>
</body>
</html>
CSS:
ul, li {
	padding:0px;
	margin:0px;
	list-style-type:none;
}
#content {
	width:331px;
	overflow:hidden;
	padding:5px;
	font-size:12px;
	line-height:25px;
	border:1px #999 solid;
}
#content ul {
	position:relative;
}
.tipBg, .tipText {
	position:absolute;
	width:331px;
	height:25px;
	top:100px;
}
.tipText {
	color:#FFF;
	text-align:center;
	/*z-index:1;*/
}
.tipBg {
	background:#000;
	opacity:0.5;
	filter:alpha(opacity=50);
}