css 一些灵动性的小方法
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中
css 一些灵动性的小方法的更多相关文章
- 提高CSS文件可维护性的五种方法
当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...
- 【转】CSS Sprites教程大全（使用方法、工具介绍）
什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
- 使用CSS禁止textarea调整大小功能的方法
这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐 ...
- jQuery提供的小方法
jQuery提供的小方法: 1.选择器 + 事件 + 函数 = 复杂的交互 2.循环处理与选择器匹配的各个元素:each() $("#").each(function(){ ...
- Web 性能优化：21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- Animo.js ：一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 引用CSS文件到html网页里方法
引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...
随机推荐
- xen下离线读取虚拟机磁盘镜像的补丁
之前在xen-3.4.2和xen-4.1.2下做过几个基于qemu模拟器的补丁,就是想着不用通过xm create(xen3下面)或xl create(xen4下面)启动虚拟机,而能直接去解析磁盘镜像 ...
- (PPT)Linux服务器基础
- iOS为真机调试增加scribble来定位野指针
尽管在ARC中,野指针出现的频率已经大大降低了,但是仍然会有野指针困扰着我们. 在模拟器调试中,我们可以开启scribble或者zombieObject来将已经释放的内存填充无意义的内容,能够将一些非 ...
- js倒计时，显示NaN天NaN时NaN分（或显示天时分）
最近在开发跨平台的应用,在做秒杀功能时,倒计时出现了问题.默认在Chrome浏览器中运行,倒计时没出现问题.而在IE浏览器,火狐浏览器,safari浏览器上运行时,则显示NaN天NaN时NaN分(或显 ...
- Spring MVC+FreeMarker简介
最近做项目,刚接触到SpringMVC与FreeMarker框架,就简单介绍一下自己的理解,不正确的地方请大家指教!! 1.Spring MVC工作原理: 用户发送请求--->前端服务器去找相对 ...
- System Error Codes
很明显,以下的文字来自微软MSDN 链接http://msdn.microsoft.com/en-us/library/windows/desktop/ms681382(v=vs.85).aspx M ...
- position：fixed 属性在iphone 中不起作用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。
重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...
- 利用委托与Lambada创建和调用webapi接口
前言 现在项目中用的是webapi,其中有以下问题: 1.接口随着开发的增多逐渐增加相当庞大. 2.接口调用时不好管理. 以上是主要问题,对此就衍生了一个想法: 如果每一个接口都一个配置文件来管 ...
- NSString使用stringWithFormat拼接的相关知识
NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...