在前面一篇中我们介绍了纯CSS实现tooltip提示框，通俗的讲也就是CSS箭头及形状 不过注意一点是，他始终是一个元素，只是通过CSS实现的，今天我们要说的是给这个“tooltip提示框”整体加一个边框，下面是是一篇完成的截图（不了解的可以看看：纯CSS实现tooltip提示框，CSS箭头及形状）：首先像:after一样我们介绍另外一个CSS中“ :before ”选择器定义和用法：（参考w3school:before选择器） :before 选择器在被选元素的内容前...
方法一 ：使用弹性布局 方法二 ：CSS3 transform 属性父级元素定位子集元素加属性：position: absolute; top: 50%; transform: translateY(-50%);方法三： 使用伪元素和vertical-align: middle;.parent:after {content: ‘ ‘;height: 100%;vertical-align: middle;width: 0;}child {display: inline-block;vertical-align: middle;} 原文：https://www.cnblogs.com/SallyShan/p/11588386.html
之前做项目的时候，用opacity属性，但是这个属性用后，不但背景会半透明，背景上的文字也会变成半透明。显然用opacity属性实现这个效果是不可取的。在css3中我们可以用 background-color:rgba(); 来实现，rgb是背景要显示的颜色，a则是背景的透明度，从而实现我们想要的效果。本人亲自做过实验，希望可以帮到大家，谢谢。。 原文：http://www.cnblogs.com/bjwhite/p/6385904.html
一：要解决的问题时：在ie6-ie11下兼容以下透明上传文件按钮的效果。实现方式通过滤镜实现。二：效果图如下：三：代码:样式：.file2 {position: absolute;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*ie 8*/filter: alpha(opacity=0);/*ie 5-7*/opacity:.0;/*opera9.0+,firefox1.5+,safari,chrome*/width: 30px;height: 20px;line-height: 20px;cursor: pointer;padding: 0;overflow: hidden;padding-to...
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="container"><div class="cube"><div class="side side1"></div><div class="side side2"></div><div class="side side3"></div><div class="side side4"></div><div class="side side5"></div><div class="side side6"></div></div></div><div class="container container2"><div class="cube"><div class="sid...
HTML（使用方法）：复制代码代码如下:<link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.php?get=jquery-1.6.4.min.js,minjquery.js,minjquery.ui.js,test.js,global.js&path=js/&v=20131023"></script>PHP：复制代码代码如下://输出JSheader ("Content-type:application/x-javascript; Charset: utf-8");if(isset($_GE...
box{width: 0px; height: 0px; border: 100px solid; border-top-color: red; border-right-color: transparent; border-bottom-color: transparrent; border-left-color: green; }原文：https://www.cnblogs.com/mengzhongfeixue/p/11929917.html
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,user-scalable=no" /><meta charset="UTF-8"><title>Document</title><style type="text/css">body,html { margin: 0; height: 100%; overflow: hidden; position: relative;}.wrap { position: relative; height: 100%;} .view,.boxZ,.box { position: absolute; left: 50%; top: 50%; -webkit-transform-style: preserve-3d; transform...
<!DOCTYPEhtml><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body{ height:1000px;}.antzoen{ position:fixed; width:250px; height:100px; background:#ececec; left:50%; top:50%; margin-left:-125px; margin-top:-50px}</style></head><body><div class="antzoen"></div></body></html>可是这样的方法ie6不支持fixed属...
1.示意图 2.结构 3.wave.html代码<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>CSS实战 - 波浪</title><style type="text/css">.wave-box{border: 1px solid rgba(0,209,255,0.2);height: 78.5px;width: 78.5px;border-radius: 50%;overflow: hidden;margin: auto;position: relative;background: #eee;}.wave-box .text{font-size: 24px;color: #FFFFFF;letter-spacing: 0;position: absolute;z-index: 8...
越界省略号 复制代码代码如下:.text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ } 自动换行： 复制代码代码如下:word-break:break-all;/* 不换行 */ white-space:normal;/* 不换行 */...
终于在凌晨一点钟逼迫自己写博客。一直想记录自己的前端工程师之路，但毕竟拖延症晚期。因为第一篇随笔，所以多写一点废话吧。刚刚从学校毕业，放弃了一直学习的java，而想从事前端的工作。第一是觉得osgi这类的java框架实在太过笨重和繁琐，也许是真的好用，但也觉得真心不适合我。然后么，也许有点俗，前端真的能做很多华丽花哨的东西出来。到现在也工作一个月了，工资不高，老板不好，但社会毕竟不会总让人满意，没人有手把手教...
在开发中，我们经常需要使用到三列布局，即左右元素宽度固定，中间元素自适应。废话不多说，直接上代码：<div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div><style> .box{display: flex;height: 60px;width: 100%;background-color: red;} .center{flex: 1;background-color: yellow;} .left,.right{width: 60px;background-color: pink;}</style> 相比较之前使用的的浮动（flo...
html<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导航栏</title><link rel="stylesheet" href="css/test.css" /></head><body><div class="nav"><ul class="list"><li><a href="#"><b>Home</b><i>首页</i></a></li><li><a href="#"><b>Study</b><i>学习</i></a></li><li><a href="#"><b>Coursr</b><i>课程</i></a></li><li><a href="#"><b>Bbs</b><i>论坛</i></a></li><li><a href="#"><b>About</b><i>关于</i></...
复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidd...