随笔分类 -  CSS

1 2 下一页
CSS排版
Iframe高度自适应（兼容IE/Firefox、同域/跨域）
摘要：原文出处：http://www.ccvita.com/376.html在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe，包括目前正火热的应用开发也是如此。随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。同域时Iframe高度自适应下面的代码兼容IE/Firefox 阅读全文
posted @ 2012-09-10 17:27 scgw 阅读(238) 评论(0) 推荐(0) 编辑
CSS Text Box Element
摘要：不错的CSS样式控制文本框，参见：http://www.cssportal.com/form-elements/text-box.htm 阅读全文
posted @ 2012-07-26 18:57 scgw 阅读(158) 评论(0) 推荐(0) 编辑
利用CSS定位背景图片 background-position
摘要：详细出处参考：http://www.jb51.net/css/23213.html 阅读全文
posted @ 2012-07-26 09:36 scgw 阅读(307) 评论(0) 推荐(0) 编辑
CSS 网页图文混排的10个技巧
摘要：1. 首行缩进你知道的，从小学，老师就教我们，段落的开头应该空两格。而你使用word的时候，也有首行缩进这个功能，但在html中你的空格键好像起不了作用了。当然，你可以用&nbsp;来代替一个空格，但这不是理想的方式，用CSS吧，简单，有效：<p style="text-indent:2em;">你的内容</p>这样的话，这个有style="text-indent:2em;"段落就会显示两个字符的缩进了。缩进更多? 修改2em, 2表示2个字符，你可以相应增加或者减少。下面是一个示例，来自李白的诗：紫阁连终南，青冥天倪色。 阅读全文
posted @ 2012-07-02 08:09 scgw 阅读(518) 评论(0) 推荐(0) 编辑
DD_belatedPNG，IE6下实现PNG-24的效果
摘要：IE6环境下，它 -- 支持PNG-24背景循环 | 支持定位 | 支持focus | 支持hover | 支持做背景加链接正常 | 支持正常应用zoom ...点击这里查看演示DEMO , 点击这里下载DEMO 。详细文档见http://dillerdesign.com/experiment/DD_belatedPNG/。这里就不提供翻译了，哪位大大有时间有精力就来个翻译文档吧。08年末这东西刚出来的时候国内就有人发过这个方法，但不知道为什么，没引起什么“效应”，很多人还是在用上面说的“更具局限性”的方法。使用方法很简单，首先下载调用JS0.0.8a.js (未压缩版本, ~12Kb)0.0 阅读全文
posted @ 2012-04-17 20:33 scgw 阅读(192) 评论(0) 推荐(0) 编辑
不错的设计类网站
摘要：不错的设计类网站，收录下：http://www.m4html.com/ 阅读全文
posted @ 2011-12-14 09:32 scgw 阅读(176) 评论(0) 推荐(0) 编辑
一句代码解决IE8兼容问题(兼容性视图)
摘要：方法一、要在页面中加入如下HTTPmeta-tag:<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。方法二、针对整个网站，在IIS中加入如下描述符就可以有相同的效果，当然这么做范围更广。<?xmlversion="1.0"encoding="utf-8"?><configuration><system.webServer>< 阅读全文
posted @ 2011-08-10 22:08 scgw 阅读(476) 评论(0) 推荐(0) 编辑
CSS Sprites 样式生成工具(bg2css)
摘要：一早查找Sprite单词，无意间了解到了一个光从简介中让人心动的小工具：bg2css。 记得一年多前在查阅google中文首页的源代码时，就让它的css所吸引：整个页面所要用到的图标，都按一定的规律整合到了一张图片，在需要用到图标的地方通过css定位后显示，并且更要命的是，简单的css代码结合js代码，实现了神奇的动画效果。（当时的感觉是：自己所学习接触到的相关css的知识只是停留在基础的应用层面上，一山更比一山高，我找不出停止前进步伐的理由，唯有不断前行。） 也就是在那时，知道了什么是Css Sprites，了解了一些与之相关的知识，尝试着、学习着。学习中，图片坐标的定位却让人很是不便，而. 阅读全文
posted @ 2011-06-25 07:11 scgw 阅读(2700) 评论(1) 推荐(0) 编辑
CSS 多图片融合背景定位的应用于优缺点分析
摘要：1. 关键字, 例如: background-position: top right;优点: 直观, 可用性高, 各浏览器中表现一致.缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.2. 像素, 例如: background-position: 0px 0px;优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控 阅读全文
posted @ 2011-06-24 06:23 scgw 阅读(484) 评论(0) 推荐(0) 编辑
div+css 背景图片的定位取图问题详解
摘要：我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，比如：又如：这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下：我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是bo 阅读全文
posted @ 2011-06-24 06:14 scgw 阅读(482) 评论(0) 推荐(0) 编辑
CSS+DIV制作一幅扑克牌实例系列教程
摘要：在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上。 这样做的好处是不言而语： 1. 加速图片显示 2. 利用CSS技巧减小HTTP请求 3. 利于网站优化seo 其实原理非常简单，主要是应用css中的背景定位技术来实现的。主要就是用一个属性background-position来控制显示一张大图片中的一个指定大小的图片位置。 下面从一个比较有趣的例子来一步步动手制作一幅扑克牌 阅读全文
posted @ 2011-03-19 17:21 scgw 阅读(1064) 评论(0) 推荐(0) 编辑
css sprites-简单实例让你快速掌握css sprites精髓
摘要：这段时间有几次接触到了css sprites的概念，一个就是在用css做滑动门的时候，另外一个就是在用YSlow分析网站性能的时候，于是对css sprites这个概念产生了浓厚的兴趣。在网上查找了很多的资料，但可惜的是大部分都是只言片语，其中很多都是直接翻译国外的资料，也有直接推荐国外的资料网站，无奈英语没有过关，基本上没有理解到什么css sprites，更别谈如何使用了。最后还是在蓝色理想中的一篇文章受到启发，琢磨了老半天，才算弄清楚里面的内涵，下面将通过本人的理解帮助其他人更加快速的去掌握css sprites。先简单介绍下概念，关于它的概念，网上那到处都是，这里简单的提下。什么是cs 阅读全文
posted @ 2011-03-19 17:19 scgw 阅读(19461) 评论(0) 推荐(0) 编辑
背景图片的定位-像素
摘要：原文链接：http://zhuweiwu.com/?p=18CSS中背景图片的定位有三种方法：（1）关键字：background:url(img.jpg) top left; (2)像素：background:url(img.jpg) 0px -22px; (3)百分比：background:url(img.jpg) 50% 50%。最近刚做了像素方面的定位，所以在此分享像素的定位。 CSS中背景定位中的像素其实是图片左上角在显示的区域内的坐标（以显示区域左上角为原点，上边向右为x轴，左边向下为y轴如下图） 下面以本人做的Rss订阅来说明。图中人人网订阅图标的左上角距离整个图标的左上角的距离为 阅读全文
posted @ 2011-03-19 17:14 scgw 阅读(1012) 评论(0) 推荐(0) 编辑
[转]浅谈css中图片定位之所有图标放在一张图上
摘要：如今做网页为了使网站丰富多彩，富于表现力，往往需要应用大量的图片/图标。如何处理这些图片，使其尽量不影响网页载入，解析等速度，是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比，但是需要等待较长的时间加载，那么相信很多用户会等不及而离开。尽量将图片做的小些，可能是大部分人选择的解决之道。但是100张1kb的图片加载与一张100kb的图片加载，这之间又是不同的，这涉及到网站服务器的同时连接数，网络质量等。但是，显然，加载一张图片要远比加载多张图片简便的多。 还有最重要的一点，就是涉及到用户动作才表现的图片，例如鼠标移上/移下的图片切换，由于是由动作触发的，所以在动作触发前是不会加载的 阅读全文
posted @ 2011-03-19 17:03 scgw 阅读(656) 评论(0) 推荐(0) 编辑
使用IEPNGFix 2.0解决IE6支持PNG透明问题
摘要：IE6本身是支持索引色透明度(PNG8)格式，但不支持真彩色透明度(PNG24)格式。使用IE PNG Fix 2.0可以完美解决IE6支持PNG透明问题，而且支持背景定位和重复属性。IE PNG Fix 2.0 Alpha 4网址：http://www.twinhelix.com/css/iepngfix/使用方法：1.复制 blank.gif、iepngfix.htc、iepngfix_til... 阅读全文
posted @ 2010-12-01 12:31 scgw 阅读(295) 评论(0) 推荐(0) 编辑
css 缩略图
摘要：鼠标移上去显示大图 效果一 阅读全文
posted @ 2008-09-25 05:30 scgw 阅读(384) 评论(0) 推荐(0) 编辑
CSS text-transform 属性
摘要：定义 text-transform 对元素中的字母进行控制。 继承性：Yes 说明 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。 JavaScript 语法 CSS 属性也可通过一段 JavaScript 被动态地改变。 脚本语法： objec... 阅读全文
posted @ 2008-05-15 22:42 scgw 阅读(433) 评论(0) 推荐(0) 编辑
Asp.Net下通过切换CSS换皮肤
摘要：换皮肤的方式有很多种，最简单的通常就是切换页面CSS，而CSS通常写在外部CSS文件里。那么切换css其实就是更换html里的link href路径。我在网上搜索了下。一般有两种方式： 1,在页面放一个holder控件。然后用编程方式把当前用户的风格css link写入页面。 2,通过反射机制，逐个控件设置css样式。 上面两种方式都挺麻烦的， 第一种需要在每个页面上放一个holde... 阅读全文
posted @ 2008-04-06 17:04 scgw 阅读(465) 评论(0) 推荐(0) 编辑
CSS中A的一个应用
摘要：css中的A能创造出很多精彩的效果，这次的这个效果对于经常逛蓝色的朋友来说应该很熟悉，就来自蓝色理想作品库的作品展示效果。我很喜欢，所以把它拿了出来----简单的精彩！本期模特依旧是朱茵。 HTML代码 本期模特【朱茵】 阅读全文
posted @ 2008-04-02 12:42 scgw 阅读(1338) 评论(0) 推荐(0) 编辑
li可以显示多列
摘要：六种不同风格的时间 带颜色的滚动条 视频播放代码大全 JMAIL格式 阅读全文
posted @ 2007-12-18 11:01 scgw 阅读(344) 评论(0) 推荐(0) 编辑

1 2 下一页
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示