随笔分类 - css学习
摘要：很郁闷的是最近几年没怎么写过前端啊！公司给配置了iMAC 用不了我最爱的notepad++ 于是找到传说中的神器TM下载下来。纠结死人的zen coding却装不好。我这个愚蠢的人类 仍旧通过不懈的反复重试 多方查看，找到了正确安装方法。 我下载的是TM官网展示的最新版。默认的 包的 内容就这些玩意
阅读全文
摘要：*:focus {outline: none;}用下面的代码去掉你要去掉的元素的边框：.nohighlight:focus { outline:none; }你也可以给元素增加你希望的边框：.changeborder:focus { outline:Blue Solid 4px; }2、用chrome登录了一次并记录了COOKIES之后，再次打开，CHROME记录了上次输入的内容，背景图片就会被覆盖一层淡黄色的背景色， 点击一下鼠标，背景图片才显示出来。这个怎么解决呢？我当时碰到这个问题的时候，也很头疼，至今都没有发现有什么好的办法。有发现的请分享一下。3、chrome默认用户可以控制text
阅读全文
摘要：字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。 美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷： 一、不可能大范围的使用该字体； 二、图片内容相对使用文字不易修改； 三、不利于网站SEO。 网络上有一些使用sIFR技术、或javascript/flashhack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 首先 获取要使用字体的三种文件格式，确保能在主流浏...
阅读全文
摘要：byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1565一、长话短说CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。我总结了三点原因：首先是理解上有些门槛；二是其他人使用的不多；三是此属性功能效果有不少替代方案。这种状态有些类似于普通的计算机使用者使用
阅读全文
摘要：方案一、只要给li增加white-space:nowrap;即可。方案二、修改CSS代码 即单给那个竖起来的li加个宽。ie6存在这样一个问题，定义内边距的时候要提出来在一个单独的盒子里定义
阅读全文
摘要：针对老版浏览器 可加以下以脚本 使支持html5<!--[ifltIE9]><scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
阅读全文
摘要：随着浏览器的升级，CSS3可以再一些大型网站上运用了比如淘宝。但是，不同的浏览器有不同的CSS3实现，兼容性是一个大问题,天外飞仙整理一些常用的写法。一、服务器端字体（font-face）设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装，文字只能以普通字体显示。这时可以让用户的浏览器自行下载服务器端字体，然后就能呈现出设计者想要的效果。@font-face {font-family: ‘MyFont’;src: url(‘myfont.eot’); /* IE6+ */src: local(‘myfont.ttf’),url(‘myfont.woff’) format(‘wo
阅读全文
摘要：position:absolute;_top:expression(documentElement.scrollTop + 0 + "px");_bottom:expression(documentElement.scrollTop + 0 + "px");
阅读全文
摘要：通 常一个页面我们都会给它一个固定宽度，比如980px,1000px.但是如果页面是按百分比来设，这样就得给页面一个最小宽度，否则浏览器缩小的时候页 面就乱了。大家知道在CSS里最小宽度是用min-width来实现，但是IE6不支持这一属性，这就需要用CSS Hack来实现了。那具体如何实现呢？大家知道IE支持在CSS中写入JS表达式（这一点其实不好，CSS中应该尽量避免表达式），下面我们看看如何用表达式实现这一任务。假设要实现一页面宽度100%，最小宽度1000px#warpper {width:100%;min-width:1000px;_width:expression((documen
阅读全文
摘要：背景图片的设置是CSS布局时常用的一种属性，应用background的url，引入背景图片，可以设置为不重复平铺，如下面的代码： background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) no-repeat; 在大多数情况下，此设置不会有任何问题。背景图片按设置的形式呈现，不会平铺于容器，无论容器是何宽度与高度。 但在IE6下，有一种情况，如果未定义宽高，则会产生即使定义了no-repeat，背景图片依然重复的BUG。解决的办法很简单，为容器定义宽度即可。如果没有实际宽度，可以定义为100%。 此BUG不需要额...
阅读全文
摘要：像你所遇到的问题一样， IE6浏览器有太多的bug让制作网页的人头疼。这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法。如果我们需要 做某个元素始终位于浏览器的底部，不会因为浏览器窗口的缩放和滚动条的滚动而变化，那个肯定是想到的用position:fixed生成绝对定位，只要设 置这个CSS属性就能达到刚刚的需求。当其他浏览器都正常显示的时候，只有IE6不那么完美。该元素的位置是通过"left", "top", "right" 以及 "bottom" 属性进行规定。一般的 pos
阅读全文
摘要：今天做页面时，给ul设了padding值。在ie6下发现li(设过浮动的)莫名其妙的多了间距。调之久久而不解矣……后将ulpadding改成了margin，其病自解……
阅读全文
摘要：可以给外面的box加上overflow:hidden; 或者给里面每个浮动的box加clear:both;即可解决背景不显示。
阅读全文
摘要：今天遇到了ie6两个兼容的问题 很是头疼！首先，如图1，给li里的A标签加了背景图，css写了padding-left:10px;但ie6下文字并未缩进;当我又加了“text-indent:10px;”时，ie6下能看到文字缩进了，但这时背景图也跟着里缩了，不行还得用padding-left! 于是就成这样了……求解中……*后来直接 让ul与外面的box没间距，仅设ul的padding, 而后给 a加背景，并设padding-left的距离。这样ie6也没这情况了*每二个问题：如下列表，我 是给 li 都浮动了，红字是li里的strong标签 其它都是a标签！在其它浏览器 红字均正常 没有两行
阅读全文
摘要：截字省略号select {-o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrapoverflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。1、CSS字体属性简写规则一般用CSS设定字体属性是这样做的：以下为引用的内容：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:ver
阅读全文
浙公网安备 33010602011771号