现在位置:首页 » 包含标签 CSS 的所有文章
时间长不总结,果然忘记了。下面再复习一下CSS中A标签伪类的顺序。
a伪类的顺序一般为:a:link、a:visited、a:hover、a:active 。
比如:
a:link {text-decoration: none;color: #FFFFFF}
a:visited { text-decoration: none;color: #FFFFFF}
a:hover { text-decoration:none;colo...
Cross-browser way (额外的标签)
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
L orem ipsum dolor sit am...
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(doc...
浏览器兼容性是前端开发人员经常头疼的问题,网上也有很多的文章讨论。本文将对理论及形形色色的方法将不再赘述,在此分享一段实用的代码。
点击此处 查看常见的浏览器Hack技巧。
/* IE 6 */
* html .yourclass { }
/* IE 7 */
*+html .yourclass{ }
/* IE 7 and modern browsers */
html>body .y...
/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repe...
很多人可能也会遇到这种情况,在某些chrome浏览器下,css里设置的10号字体是不起作用的,仍然显示12号大小,对比firefox、ie6、7、8、9,他们的显示都是好的。要是你也碰到了这个问题,只要在对应的css里加上下面一句话就可以了:
-webkit-text-size-adjust: none;
比如你的样式是这样写的:
.copyright{
font-size:10px;
backgr...
在前端开发中兼容性是一个永远讨论不完的话题,也是一个让前端开发中无比头疼的话题。Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发,但仍然是大部分开发者迷恋着一些CSS2代码。
本段代码包含CSS Resets以及Clearfix,reset包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
下面我分享一段代码,我们可以放到我们的ID...
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer's r...
前端推荐书写、命名的规范
不知道是哪位大神总结的,感觉言之在理,有个规范终归是好的,特在此分享一下,望共勉。
一、结构说明
1.1、调用外部样式表
<link type="text/css" rel="stylesheet" href="css/common.css" media="all" /> 点击此处 可参考common.css示例文件。
1.2、调用外部的javascript文件
<script ty...
firefox7.0 开始兼容text-overflow:ellipsis; 这样的话,以后的省略号就可以做到浏览器兼容了。
代码片段为:
.ellipsis {
width:200px;/*设置宽度*/
white-space:nowrap;/*设置不换行*/
text-overflow:ellipsis;/*这就是省略号*/
-o-text-overflow:ellipsis;/*兼容opera*/
over...
结构:
<p class="p1">1.Transshipment Booking System is launched只对英文起作用,以字母作为换行依据</p>
<p class="p2">2.Transshipment Booking System is launched只对英文起作用,以单词作为换行依据</p>
<p class="p3"&...
作为前端工程师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋,要正确的选择也是一件不容易的事情。下面将这几种方法一一介绍给大家,以供大家参考。
用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居...
1、设置边框的border=0、cellspacing=1,设置table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ht...
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅。
IE Hack
IE系列浏览器的hack大略如下:
_nowamagic:1px;-----------ie6
*nowamagic:1px;-----------ie7
nowamagic:1px\0;----------ie89
n...
请尽量用xhtml格式写代码,而且DOCTYPE影响CSS的处理,作为W3C标准,一定要加DOCTYPE声明。
1. div的垂直居中问题
vertical-align:middle;
//将行距增加到和整个DIV一样高
line-height:30px; 然后插入文字,就垂直居中了,缺点是要控制内容不要换行。
2. margin加倍的问题
设置为float的div在IE下设置的margin会加倍,这是...
不知道你有没有也遇到过下面类似的情况,当图片与文字同行显示的时候,你可能会发现line-height无效,如下结构:
<div class="container">
<img src="images/test.jpg" title="你所不知道的CSS属性之解决line-height无效" />
<a href="#"...
平时浏览过很多的CSS画廊类网站,只知道很多,但是一直没有收集。现在整理一下,这些网站,基本上都是经常更新的,他们收集了大量的界面设计的非常棒的网站。
其实我认为现在已经无所谓CSS画廊了,这样叫可能是一种习惯了。因为CSS已经普及了,任何一个成熟的网站都是CSS技术的成功应用,离开了CSS的网站,估计都是古董级的怪物了,除非是全Flash网站。下面均以画廊形式提供,从功能到整体创意每个站点中都收集了大量基于Css设计的优秀的网站。
...