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 ...
随机推荐
- 自动化运维工具Ansible详细部署 （转载）
自动化运维工具Ansible详细部署 标签:ansible 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://sofar.blog. ...
- tyvj1005 采药
描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:“孩子,这个山洞 ...
- 【Alpha】Daily Scrum Meeting第十次
一.本次Daily Scrum Meeting主要内容 每个人学习情况 测试的任务的安排 Alpha版本展示的具体内容 二.任务安排 学号尾数 昨天做的任务 今天做的任务 任务用时 612 完成将计时 ...
- 深入浅出iOS事件机制
原文地址: http://zhoon.github.io/ios/2015/04/12/ios-event.html 本文章将讲解有关iOS事件的传递机制,如有错误或者不同的见解,欢迎留言指出. iO ...
- 分享一些前端开发中最常用的JS代码片段~ 干货~
http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html
- git 教程（15）--分支管理策略
通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- mybatis动态sql
MyBatis 采用功能强大的基于 OGNL 的表达式来消除其他元素. if choose(when,otherwise) trim(where,set) foreach 例子(2): &l ...
- Oracl基础知识（一）
概述 Oracle功能繁多,接触Oracle不深,将接触到的基础知识整理下来,以便不时之需.整理的内容主要有Expdp指令实现数据库备份,Impdp指令实现数据库还原,以及用户.表空间的定义.整理的数 ...
- 哈，我自己翻译的小书，马上就完成了，是讲用python处理大数据框架hadoop,spark的
花了一些时间, 但感觉很值得. Big Data, MapReduce, Hadoop, and Spark with Python Master Big Data Analytics and Dat ...