
css
Inuyasha1121
这个作者很懒,什么都没留下…
展开
-
css z-index深入理解
问题:在 接下来的HTML里 有三个元素,并且每个里包含一个元素。每 个被分别给定一个背景颜色:红、绿、蓝。每个被放置到文档的左上角附近,部分重叠着其他 的元素,这样你就可以看到哪些是被堆叠在前面。第一个有一个z-index的值为1,而其他两个没有任 何z-index值。以下就是这个HTML和它的基本CSS。HTML代码转载 2014-10-15 15:20:20 · 1135 阅读 · 0 评论 -
Html的空格显示
一、使用全角空格全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。二、使用空格的替代符号替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示。空格的替代符号有以下几种:名称编号描述 不断行的空白(1个字符宽度) 转载 2016-05-17 13:35:01 · 1364 阅读 · 0 评论 -
html5下让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向转载 2016-05-03 16:23:47 · 6281 阅读 · 3 评论 -
常用的HTML特殊字符大全(css3 content)
之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移动端的页面,兼容性很好,content用法不仅仅简单,而且很利于页面打开!今天就说是css3的content用法!这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8;下面符号列表的后面有两列编号,它们并不太一样,第一列是用于html的,你需要在前面转载 2016-04-20 09:21:06 · 12860 阅读 · 0 评论 -
跨浏览器兼容css3样式
IE9+才开始支持CSS3的一些属性,而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法filter:progid:DXImageTransform.Microsoft.xx(attr1=xx,attr2=xx)IE8又引入了特殊的-ms-filter,IE认为这种写法是对旧写法的一次更正,更符合规范,这个写法的属性值只是多了一对引号,效果同前:原创 2016-06-04 17:01:49 · 1652 阅读 · 0 评论 -
css去掉button点击后的蓝框
css控制Button 按钮的点击时候出现蓝色边框的问题添加css属性,这样在点击安按钮的时候就不会有蓝色边框了。button{outline:none;}转自:http://www.inbeijing.org/archives/1139转载 2016-07-12 08:15:21 · 53641 阅读 · 0 评论 -
css去掉a标签点击后的虚线框
outline是css3的一个属性,用的很少。声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。outline控制的到底是什么呢?当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、转载 2016-06-23 15:09:29 · 2033 阅读 · 0 评论 -
认识DHTML中的“behavior”组件
在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复书写HTML、CSS和JAVASCRIPT的代码,以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组转载 2016-08-08 17:05:18 · 502 阅读 · 0 评论 -
让火狐等浏览器也能使用HTC(HTML component)的方法
HTML组件(HTML conponent)是DTHML里的东西,相信现在大部分的web开发或者是网站都不使用DHTML了。它只能在IE下有直接的支持,它直接在样式表中用behavior: url(htcfilename.htc);来指示样式的行为使用的htc文件,IE支持behavior,但火狐不能支持。如何让火狐等浏览器也支持htc呢,这里有个已实现的示例:转载 2016-08-09 09:52:52 · 1655 阅读 · 0 评论 -
css实现图片等比例缩小不变形
当图片未知大小时,为了使图片在一个规定大小的div中全部显示,可以对图片使用max-width和max-height,这样图片就会按照对大的宽或高等比例缩放图片,图片相对不变形清晰。转载 2016-09-23 17:03:06 · 7312 阅读 · 0 评论 -
网页特殊符号大全
网页特殊符号HTML代码大全HTML特殊字符编码大全:往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 ´&ac转载 2016-10-12 15:59:22 · 4126 阅读 · 0 评论 -
CSS选择器效率问题
有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能。这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候。下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站。但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的。CSS选择器:转载 2016-10-19 13:59:53 · 471 阅读 · 0 评论 -
七个高度有效的媒体查询技巧
本文由大漠根据Brad Frost的《7 Habits of Highly Effective Media Queries》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries,以及作转载 2017-01-09 11:24:54 · 4767 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
转载自:http://www.cnblogs.com/xcxc/p/4531846.html优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,@me转载 2016-03-02 08:36:46 · 70477 阅读 · 6 评论 -
去掉谷歌浏览器输入框默认的黄色背景
谷歌浏览器登录页记住密码后下次登录会自动填充,并且有黄色背景。谷歌浏览器的设置如下:input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; col转载 2017-10-23 13:14:36 · 2062 阅读 · 0 评论 -
CSS- 横向和纵向时间轴
转自:https://www.cnblogs.com/xiaofeixiang/p/5036154.html简单的实现了一下横向和纵向时间轴,可以简单的看下一下实现的效果:Html代码: 原文地址:http://www.cnblogs.com/xiaofeixiang/ 成立 合作 发转载 2017-12-25 09:37:49 · 32044 阅读 · 3 评论 -
HTML+CSS+JQUERY漂亮的垂直时间轴
转自:https://www.cnblogs.com/sanshi/p/3229220.html一个简单、漂亮的数据展示方式,很快我找到了这个例子:http://tympanus.net/Blueprints/VerticalTimeline/这个界面风格给人眼前一亮的感觉。在快速浏览之后,我发现这里面用到了内嵌字体和CSS3的诸多知识来生成哪些漂亮的图片,所以在IE7转载 2017-12-25 09:45:26 · 6178 阅读 · 0 评论 -
换行过长文字 固定表格的长度
在HTML页面建立一个表格,如果表格里的内容出现很长一串英文字符,表格就会被撑开,整个页面就会被打乱,会非常难看,即使设置了宽度也不管用。这时候,如果我们希望把URL地址自动换行,就需要加入下面的代码: table { table-layout:fixed; word-break: break-all; word-wrap: break-word; } 其中tab转载 2015-07-20 15:41:28 · 2763 阅读 · 1 评论 -
background-position 用法详细介绍
转载自:http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html语法: background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成转载 2016-03-01 09:30:03 · 532 阅读 · 0 评论 -
网页设置背景图片
一、设置背景body{ background-image:url(xx/xx.png); background-repeat:no-repeat; background-position:center; background-size:100% 100%; (这个为css3属性,不能连起来写在background中)}二、设置原创 2016-03-01 09:23:41 · 2511 阅读 · 0 评论 -
解决chrome下textarea控件滚动条不好使情况
chrome 默认是允许更改编辑框大小的,可取消这个特性原创 2014-10-15 13:06:38 · 2636 阅读 · 0 评论 -
DIV+CSS开发浏览器的兼容性
1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。2.ff下容器高度转载 2015-01-29 12:58:14 · 629 阅读 · 0 评论 -
解决CSS中float:left后需要clear:both清空的繁琐步骤
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发。现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS、Jquery。 现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的。具我所知,要达到这种效果,有几种方法可以实现。 1.传统处理方式:1li {floa转载 2015-04-01 22:35:31 · 3144 阅读 · 0 评论 -
固定顶部导航栏
.topNav{/* 对于其他浏览器 */position: fixed;/* 固定位置 ie6不支持该属性 */top:0px;/* 对于 IE6 */_position: absolute;_top: expression(eval(document.documentElement.scrollTop) + "px");/*采用以上代码,拉动垂直滚动条时,这转载 2015-05-07 11:18:33 · 2091 阅读 · 0 评论 -
设置hr元素颜色
说到颜色变化,大家首先想到的都是color,但是color一般都是针对字体颜色的,线条需要用background-color,但是单纯的将背景色设为蓝色是不够的,线条还是灰色的,我们需要给线条一个高度,也就是我们需要的1px这样设置完后,在浏览器中可以看到线条变粗了,而且原来的灰色好像还是存在的其实,hr是有默认的border的,我们需要将它的边框去掉,设为border:none转载 2015-07-15 12:45:25 · 41417 阅读 · 0 评论 -
JS、CSS控制滚动条显隐
div显示滚动条的css代码 这里是你要显示的内容 效果如下:原创 2014-11-25 14:51:17 · 11290 阅读 · 0 评论 -
CSS盒子模型
一、W3C标准的盒子模型 二、IE盒子模型 三、两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 = content w转载 2016-01-18 10:04:18 · 693 阅读 · 0 评论 -
DIV水平和垂直居中
CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。.mydiv{ margin:0 auto; width:300px; height:200px; }转载 2015-06-23 16:23:40 · 930 阅读 · 0 评论 -
纯CSS实现的表格滚动条效果
http://www.sharejs.com/js/table/10440原创 2016-01-24 23:57:24 · 14903 阅读 · 0 评论 -
CSS中调用JS函数和变量
在CSS来调用JS程序。 这个技术是网络安全里的,叫做CSS跨站。 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript:alert()等等类似的代码就可以用来执行代码。 我用的CSS代码如下: body{height:200px;background:url(javascript:aler转载 2016-01-25 14:30:39 · 10794 阅读 · 1 评论 -
rgba实现背景颜色透明
转载自:http://blog.youkuaiyun.com/hsliwei/article/details/6826986所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。RGBA颜色归为CSS3属性,其余RGB的区别在于转载 2016-03-02 08:59:36 · 15612 阅读 · 0 评论 -
css中position属性(absolute|relative|static|fixed)解析
我们先来看看CSS3 Api中对position属性的相关定义:static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute:对象脱离正常文档流,使用top,right,b转载 2015-11-28 08:40:47 · 905 阅读 · 0 评论 -
css 页脚固定到底部
页脚基本有两种显示方式:一、固定到窗口底部一直显示,不跟随滚动条滚动要达到这种效果方法很简单,只需要设定页脚div的 position:fixed;bottom:0; 即可。但是如果缩小浏览器窗口,此页脚会与页面元素发生重叠,可以通过给页面内容部分设置padding-bottom留出空间,再把页脚背景或主体内容的背景设为不透明色或图片来解决,还可以利用z-index设置footer的层原创 2016-03-03 13:31:58 · 11853 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
转载自:http://blog.youkuaiyun.com/freshlover/article/details/7610269text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-rad转载 2016-03-07 16:20:18 · 556 阅读 · 0 评论 -
user agent stylesheet 处理
谷歌浏览器下,出现user agent stylesheet 浏览器样式时,可查看html文档是否缺少文档类型声明。原创 2016-03-10 11:24:50 · 3368 阅读 · 0 评论 -
css3(border-radius) 边框圆角详解
转载自:http://blog.sina.com.cn/s/blog_61671b520101gelr.html传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4一、border-转载 2016-03-14 15:00:13 · 1106 阅读 · 0 评论 -
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-...转载 2018-04-18 19:44:23 · 946 阅读 · 0 评论