CSS
文章平均质量分 62
qiyan86
这个作者很懒,什么都没留下…
展开
-
反省总结一
寒风中奔波在自己向往以久的城市——北京,一天之内面试了三家公司回来脚冻得有些走不稳,苦但很甜,这就是我选择锻炼自己的生活,废话少说,总结一下全天的感受,自信很重要,不管你对自己的回答有没有疑问,不要犹豫,自信的说出自己心中的答案,一定要表现的足够自信。静态页面开发有两年之久了,应该得好好总结反省了,这样不仅可以巩固原有知识,而且还能及时更新学习更多的知识,举一反三,不断总结。 听了很原创 2009-11-17 18:18:00 · 276 阅读 · 0 评论 -
总结垂直居中对齐的解决方案
一、单行文本垂直居中对齐方法height:20px; line-height:20px; overflow:hidden;注意:overflow:hidden不可省略,以上数字自定义,此法不适应图片 二、多行文本在未知容器内垂直居中对齐方法padding-top:10px; padding-bottom:10px; 注意:以上数字自定义,此法不适应图片 ...2009-12-16 18:30:01 · 283 阅读 · 0 评论 -
有关display:inline-block在FF出现空白的解决方案
最近制作中有遇到过未知大小图片未知容器里底部对齐的效果,如下图所示: 有用到display:inline-block做这个效果,通过实践会发现在FF下相邻的inline及inline-block的元素而产生的莫名其妙的空白间距如下图所示: 这是因为,html中存在空格或者换行,就会有一个间距,就像两相邻的两个a,默认情况下也会有间距,解决的办法可以让相邻的inl...2009-12-18 19:27:25 · 129 阅读 · 0 评论 -
浮动里的绝对定位元素在IE下被遮挡的解决方法
最近在优化页面时遇到的问题:在浮动里的绝对定位元素在FF下显示正常而在IE下被遮挡 FF显示效果:IE显示效果: #wrap{overflow:hidden; height:1%; } #wrap li{float:left;margin-right:12px;height:120px;padding:6px;position:relat...2009-12-22 16:12:05 · 456 阅读 · 0 评论 -
自定义鼠标图案
自定义鼠标图案.ablumInfo_style1{cursor:url("images/L.cur"),-moz-cell;}<a href="#" class="ablumInfo_style1">自定义鼠标提示图标 </a> 其中url内是你自定义图案的路径,-moz-cell是FF的专有属性。注意以下几点:一、图片格式:cur格式与ani格...2009-12-22 20:11:33 · 858 阅读 · 0 评论 -
display:inline-block的实际应用
前面一篇博文有讲关于display:inline-block在FF出现空白的解决方案,这篇博文主要讲解下display:inline-block的实际应用。 应用一如下图所示。当固定宽度,固定高度,向左浮动float:left就解决了。但是,这个设计中内容是可变的,也就意味着当内容增多,高度不一就会破坏这个布局。你也许会想到每一行三个放在一个UL里,然后程序员3*N的循环,现在用dis...2009-12-23 15:04:57 · 210 阅读 · 0 评论 -
去掉点击链接产生的虚线框
方法一:定义样式outline:none即可,但此法只适应于FF,IE不支持,在IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。 <a href="#" hidefocus="true">这里放置您需要的文字或图片</a> 方法二:针对于IE.HideFocus {hide-focu...2009-12-23 17:30:08 · 110 阅读 · 0 评论 -
禁止换行与强制换行
一、禁止换行white-space:nowrap;overflow:hidden;当文字内容过长,想以省略号表示可使用text-overflow:ellipsis,此法在FF下无效,但在FF下可以调宽度+ 伪类的方法即:p:after{content:"...";}这个方法有个弊端,当内容很少的情况下也会出现这个省略号,怎么解决呢??? 二、强制换行 word-...2009-12-23 18:46:25 · 241 阅读 · 0 评论 -
表单元素对齐
最近一直忙于工作,修改BUG,很少有时间上来总结一些东西,实在抱歉,对于时间的管理上自己还是得加强,没时间不能做为一种理由。提高用户体验关键在于细节。经常会发现一些表单元素与标签对不齐的现象,如下图片所示: 做为专业者不能视而不见的,其实两句代码就能将对齐解决:body{font-family:Tahoma;}input,label{vertical-align:...原创 2010-01-08 14:16:34 · 400 阅读 · 0 评论