标签：
1.当鼠标放到一个图片上的时候，他会给你显示一些图片的信息或者是一些其他的信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch{ width: 200px; height: 200px; overflow: hidden; position: relative; } .touch .content{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; color: white; text-align: center; visibility: hidden; } .touch:hover .content{ visibility: visible; } .touch .content .c1{ font-size: 32px; padding: 30px 0; } </style> </head> <body> <div class="touch"> <div><img src="../day26/1.png" width="200" height="200"></div> <div class="content"> <div class="c1">ALEX</div> <div class="c2">500-1000(ri)</div> </div> </div> </body> </html>
实际分为三层 我们常用 ovrflow：hidden 把超出的内容给影藏 position：absolate 以 position：relative 定位 经常写于父级 常以它的父级点位
visibility: hidden; 隐藏 利用为类
visibility: visible; 可以将它显示出来 一般为了还可以啊看到下面的图片 可以定义它的透明度
2、在当前页面超出的内容我们让他变成滚动条
ovrflow：hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.pg_top{
height: 48px;
background-color: #dddddd;
}
.pg_body_menu{
position: absolute;
width: 180px;
background-color: blueviolet;
left: 0;
}
.pg_body_content{
position: absolute;
top: 48px;
left: 190px;
right: 0;
bottom: 0;
background-color: blueviolet;
overflow: auto; /*可以利用overflow变导航条*/
}
</style>
</head>
<body>
<div class="pg_top">
</div>
<div class="pg_body">
<div class="pg_body_menu">
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
<div class="pg_body_content">
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
</div>
</body>
</html>
3. 尖角图标，尖角符号是向上，当鼠标点的时候尖角符号向下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*.c1{*/
/*border-left: 30px solid yellow;*/
/*border-right: 30px solid red;*/
/*border-bottom: 30px solid green;*/
/*border-top: 30px solid black;*/
/*display: inline-block;*/
/*}*/
.c1{
border-top: 30px solid yellow;
border-left: 0px solid green;
border-bottom: 30px solid blue;
border-right: 30px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a1{
margin: 0 auto;
width: 800px;
height: 1000px;
background-color: #004B97;
}
.a2{
margin-top: 10px;
width: 829px;
height: 60px;
background-color: black;
float: right;
}
.c1{
margin-left: -29px;
border: 30px solid transparent;
border-left: 0px solid red;
border-top: 0px solid;
border-right: 30px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="a1">
<div class="a2">
</div>
<div class="c1">
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/pythonxiaokang/p/5643221.html
