效果：http://hovertree.com/texiao/css3/20/效果图：代码如下：<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texi...
ie6和ie7#tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9:root .test { color:#963\9; } /* IE9 only */ firefox@-moz-document url-prefix(){.bt_comment_ico{top:-1px;}} ie系列*html .ico_tj{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=‘http://#‘);}FILTER: progid:DXImageTransform.Microsoft.grad...
CSS选择器基础选择器元素选择器 类选择器 ID选择器通配符选择器匹配所有元素，一般用于兼容器 格式：*+声明块 例：*{color:red;}并集选择器 格式：元素或类或ID+","+元素或类或ID+声明块 例子：h1,h2,h3{color:red;}p,.container,#box{background-color:deeppink;} 层次选择器【子集选择器】 格式：父级元素名称+">"+子级元素名称+声明块 例子：div>p{color:red;}【后代选择器】 格式：祖先元素名称+"空格"+后代元素名称+声明块 例...
标签：<div><span css属性：width,height,padding:上下 左右; margin:上 右 下 左;position:absolute/relative/fixed/static; <p> css属性：font-family,font-size,font-weight,font-style,color,text-decoration,text-align:justify;letter-spa...
昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责 <!DOCTYPE html> <html...
前提：安装好openssl工具。通过windows cmd 命令进入 openssl工作目录如解压目录为：E:\ openssl-1.0.2-beta1则工作目录为E:\openssl-1.0.2-beta1\inc32\out32dll通过cmd >cd /d E:\openssl-1.0.2-beta1\inc32\out32dll建立证书存放目录：E:\ssl下面是使用opensll实现CA并签发证书的过程：1) 生成CA密钥CA作为一个权威机构，他本身也是使用证书来标识自己，CA本身也拥有私钥。在签发数字证书的过程中，CA的私钥主要用于加密用户证书...
1，定义 BFC为块级格式化上下文，也就是一块区域内的封闭空间，里面元素无论怎么样，都不会影响外部元素。2，触发条件html 根元素display的值为 inline-block、table-cell和table-caption中的任何一个position的值不为relative和staticoverflow的值为auto、scroll或者hiddenfloat的值不为none3，基本用途 1，去除margin重叠 BFC不会影响外面的元素，所以BFC元素肯定不会发生margin重叠，因为margin重叠会影响外面的元...
用纯css3和html来制作一些社交媒体的图标，虽然没有图片和javascirpt,css3配合 html也能实现这些图标。html代码如下：复制代码代码如下:<div class="content"> <ul> <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li> <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> ...
1、使用less 结合 html 的zend语法可以快速提高前段编码速度和效率2、less可以使用程序思维来书写css 代码使用方法1、使用js编译 1.下载http://www.lesscss.net/article/home.html 2.引入代码<script type="text/javascript" src="./less-1.5.0.min.js"></script> <link rel="stylesheet/less" type="text/css" href="main.less" /> 3.直接在.less 文件中书写less代码 2、使用lessc 编译工具以及使用sublime 插件直接保存编...
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 300px;margin: 100px auto;background: pink;opacity: 0.1;}#inner{width: 100px;height: 100px;background: deeppink;}</style></head><body><div id="wrap"><div id="inner">inner</div></div></body></html>设置文字阴影 <!DOCTYPE html><html><head><meta charset="UTF-8"><titl...
常见性能优化：1.CSS Spirite :css精灵，一种网页图片应用处理方式。加速的关键不是降低了重量，而是减少了个数，这样就减少了向服务器请求的次数，从而达到减少请求时间，横向还会减少图 片大小，也能提高性能。 （允许将一个页面涉及到的所有的图片（尤其是ico多的页面）都包含到一张大图中去，这样页面会一次性显示出该spirite包含的图像。而且对于<200k的图片加载速 度基本没差别。）...
1.在pycharm的已有工程中新建一个html文件。2.在<body></body>标签内部写入要内容：<div class=‘head-box‘ ><div class="content-box"><a href="#" class="logo"></a><div class="action-menu"><a href="#" class="tb active">全部</a><a href="#" class="tb">42区 </a><a href="#" class="tb">段子</a><a href="#" class="tb">图片</a><a href="#" class="tb">挨踢1024</a><a href="#" class="tb">你问我答</a></div><div clas...
好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：...
什么是CSS hack？由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的...