css
张广森
这个作者很懒,什么都没留下…
展开
-
10个非常有用的CSS技巧
1. 将网页或元素居中 HTML: div class="wrap"> div> CSS: .wrap { width:960px; margin:0 auto;} 2.Sticky Footer (让页脚永远停靠在页面底部,而不是根转载 2011-11-02 15:23:46 · 436 阅读 · 0 评论 -
css圆角
众所周知,比较古老的圆角的做法是通过表格和图像构成。但随着AJAX的流行、CSS + DIV的页面布局技术的风靡,古老的做法显得苍白无力,所以人们不断寻求改进的方法。本文的实现就是一种现在比较流行的做法。实现原理其实这种方法的原理很简单——在要圆角的元素的上下堆放一些边缘(MARGIN)不同的元素(也有的使用其它元素的,如等,不过原理是一样的),如下图所示:原创 2013-04-19 13:45:15 · 632 阅读 · 0 评论 -
牛人也得看的15个CSS常识
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。3、慎用 * 通配符。所谓通配符,就原创 2013-04-19 13:38:59 · 604 阅读 · 0 评论 -
IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;加之Firefox2.0和Opera9.0以前版本很少见到,所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明原创 2013-04-19 13:48:39 · 676 阅读 · 0 评论 -
css格式化工具
CSS代码格式化和加密化 name="Generator" content="EditPlus"> name="Author" content=""> name="Keywords" content=""> name="Description" content="">转载 2014-07-14 23:39:32 · 1293 阅读 · 0 评论 -
文字有阴影效果
创意网站开发工作室网站 h1 { color: #0055A6; font: bold 22px "微软雅黑"; margin: 10px 0; text-align: center; text-shadow: 1px 1px 0 #F3F3F3, 1px 2px 0 #B2B2B2;}原创 2014-07-15 18:18:49 · 447 阅读 · 0 评论 -
demo1,DOM元素-careteElement-appendChild-insertBefore
/*今日js学习DOM元素--careteElement-appendChild插入元素--insertBefore 父.insertBefore(子节点,谁之前)删除DOM元素--removeChild*/ DEMO元素 window.onload=function() { var原创 2014-07-12 02:59:43 · 573 阅读 · 0 评论 -
微信wap开发-页面自适应大小
微信wap开发---页面自适应大小微信wap开发---页面自适应大小 1. 使用HTML中的viewport来实现viewport语法如下:HTML代码 ...中嵌入下面代码--> <meta name="viewport" content=" height = [pixel_value | d转载 2014-08-14 22:36:15 · 16469 阅读 · 0 评论 -
根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
css媒体查询php、asp、js判断客户端输出对应的样式------------------- 1.媒体查询方法在 css 里面这样写 --------------------@media screen and (min-width: 320px) and (max-width: 480px){在这里写小屏幕设备的样式}转载 2014-09-23 21:22:17 · 6303 阅读 · 0 评论 -
div显示在object、embed之上~
最近做一个项目时,发现浮动的div总是被object里的flash文件给盖住了。。本以为只是z-index的问题,于是去修改div和object、embed的z-index值~ 在改之前突然想到div是jqueryui里的dialog创建的~也就是说div本身默认的z-index已经是1000了,这个情况下应该说所有的元 素z-index都没有当前的大了。。不过还是报者试一试的心态转载 2015-04-06 01:19:05 · 860 阅读 · 0 评论 -
CSS多行文本垂直居中【转】
.outer { display:table; width:578px; overflow:hidden; background: #eee; height: 42px;}.middle {display:table-cell; vertical-align:middle; margin-left 10px;} /*下面的CSS是针对IE7,IE6*/[if lte IE 7转载 2015-06-10 15:39:24 · 425 阅读 · 0 评论 -
HTML5里的placeholder属性
HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生转载 2015-11-05 11:57:52 · 1410 阅读 · 0 评论 -
ontouchstart实现手机触屏中的hover成效
ontouchstart实现手机触屏中的hover效果ontouchstart实现手机触屏中的hover效果最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下,已经使用效果还不错,大家可以根据下面的案例学下: 一、css样式:.inner { width: 100%; he转载 2015-11-10 22:11:52 · 3335 阅读 · 0 评论 -
关于团队合作的css命名规范
常用的css命名规则头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:m转载 2016-05-29 23:42:54 · 664 阅读 · 0 评论 -
颜色HSL(色调,饱和度,亮度)
资料来源:W3C下面的每一个表代表一种色调。每个色调以30度间隔从色环取得。表中的X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。Y轴代表亮度。50% 属于 '正常'。 0度 红 100%75%50%25%0%100#FFFFFF#FFFFFF#FFFFFF#FFFFF转载 2016-07-28 10:07:10 · 4813 阅读 · 0 评论 -
友好的表格效果
友好度良好的表格*{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}table{width:700px;margin:0px auto;font:Georgia 11px;font-size:12px;color:#333333;text-align:center;border-collapse:原创 2013-04-17 10:32:31 · 559 阅读 · 0 评论 -
border-style的outset属性在导航中的应用
代码如下: border-style的outset属性 .bevelmenu{ font: bold 13px arial; padding: 6px 0; margin: 0; width: 100%; background-color: #FFF2BF; text-align: left; /*将值设置为"right"菜单会向右靠拢*/ }.b原创 2013-04-17 10:29:00 · 2484 阅读 · 0 评论 -
鼠标移动图片变暗渐隐效果
function high(which2){theobject=which2highlighting=setInterval("highlightit(theobject)",100)}function low(which2){clearInterval(highlighting)which2.filters.alpha.opacity=30}function highligh原创 2013-04-17 10:26:20 · 1989 阅读 · 0 评论 -
自动隐藏多余的字符串...
table{ table-layout:fixed; } td{ word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;/*显转载 2011-11-08 10:39:04 · 477 阅读 · 0 评论 -
css图片等比例缩放
css样式代码img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style.height = this.off转载 2012-05-29 11:18:21 · 2350 阅读 · 0 评论 -
div图片之间有缝隙,display:block
这两天在psd to div+css的过程中,发现IE系的浏览器有一个比较奇怪的问题,上下两个相邻的div之中存在3px的缝隙,具体的描述如下:上面的div:里面有一张图片下面的div:使用的是背景,纵轴重复具体如图所示: 经过google之后,找到的解决办法是,找到上面的div中的图片代码所在位置,为其设定属性style="display:bloc转载 2012-09-14 16:34:40 · 7014 阅读 · 0 评论 -
浮动层自动适应高度
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题,因为包含浮动的元素是不会自动适应高度的,也就是不会被浮动元素撑开。先看一个例子:HTML:ul> li>/li> li>/li>/ul>CSS:ul { margin:0; padding:10px; list-style:none;转载 2012-09-13 19:25:07 · 582 阅读 · 0 评论 -
css任意图片文字上下左右都居中对齐
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。但是实际中实现的效果并不是很完美,由于各浏览器的解析都各转载 2013-02-26 17:54:20 · 7478 阅读 · 0 评论 -
鼠标移过图片变清晰效果(支持IE)
nereidFadeObjects = new Object();nereidFadeTimers = new Object();function nereidFade(object, destOp, rate, delta){if (!document.all)return if (object != "[object]"){ //do this so I can t原创 2013-04-17 10:29:31 · 1061 阅读 · 0 评论 -
onFocus="this.blur()",
是一个输入框,用户输入文本的框就是类似于百度的搜索框,大小是20,value=""说明初始为空 onfocuse="this.blur()" onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了"this.blur()",blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了 ---------- 整个代码构成原创 2013-04-17 10:33:17 · 25747 阅读 · 1 评论 -
兼容FF,IE的CSS透明背景色滤镜
在应用ajax的loading 状态时用到透明层,用css滤镜实现,以下兼容FF与IE .covering { width:55%; height:85%; position:absolute; z-index:100; top:0px; left:0px; background-color:ye转载 2013-04-17 10:23:19 · 710 阅读 · 0 评论 -
图片广告随机显示代码
//随机显示广告代码tips = new Array(4);tips[0] = '';tips[1] = '';tips[2] = '';tips[3] = '';index = Math.floor(Math.random() * tips.length);document.write(tips[index]);原创 2013-04-17 10:26:44 · 3129 阅读 · 0 评论 -
css所有属性快速记忆
a:link { color: #FF0000; /*连接默认的颜色变化*/}a:visited { color: #0000FF; /*连接访问的颜色变化*/}a:hover { color: #00FF00; /*鼠标经过的颜色变化*/}a:active { color: #FFFF00; /*鼠标按下的颜色变化*/}cursor:hand原创 2013-04-17 10:27:09 · 2061 阅读 · 0 评论 -
FF、IE7、IE6的CSS问题
出处:http://www.iteye.com/topic/1723421. !important 随着IE7对!important的支持,现在IE7和FF都支持!important,可以用!important来区分FF、IE7和IE6的高度。用法如下:Html代码 .content{background:#a5a5a5;height:100px !importa原创 2013-04-17 10:27:32 · 447 阅读 · 0 评论 -
网页图片上下滚动效果代码
网页图片上下滚动代码网页图片上下滚动代码网页图片上下滚动代码网页图片上下滚动代码网页图片上下滚动代码 var speed=50var feng=document.getElementById("feng");原创 2013-04-17 10:28:14 · 8067 阅读 · 0 评论 -
通用滑动门
滑动门通用JSbody{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}.t_rt{text-align:right原创 2013-04-17 10:31:23 · 591 阅读 · 0 评论 -
纯CSS Tooltips
这就是Tooltips如你所见,这些附加的说明文字在鼠标经过的时候显示。/*Tooltips*/.tooltips{position:relative; /*这个是关键*/z-index:2;}.tooltips:hover{z-index:3;background:none; /*没有这个在IE中不可用*/}.tooltips span{displ原创 2013-04-17 10:31:37 · 617 阅读 · 0 评论 -
介绍了各手机的像素密度_(-webkit-min-device-pixel-ratio)_响应式布局
响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助。对手机分辨率和网页像素的初步认识是,是2倍的差别。但是让人费解的是为什么还要 1.325 这种数据呢,原来是这么回事:举个转载 2016-10-17 07:24:54 · 8934 阅读 · 0 评论