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="" height=""></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>
4. 模态对话框
就是弹出一个框，然后显示一些内容（其实是分为三层）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.q1{
background-color: #004B97;
height: 2000px; }
.q2{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 2;
}
.q3{
width: 300px;
height: 300px;
background-color: yellow;
color: #000000;
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
margin-left: -200px;
margin-top: -200px;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<div class="q1">
<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>
</div>
<div class="q2"></div>
<div class="q3">qqqqq</div> <!--<div class="q3"></div>--> </body>
</html>
5 、输入框里面有图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.q1{
position: relative;
width: 250px; }
.q1 input{
height: 30px;
width: 150px;
padding-right: 50px;
float: left;
}
.q1 .ren{
position: absolute;
top: 8px;
left: 170px;
float: left;
}
</style>
</head>
<body>
<div class="q1">
<input type="text" value="">
<span class="ren">r</span> </div> </body>
</html>
商品加减框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
float: left;
}
.wrap{
height: 22px;
width: 150px;
border: 1px solid #ddd;
}
.wrap .minus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.wrap .count input{
padding: 0;
border: 0;
width: 104px;
height: 22px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
.wrap .plus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
/*.wrap .count input{*/
/*padding: 0;*/
/*border: 0;*/
/*width: 104px;*/
/*height: 22px;*/
/*border-left: 1px solid #dddddd;*/
/*border-right: 1px solid #dddddd;*/
/*}*/ </style>
</head>
<body>
<div class="wrap">
<div class="minus left" onclick="Minus();">-</div>
<div class="count left">
<input id="count" type="text" value="">
</div>
<div class="plus left" onclick="Plus(); ">+</div> </div>
<script type="text/javascript">
function Plus() { var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str);
var new_int = old_int + 1;
document.getElementById("count").value = new_int;
}
function Minus() {
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str);
var new_int = old_int - 1;
document.getElementById("count").value = new_int
} </script> </body>
</html>
6、当鼠标点上会出现边框 字体颜色会变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.q1{
background-color: #004B97;
border: 1px solid transparent;
}
.q1:hover{
border: 1px solid red;
}
.q1:hover .q3{
color: red;
}
</style>
</head>
<body>
<div class="q1">
<div class="q2">1111</div>
<div class="q3">2222</div>
</div>
</body>
</html>
7 、cursor:pointer: 变小手
8、z-index 在同一位置定义两标签（都定住，那么后面的标签回哪前面的标签覆盖掉，这样我们就可以用z-index的大小来决定位置）
<"position:fixed;left:0;right:0;height:50px;"></div>
<div style="position:fixed;left:0;right:0;height:50px;"></div>
9、 页面中的小图标
1、自己用css画
2、用别人的 http://fontawesome.io/3.2.1/icons/ 下载并导入 <link rel="stylesheet" href="font-awesome/css/font-
awesome.css">
10 、 目录格式
HTML 文件放到APP中
css样式放到css文件夹中
js文件放到script 文件中
下载的第三方插件放到plugin中