css 一些灵动性的小方法
CSS:
1.当鼠标放到一个图片上的时候,他会给你显示一些图片的信息或者是一些其他的信息。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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. 尖角图标,尖角符号是向上,当鼠标点的时候尖角符号向下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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. 模态对话框
就是弹出一个框,然后显示一些内容(其实是分为三层)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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 、输入框里面有图片
![](https://images2015.cnblogs.com/blog/938901/201607/938901-20160705161313530-995693612.png)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="123"> <span class="ren">r</span> </div> </body> </html>
商品加减框
![](https://images2015.cnblogs.com/blog/938901/201607/938901-20160705161415124-2049876136.png)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="456"> </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、当鼠标点上会出现边框 字体颜色会变
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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中