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 ...
随机推荐
- mac 上的 python
1.mac 上的 python 自己感觉很乱 1.额外安装的 自带的 python27-apple /System/Library/Frameworks/Python.framework/Versio ...
- int类型的正负数转换
int aid = -this.id; 不能直接转 必须先赋值给一个变量 int c = this.id; int a = c * (-1); this.id = a;
- Java多态与反射
多态通过分离做什么和怎么做,从另一个角度将接口与实现分离开来:通过多态来消除类型之间的耦合关系,在Java中,多态也叫动态绑定,后期绑定或运行时绑定,那么什么是方法绑定? 方法调用绑定: 将一个方法与 ...
- Windows7 + Ubuntu双系统安装过程记录
本文为在已安装Windows7系统的前提下安装Ubuntu Kylin 14.10系统的过程以及期间出现的各种问题的记录. Ubuntu系统下载 Ubuntu Kylin中文官方网站:http://w ...
- HFS远程命令执行漏洞入侵抓鸡黑阔服务器
先来科普一下: HFS是什么? hfs网络文件服务器 2.3是专为个人用户所设计的HTTP档案系统,如果您觉得架设FTP Server太麻烦,那么这个软件可以提供您更方便的网络文件传输系统,下载后无须 ...
- javascript——三元操作符
{{C?A:B}} C条件成立则为A,不存在取B 比如在跟后台交互时,有许多要设默认值 <script type=''text/javascript> var value = docume ...
- VIM下的跳转练习
在vim下可以使用常用的箭头键 但是 还有其它键可以让你更快的达到目标 hjkl 这是代替箭头键功能的 H M L 跳到屏幕的顶上 中间 下方 w 跳到下一个单词的开始e 跳到单词的结束b 向后跳 g ...
- Other Linker Flags到底是什么
一.问题描述 在项目开发中用到百度地图,有时候在工程中会报“方法找不到”的错误(unrecognized selector sent to instance). 二.问题分析 首先,要说明一下Othe ...
- 在db2数据库上模拟死锁场景 还是z上的
如果条件允许,起两个线程互相抢资源就行了,但问题是,时间上还需要同步,要做到完美控制,还得加其他逻辑,忒费事,所以可以用下面的办法: 在目标表上直接加个锁……简单,粗暴,直接……很好…… LOCK T ...
- 【转】Java Web 项目获取运行时路径 classpath
Java Web 项目获取运行时路径 classpath 假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么ja ...