目标
- 定位
- z-index
- 透明度
定位
四种方式
默认定位static
相对定位relative（做一个参照物）
绝对定位absolute(相对于父类的偏移)
固定定位fixed（固定在指定位置）
如果设置定位方式position属性
**static 标准文档流 **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.test{
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<span>1213</span><a href="#">链接</a>
<p>测试默认定位</p>
<div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
相对定位relative：相对于我来定位（指有子类的情况下）
他自己还可以参照自己应该在的位置（标准文档流）进行偏移
相对于我（做参照物的情况不用写top left right bottom）
position:relative
如果自身也想偏移，在position的基础上也可以设置上下左右的偏移量
position:realative
top:***
left:
right:
bottom:
绝对定位：参照第一个有定位的祖先元素进行定位，如果祖先元素都无定位，他就参照body进行定位
position:absolute
top:***
left:
right:
bottom:
固定定位：固定在指定位置，不管窗口里面的其他内容是否超出一屏，固定定位的内容都不动，一般用于做网站顶部导航搜索广告
圆角属性
border-radius: 50%; 变圆了
border-top-left-radius: 50%; 可以单独设置在某个方向上圆角
相关代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
练习:做微信消息提示
仅供参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 100px;
height: 100px;
border: 1px solid green;
position: relative;
font-size: 20px;
line-height: 100px;
text-align: center;
}
.dot{
width:20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 90px;
top:-10px;
font-size: 5px;
line-height: 20px;
}
</style>
</head>
<body>
<div class="content">微信
<div class="dot">2</div>
</div>
</body>
</html>
zindex和透明度
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
image
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="../images/04.jpg" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wai{
width: 200px;
height: 200px;
background-color: chartreuse;
z-index: 1;
}
.li{
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div class="wai">
<div class="li">12333333</div>
</div>
</body>
</html>
网页元素透明度
CSS设置元素透明度
opacity:x
x值为0~1，值越小越透明
opacity:0.4;
filter:alpha(opacity=x)
x值为0~100，值越小越透明
filter:alpha(opacity=40);
练习 香山红叶
image.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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">京秋魅力•相约共赏香山红叶</li>
<li class="tipBg"></li>
<li>时间：11月16日 星期六 8:30</li>
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
</ul>
</div>
</body>
</html>
@charset "gb2312";
/* CSS Document */
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);
}
div实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parent {
width: 332px;
height: 190px;
border: 1px solid #808080;
padding: 6px;
}
#item-1 {
position: relative;
}
#item-1-1 {
position: absolute;
top: 100px;
left: 90px;
z-index: 2;
color: white;
font-size: 12px;
height: 26px;
line-height: 26px;
}
#zhao {
width: 332px;
height: 26px;
opacity: 0.4;
position: absolute;
top: 100px;
background: #000000;
z-index: 1;
}
#item-2,
#item-3 {
font-size: 12px;
padding: 6px 0px;
}
</style>
</head>
<body>
<div id="parent">
<div id="item-1">
<img src="maple.jpg" width="332px" />
<div id="zhao"></div>
<div id="item-1-1">京秋魅力•相约共赏香山红叶
</div>
</div>
<div id="item-2">时间：11月16日 星期六 8:30</div>
<div id="item-3">地点：朝阳区西大望路珠江帝景K区正门前集合</div>
</div>
</body>
</html>
项目实战 有路网首页轮播图
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="reset.css" rel="stylesheet">
<style>
.lunbotu{
/*border: 1px solid blue;*/
width: 750px;
position: relative;
}
.lunbotu ul{
position: absolute;
right: 12px;
bottom: 20px;
/*border: 1px solid orange;*/
}
.lunbotu ul li
{
color: white;
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
text-align: center;
line-height: 20px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="lunbotu">
<img src="dazhuanpan.jpg">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
固定定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.abc {
width: 200px;
height: 200px;
background-color: red;
border: 2px solid yellow;
position: fixed;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>