• [转]解决IE6不支持PNG绝佳方案 - [茶^咖啡语茶]2011-02-22

    Tag：学习笔记 技术 CSS

    我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
    然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.

    而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

    看Demo

    原理

    这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

    使用方法

    1.在这里下载DD_belatedPNG.js文件.
    2.在网页中引用,如下:

    <!--[if IE 6]>
    <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
    <script type="text/javascript"><!
    <!
    /* EXAMPLE */
    DD_belatedPNG.fix('.png_bg');
    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
    // -->

    幻影飘飞 发表于17:22:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 消除ie6双倍边距 - [茶^咖啡语茶]2011-01-18

    Tag：学习笔记 技术 CSS

    当div的属性同时出现浮动和外边距时，在ie6下就会产生双倍边距，导致页面变乱。

    比如 #tab{float:left;margin-left:20px;...}，在ie6下会出现外边距为40px。

    此时添加内联语句 display:inline;，可以消除ie6下双倍边距效果。

    其他浏览器下依旧正常。

    幻影飘飞 发表于09:37:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 如何去掉datagrid的边框 - [雨^随笔集录]2010-12-24

    Tag：学习笔记 CSS 技术

    aspx页面，使用了datagrid控件，使用ie7浏览，如设计的那样一切正常。偶尔使用ie8和FF浏览，发现多了边框。

    查看css，使用border-width=0，依然存在问题。修改多次，还是不能解决。

    使用FF的Debug插件，发现其html编码多了一个属性：rule="all"，意思是现实行和列之间的线条。然而datagrid里面却没有这个属性。查资料发现，对应的属性为GridLines，如不填写，默认为GridLines="both"，即全现实。修改为GridLines="none"，问题解决！

    做页面设计，需要配合ie6 7 8 FF 和Chrome 几个浏览器测试，问题总是很多，要细心，善于发现，冷静思考！

    幻影飘飞 发表于15:35:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • ASP.NET程序ie6不加载CSS - [茶^咖啡语茶]2010-12-22

    Tag：学习笔记 技术 CSS

    采用DIV+CSS设计的页面，经过测试IE6/7/8，FireFox，Chrome等浏览器显示正常，但作成aspx页面之后，发现IE6下面严重变形，怀疑是CSS没有加载上。使用插件查看之后，果然是CSS丢了。

    经过排查终于发现，CSS文件中有中文注释出现乱码，导致后面CSS丢失。

    换成英文之后，一切显示正常了。

    总结：就是中文字体，也要换成相应的英文。比如“宋体”改为“simsun”。

    幻影飘飞 发表于20:21:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 用css设计文章列表 - [茶^咖啡语茶]2010-12-09

    Tag：学习笔记 CSS 技术

    页面代码

    <li><span>2010.11.01</span><a href="#" target="_blank" title="">新闻列表文章测试标题新闻列表文章测试标题新闻列表文章测试标题</a></li>

    css代码

    li{ width: 460px; height: 23px; line-height:23px; margin:0; padding:0;}
    li span{ float:right; width: 70px; height: 23px; margin: 0 10px 0 0; padding:0;  text-indent:0; color:#666666;}
    li a{ height: 23px; line-height:23px; margin: 0 0 10px 0; padding:0; color:#666666; text-decoration:none; /*标题长度截断*/ display:block; width:350px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /*标题长度截断*/ }
    li a:hover{ color:#86b427; text-decoration:underline;}

    总结：span属性在浮动之后变为块元素，会自动换行，因此需要放在前面，然后浮动到右边。标题长度截断代码可以用来使超过设定宽度的标题自动截取后省略号显示。里面的几行代码同时才能实现该效果（FF只截断不显示...）。

    例如：新闻列表文章测试标题新闻列表文章测试标题新闻列表文...

    幻影飘飞 发表于15:08:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 用clear清除浮动方式 - [茶^咖啡语茶]2010-11-20

    Tag：学习笔记 技术 CSS

    尝试用div+css实现网页布局，却有一部分没有实现设计的效果，查阅资料才知道需要用clear来清除浮动方式

    .clear { clear: both; }

    值  描述
    left 在左侧不允许浮动元素。
    right 在右侧不允许浮动元素。
    both 在左右两侧均不允许浮动元素。
    none 默认值。允许浮动元素出现在两侧。
    inherit 规定应该从父元素继承 clear 属性的值。

    幻影飘飞 发表于15:01:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 浅淡!important对CSS的重要性 - [茶^咖啡语茶]2010-11-12

    Tag：学习笔记 CSS 技术

    　　CSS中的!important是一个非常重要的属性，有时候发挥着非常大的作用，52CSS.com这方面的知识并不是非常多，我们看下面的文章，对它作比较感观的了解。
    　　前几天写一些CSS代码的时候又难为我了，因为那个该死的IE6对CSS的支持是如此的差劲，以前我还没注意过，因为做的东西基本都是基于IE的，可是我这次为博客写的CSS要支持不止IE一个浏览器，可恨的是我装的Windows 7，这里面自带的是IE8浏览器，我自认为已经没有问题了，可是打开IE6，仍然出现错位，于是我决定看看IE6到底是什么情况。
    　　我把所有的CSS块儿全部使用边框包起来，结果看到在IE中两个div之间的距离明显要宽于其他浏览器，比如你写一个div的margin属性为20px，那么在IE中就好像是40px一样，这也就是为什么本来精度计算的刚刚好，在IE下却偏偏错位的原因。
    　　后来我看到了!important这个属性，这个属性其实也是css规范中的，结果IE6愣是不支持，也正因为它不支持，才让很多的CSSer们找到了解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：

    .home{
        margin-left:20px;
        margin-left:40px;
    }

    　　那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：

    .home{
        margin-left:20px!important;
        margin-left:40px;
    }

    　　那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。

    幻影飘飞 发表于11:35:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • [转]如何在HTML文档中显示空格 - [茶^咖啡语茶]2010-10-23

    Tag：学习笔记 技术 CSS

    一、使用全角空格

    全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。

    二、使用空格的替代符号

    替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。

    空格的替代符号有以下几种：

    名称编号描述
    &nbsp; &#160; 不断行的空白（1个字符宽度）
    &ensp; &#8194; 半个空白（1个字符宽度）
    &emsp; &#8195; 一个空白（2个字符宽度）
    &thinsp; &#8201; 窄空白（小于1个字符宽度）

    可以用名称或编号作为空格的替代符号，名称必须小写，末尾的“;”不能省略。

    如：

    欢&nbsp;&nbsp;迎&nbsp;&nbsp;光&nbsp;&nbsp;临！

    显示效果为：欢  迎  光  临！

    三、使用CSS的 white-space 属性

    CSS的white-space属性用于设置文本中空格的处理方式，当white-space属性取值为pre时，浏览器会保留文本中的空格和换行，这样你就可以直接在文本中使用空格和回车了。

    这种方法特别适合于在网页中显示程序代码。比如：显示一段C程序代码。

    <div style="white-space:pre"> int sub(int x,int y) { int z; if( x&gt;y ) z = x-y; else z = y-x; return z; } </div>

    显示效果为：

    int sub(int x,int y) { int z; if( x>y ) z = x-y; else z = y-x; return z; }

    使用HTML的<pre>标签也可以达到类似的效果，但<pre>标签有一些不太好的特性，不如使用CSS的white-space属性更方便。

    四、使用CSS的 letter-spacing 属性

    CSS的letter-spacing属性用于设置文本中字符之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在字和字之间设置指定长度的空白。比如：

    <div style="letter-spacing:30px">欢迎光临！</div>

    显示效果为：

    欢迎光临！

    注意，如果文本中有英文单词，则空白会加在字母之间，而不是单词之间。

    五、使用CSS的 word-spacing 属性

    CSS的word-spacing属性用于设置文本中单词之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在单词和单词之间设置指定长度的空白。比如：

    <div style="word-spacing:30px">Happy new year!</div>

    显示效果为：

    Happy new year!

    注意，HTML是以空格来区分单词的，它会把单词间的空白按指定长度显示。

    六、使用CSS的 text-indent 属性

    CSS的text-indent属性用于设置首行缩进，它的取值可以是一个带单位的长度值，浏览器会在段落的首行开始处设置指定长度的空白。比如：

    <div style="text-indent:2em">欢迎光临！</div>

    显示效果为：

    欢迎光临！

    说明：em 是一个相对长度单位，2em 表示要缩进两个字的距离。

    幻影飘飞 发表于14:52:00 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 中文字体的英文名 - [茶^咖啡语茶]2010-09-02

    Tag：CSS 学习笔记 技术

    在注册表中可以找到系统中注册的字体信息，各种字体的英文名字都能查到：

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts

    在CSS中，可以直接使用英文名作为font-family的属性值。

    常见字体的英文名举例如下：

    新細明體：PMingLiU
    細明體：MingLiU
    標楷體：DFKai-SB
    黑体：SimHei
    宋体：SimSun
    新宋体：NSimSun
    仿宋：FangSong
    楷体：KaiTi
    仿宋_GB2312：FangSong_GB2312
    楷体_GB2312：KaiTi_GB2312
    微軟正黑體：Microsoft JhengHei
    微软雅黑体：Microsoft YaHei

    幻影飘飞 发表于20:30:11 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • css自动区分ie6和ie7 - [茶^咖啡语茶]2010-08-21

    Tag：学习笔记 CSS

    制作网站风格的时候因为朋友的浏览器是ie6，而我的是ie7，导致在浏览的时候出现了严重的错位。

    于是将css某句代码改为“margin-left:10px;_margin-left:0px;”

    ie7读前面一句，ie6读后面一句。为什么，我不懂！求大侠赐教！

    幻影飘飞 发表于21:21:37 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • css实现ie6下png图片透明 - [茶^咖啡语茶]2010-08-21

    Tag：CSS 学习笔记

    _background:transparent;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/i/nav.png');

    第一句，背景透明，第二局，滤镜效果

    先简单记一下

    幻影飘飞 发表于20:51:04 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • [转]用ul制作横向CSS导航菜单 - [茶^咖啡语茶]2010-08-17

    Tag：CSS 学习笔记 技术

    为什么要用<UL>标签来制作导航栏和菜单栏？用UL做导航菜单之所以被广泛采用，主要是因为它的代码清晰，布局方便，更重要的是具有“语义”效果，能够方便进一步SEO。
    第一步、编写横向菜单的HTML代码架构

    请将以下代码添加到HTML文档的导航栏区域中。

    <ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="http://www.Code52.Net">Code52.Net</a></li> <li><a href="http://www.yahoo.com">Yahoo.Com</a></li> <li><a href="http://www.google.com" class="last">Google.Com</a></li></ul>

    第二步、编写CSS代码

    1、设置公共样式

    请将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。

    <style type="text/css">#menu { font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */}#menu, #menu li {list-style:none; /* 将默认的列表符号去掉 */padding:0; /* 将默认的内边距去掉 */margin:0; /* 将默认的外边距去掉 */}</style>大家都知道，<ul>中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。

    Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉

    2、让文字横排

    大家都知道，<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。

    <style type="text/css">#menu li { float:left; /* 往左浮动 */}</style>3、设置链接样式：

    <style type="text/css">#menu li a {display:block; /* 将链接设为块级元素 */padding:8px 50px; /* 设置内边距 */background:#3A4953; /* 设置背景色 */color:#fff; /* 设置文字颜色 */text-decoration:none; /* 去掉下划线 */border-right:1px solid #000; /* 在左侧加上分隔线 */}</style>我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：

    <style type="text/css">#menu li a {display:block; /* 将链接设为块级元素 */width:150px; /* 设置宽度 */height:30px; /* 设置高度 */line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */text-align:center; /* 居中对齐文字 */background:#3A4953; /* 设置背景色 */color:#fff; /* 设置文字颜色 */text-decoration:none; /* 去掉下划线 */border-right:1px solid #000; /* 在左侧加上分隔线 */}</style>4、链接悬停效果：

    通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。

    <style type="text/css">#menu li a:hover {background:#146C9C; /* 变换背景色 */color:#fff; /* 变换文字颜色 */}</style>这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。

    <ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" class="last">Google.com</a></li></ul><style type="text/css">#menu li a.last {border-right:0; /* 去掉左侧边框 */}</style>好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：

    <style type="text/css">#menu {  font:12px verdana, arial, sans-serif; }#menu, #menu li { list-style:none; padding:0; margin:0;}#menu li {  float:left; }#menu li a { display:block; /* 如果是中英文混排的文字，建议用固定宽度 width:150px; height:30px; line-height:30px; text-align:center; */ padding:8px 50px; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000;}#menu li a:hover { background:#146C9C; color:#fff; text-decoration:none; border-right:1px solid #000;}#menu li a.last { border-right:0; /* 去掉左侧边框 */}</style>
    <ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" class="last">Google.com</a></li></ul>

    幻影飘飞 发表于21:09:15 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 用CSS控制Table和div因撑开而变形 - [茶^咖啡语茶]2009-11-10

    Tag：学习笔记 CSS 技术

    <style>

    table { table-layout: fixed;  word-wrap:break-word; }

    div { word-wrap:break-word; }

    </style>

    语法：
     
    word-wrap : normal | break-word
     
    参数：
     
    normal : 　允许内容顶开指定的容器边界
    break-word : 　内容将在边界内换行。如果需要，词内换行（word-break）也行发生

    幻影飘飞 发表于10:39:46 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • CSS定义背景图片居中 - [茶^咖啡语茶]2009-10-29

    Tag：学习笔记 技术 CSS

    使用CSS定义背景图片在页面中居中，把如下代码加入<head>区域中

    <STYLE TYPE="text/css">
    <!--
    BODY {
    background-image: URL(picture1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    -->
    </STYLE>

    解释：

    background-position -- 背景图片在屏幕中的位置

    background-repeat -- 背景图片是否重复平铺

    background-attachment -- 定义背景图片随滚动轴的移动方式

    • 取值: scroll | fixed | inherit
      • scroll: 随着页面的滚动轴背景图片将移动
      • fixed: 随着页面的滚动轴背景图片不会移动
      • inherit: 继承
    幻影飘飞 发表于11:55:47 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • css颜色渐变 - [茶^咖啡语茶]2009-10-20

    Tag：学习笔记 CSS 技术

    <table cellpadding="0" cellspacing="0" width="72%" height="30" border="0">
    <tr>
    <td width="33%" height="800" style="filter:progid:DXImageTransform.Microsoft.Gradient
    (startColorStr='#b90000', endColorStr='#1b0000', gradientType='0')">1</td>
    <td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient
    (startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='1')">2</td>
    <td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient
    (startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='2')">3</td>
    </tr>
    </table>

     

    幻影飘飞 发表于14:49:30 | 阅读全文 | 评论 0 | 编辑 | 分享 0
共2页 1 2 下一页 最后一页