7定位、 圆角
2019-03-22 本文已影响0人
行之北斗
static默认定位，没有定位
position: relative;/* 相对定位:根据自身div的位置比较 /
position: absolute; / 绝对定位:根据上一级的div比较 /
position: fixed;/ 固定定位 /
border-radius: 50%;/ 圆角。将边角化为弧 */
固定定位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%; 变圆了
相关代码
<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
<!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
<!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);
}
项目实战 有路网首页轮播图
image
<!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>
