CSS基础入门07
作者：互联网
一. 补充：
１ 如果定位的盒子没有宽高，那么默认宽高为0;
２ 如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽。
３ 透明度：
opacity:不透明度
赋值：opacity:0.5;
取值：在0-1之间的小数。
这个属性ie6不支持，如果要在ie6中设置透明，要用：
filter: Alpha(opacity=50);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.father{
background: red;
opacity:0.2;
width: 200px;
height: 200px;
margin:0 auto;
}
.son{
background: black;
width: 100px;
height: 100px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
二. margin补充：
１ 用法：
margin: 0 auto;
作用：让容器水平居中。
２ margin-right: auto;
作用：如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
３ margin设置为负数：
如果margin-left设置为负数，那么将来这个盒子会向左方向移动。
如果margin-right设置为负数，那么盒子会向右移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
float: left;
width: 200px;
height: 400px;
border: 10px solid #ccc;
/*margin-left: -10px;*/
}
div:hover {
position: relative;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
４ 圣杯布局：
特点：左右两边的内容保持不变，中间的内容可以根据屏幕的大小的改变而改变。
名称：双飞翼布局。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.head,.footer{
height: 100px;
background:gold;
}
.content{
padding:0 200px;
height: 300px;
background:pink;
}
.left{
float:left;
width: 200px;
height: 300px;
background:red;
margin-left:-200px;
}
.right{
float:right;
width: 200px;
height: 300px;
background:red;
margin-right:-200px;
}
.center{
float:left;
width: 100%;
height: 300px;
background:green;
min-width: 200px;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
<div class="left"></div>
<div class="center">
<img src="img/tbsprite.png" />
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
三. 滑动门：
１ 最基本的滑动门：
用三张图片完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
float: left;
}
span {
float: left;
width: 6px;
height: 35px;
background: url(img/01_l.png);
}
b {
float: left;
height: 35px;
line-height: 35px;
background: url(img/01_c.png);
}
i {
float: left;
width: 25px;
height: 35px;
background: url(img/01_r.png);
}
</style>
</head>
<body>
<div>
<span></span><b>导航1</b><i></i>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
list-style: none;
float: left;
padding-left: 6px;
background: url(img/01_l.png) no-repeat;
height: 35px;
float: left;
}
li a {
text-decoration: none;
color: blue;
background: url(img/01_c.png);
display: inline-block;
height: 35px;
float: left;
line-height: 35px;
}
span {
display: inline-block;
width: 25px;
height: 35px;
background: url(img/01_r.png) no-repeat;
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a><span></span></li>
<li><a href="#">导航导航22</a><span></span></li>
<li><a href="#">导航3</a><span></span></li>
</ul>
</body>
</html>
２ 中级滑动门：
用两张图片完
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
float: left;
list-style: none;
padding-left: 6px;
background: url(img/02_l.png) no-repeat;
height: 35px;
}
a {
display: inline-block;
height: 35px;
line-height: 35px;
background: url(img/02_r.png) no-repeat right top;
padding-right: 25px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>
３ 高级滑动门：
用一张图片完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
list-style: none;
float: left;
padding-left: 6px;
background: url(img/nb.png) no-repeat;
height: 35px;
}
a {
display: inline-block;
padding-right: 25px;
height: 35px;
line-height: 35px;
background: url(img/nb.png) no-repeat right top;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1导航1导航</a></li>
<li><a href="#">导航导航22</a></li>
<li><a href="#">导航3</a></li>
</ul>
</body>
</html>
四. 页面中常见的三角：
原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
１ 易讯网三角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
}
span {
position: absolute;
top: 5px;
display: inline-block;
width: 0;
height: 0;
border-width: 5px;
border-color: red transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
</style>
</head>
<body>
<div>这是一段文本<span></span></div>
</body>
</html>
２ 淘宝三角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
b {
position: absolute;
display: inline-block;
width: 0;
height: 0;
}
.one {
bottom: 0;
right: 0;
border-width: 30px;
border-color: transparent transparent transparent red ;
border-style: dashed dashed dashed solid;
}
.two {
bottom: 0;
right: 20px;
border-width: 30px;
border-color: transparent transparent transparent white ;
border-style: dashed dashed dashed solid;
}
</style>
</head>
<body>
<div>
<b class="one"></b>
<b class="two"></b>
</div>
</body>
</html>
标签：35px,07,入门,height,width,background,border,CSS,left 来源： https://blog.csdn.net/forever180/article/details/90266513