![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
shilianweiyao
这个作者很懒,什么都没留下…
展开
-
最全的CSS浏览器兼容问题
http://www.68design.net/Web-Guide/HTMLCSS/37154-1.htmlCSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标转载 2015-05-09 10:20:41 · 267 阅读 · 0 评论 -
响应式布局三种@media
/*小屏幕(平板,iPad大于等于 768px)*/@media (min-width: 768px) {}/*中屏幕(桌面显示器大于等于 992px)*/@media (min-width: 992px) {}/*大屏幕(大屏幕桌面显示器 1200px)*/@media (min-width: 1200px) {}转载 2017-04-04 17:49:55 · 736 阅读 · 0 评论 -
媒体对象bootstrap组件
媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。display:table-cell实现兼容性的两栏自适应布局http://www.zhangxinxu.com/study/201010/table-cell-two-column转载 2017-04-04 16:00:02 · 357 阅读 · 0 评论 -
实现垂直居中
JS 实现垂直居中,利用line-height$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');$(window).resize(function(){ //($('.carousel-inner img')一直获得的是第一张图片,当调到别的图片,高度就变为0转载 2017-04-04 11:12:59 · 498 阅读 · 0 评论 -
line-height 行高的垂直居中性
hehhhheight:50px;paddlpadding:10px 10px;llililine-height:30px;logonlogo图片和文字垂直居中转载 2017-04-03 15:26:16 · 476 阅读 · 0 评论 -
:nth-of-type(n)父类中选择元素的第几个 :nth-child(n) 选择某个元素且是父类的第几个元素
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素..table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9;}bootstrap中条纹表格的使用:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型转载 2017-04-03 14:54:32 · 1175 阅读 · 0 评论 -
cursor: not-allowed; bootstrap禁用链接disabled
是一个红色的圈加一个斜杠,表示禁止的意思,似乎IE,chrome firefox 都能够正常显示,很好用原创 2017-04-11 09:55:01 · 738 阅读 · 0 评论 -
Bootstrap 实例 - 面包屑导航
.breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0";}原创 2017-04-11 09:45:47 · 1573 阅读 · 0 评论 -
手机端垂直居中
position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%);转载 2017-03-24 16:59:16 · 1422 阅读 · 0 评论 -
网页浮动图片的设置
#test{width:100px;height:263px;background:red;position:absolute;top:150px;left:0;z-index:10;}转载 2015-08-19 16:25:29 · 1821 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径转载 2015-05-25 17:08:55 · 538 阅读 · 0 评论 -
input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值 很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到 可以在input中加入a
input 的属性autocomplete 默认为on其含义代表是否让浏览器自动记录之前输入的值很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete="off" 来关闭记录系统需要保密的情况下可以使用此参数转载 2015-05-25 09:12:13 · 2021 阅读 · 0 评论 -
PlaceHolder的两种实现方式,表单
目前浏览器的支持情况浏览器IE6/7/8/9IE10+FirefoxChromeSafari 是否支持NOYESYESYESYES 然而,虽然IE10+支持placeholder属性,它的表现与其它浏览器也不一致IE10+里鼠标点击时(获取焦点)placeholder文本消失Firefox/Chrome转载 2015-05-23 18:32:15 · 873 阅读 · 0 评论 -
边框添加背景
-webkit-box-shadow: 0 3px 15px #666666;-moz-box-shadow: 0 3px 15px #666666;box-shadow: 0 3px 15px #666666;转载 2015-05-23 18:53:56 · 319 阅读 · 0 评论 -
解决子级用css float浮动 而父级div没高度不能自适应高度
方法一:对父级设置固定高度 - TOP此方法可用于能确定父级div内子级对象高度。假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果。1、完整div+css实例html代码(对父div加高度):> html> head> meta charset="utf-8" /> title>父div不自适应高度实例titl转载 2015-05-18 11:19:24 · 536 阅读 · 0 评论 -
CSS鼠标悬停图片上图片变灰 变色 半透明
一、DIVCSS5介绍与说明: - TOP看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被CSS设置为半透明样式。二、关键CSS代码: - TOPa:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;} 此CSS代码作用,设置鼠转载 2015-05-21 08:46:04 · 2444 阅读 · 1 评论 -
CSS white-space 属性
值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。pre-wrap保留空白符序列,但是正常地进行换行。pre-line合并空白符序列,但是保转载 2015-05-07 15:09:04 · 305 阅读 · 0 评论 -
列表两列布局 display:table-cell; *display:inline-block;
absolute绝对定位的非绝对定位用法,头像固定的,右侧自使用布局 我堆满零碎破败的意象, 在译文中捏造你的容颜。 或生或灭· 一笔带过瑟缩,一句写完执着。 等季节敲打丁零的飘落; 叶是寂静的秋脱离忧思, 花于树的种子滴落咫尺。 你于我异度... 我堆满零碎破败的意象,转载 2017-04-04 16:59:57 · 502 阅读 · 0 评论