CSS:
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>
时间： 2024-11-15 09:29:32