CSS
文章平均质量分 52
二子戴代
你在做什么
展开
-
CSS优化注意事项
1.css 字体简写规则当使用css定义字体时你可能会这样做:font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif; 事实上你可以简写这些属性:font: 1em/1.5e原创 2013-08-19 14:14:43 · 81 阅读 · 0 评论 -
CSS定义鼠标经过时鼠标图型十五种样式
CSS鼠标样式语法如下:text是移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 e- resize是向右的箭头ne-resize是向右上的箭头n-resize是向上的箭头nw-resize是向左上的箭头w- resize是向左的箭头sw-resize是左下的箭头s-resize是向下的箭头se-resize是向右下的箭头原创 2013-08-30 10:36:53 · 750 阅读 · 0 评论 -
css命名规则
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:ne原创 2013-08-30 10:39:21 · 262 阅读 · 0 评论 -
IE MARGIN: 0 auto; 不居中
从网上下载的网页最顶部是在IE下面浏览页面是居左下载完了,直接给替换成http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在IE下就可以正常居中原创 2013-08-30 10:39:40 · 261 阅读 · 0 评论 -
CSS Sprites技术
随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但转载 2013-09-10 13:55:10 · 161 阅读 · 0 评论 -
CSS实现段落首行缩进两个字符
用CSS实现段落前面缩进两个字段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。 p{ text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/ }注:div标签不要忘记起始符。text-i原创 2013-09-10 13:45:37 · 1334 阅读 · 0 评论 -
彻底解决Google浏览器CSS居中问题
div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!important 仅火狐firefox浏览器识别。可是在谷歌浏览器查看时,就出现兼容Google浏览器的BUG了,无法居中。现在向样式表中添加两句就能解决问题了。样式表是这样修改的 .原创 2013-09-10 13:50:17 · 530 阅读 · 0 评论 -
CSS页面文字显示不完整
BODY {background-color: #ffffff;border-right: white 0px outset;color: #000000;font-size: 9pt;line-height: 0px;margin-top: 10px;;margin-left: 1px;text-decoration: none;}line-height:转载 2013-09-10 13:53:31 · 707 阅读 · 0 评论 -
CSS样式表高效使用的技巧
随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,原创 2013-09-10 13:49:58 · 555 阅读 · 0 评论 -
css让页脚始终在底部不论页面内容多少
让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部,在某些情况下这些功能还是比较实用的。方案一:方案二:原创 2013-09-11 13:09:26 · 455 阅读 · 0 评论 -
div绝对定位 居中
div绝对定位居中这样的效果在web设计中经常碰到。一个div绝对定位居中,他的父级是相对整个html文档的:html代码:div绝对定位居中css代码:#wrap{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:原创 2013-09-11 14:26:40 · 658 阅读 · 0 评论 -
IE6绝对定位出现的问题及解决办法
IE6绝对定位出现的问题及解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题: IE6绝对定位css绝对定位 css绝对定位IE6绝对定位上面这段代码在IE6中定位错误。解决办法有两种:1、给父层设置zoom:1触发layout。 2、给父层设置宽度(width)。原创 2013-09-11 14:34:36 · 493 阅读 · 0 评论 -
CSS样式表书写风格及横写和竖写差异
横向连排在大产品项目中逐渐成为主流,项目中维护效率更高。最近流行的栅格化、渐进增强等设计理念,都可以很好应用到样式表设计上。好代码应该清晰上下、左右分级,适当的分块、留白将有助于模块化设计,大大提高可扩展性、可复用性、可维护性。总的来说,书写有如下四个方面值得探讨,并积累个人(团队)习惯:命名 排版模式化 属性定义顺序 注释格式 如果再加上各种Hack语法,以及-moz-, -原创 2013-09-11 14:48:57 · 601 阅读 · 0 评论 -
css背景定位 图片背景定位方法
css背景定位、css背景图片定位的问题介绍,需要的朋友赶紧看看。 在CSS中,背景图片的定位方法有3种: 1、关键字:background-position: top left;2、像素:background-position: 0px 0px;3、百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看原创 2013-09-11 15:00:48 · 535 阅读 · 0 评论 -
div与table标签中border属性的差别
今天在页面布局时遇到了个问题:div布局的总是比table的多两个像素,用火狐的查看元素可以清楚地看到用div的多出了两个像素,因为设定了border:#cbcdca solid 1px;把border宽度设置为0则可以了,把border-left设置0则可以看到只多出1px了。而table的则不会超出宽度。现象分析清楚了,原因就很容易理解了,div布局的border属性属于外加的,会在原转载 2013-09-11 15:12:32 · 579 阅读 · 0 评论 -
css垂直居中、水平居中和自适应宽度代码
一、宽度自适应的元素css水平居中: 1.宽度自适应的元素可以是:绝对定位、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。2.居中:这里我们应该会想到1/2、50%、一半等这些东西。 以下是实现代码: pos元素的float:left或都用position:absolute;都可以,因为这两个属可以宽度自适应。 先这个多原创 2013-09-11 14:55:11 · 549 阅读 · 0 评论 -
css position fixed ie6完美兼容方案
css position fixed完美解决position fiexed ie6下不兼容情况,特别需要的童鞋参考下。 IE6下不兼容position:fixed属性!在网上也看了一些资料还是不行,特百度一下为大家找到如下代码。 position: fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果。但是,它不支持IE6及以下版本。于是很多同学使用JS模拟转载 2013-09-11 15:01:28 · 552 阅读 · 0 评论 -
css中z-index,css z轴,div中z-index在IE中迷惑
css中z-index属性是用得比较多的一个,也就是常说的css z轴,如何在div中z-index合理使用会使网页更加美观,先往下看。 z-index属性简介 引用: z-index : auto | number auto:默认值。 number:无单位的整数值,可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此转载 2013-09-11 15:02:46 · 470 阅读 · 0 评论 -
用css制作一个web站点导航栏
现在几乎所有的网站的导航栏都是用css来制作的,随着div与css完美搭档的流行,css在制作网站导航栏方面有其绝对的优势。先写好我们的导航栏HTML代码,代码如下:在这个外围可以加一个div:这样看到的页面效果是:下面是我们写的css样式:页面效果:原创 2013-09-11 13:56:00 · 1296 阅读 · 1 评论 -
css li 去掉点的样式写法
定义li 前面的小点样式关于这个list-style-type的一些语法与参数: 语法:list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | geo原创 2013-09-11 13:21:19 · 843 阅读 · 0 评论 -
div css弹出层半透明遮罩层效果实现
背景半透明,覆盖整个可视区域的遮罩层效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现,高手请绕道。 html代码很简单 1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; fil转载 2013-09-11 15:11:00 · 1133 阅读 · 1 评论 -
css中z-index,css z轴,div中z-index在IE中迷惑
css中z-index属性是用得比较多的一个,也就是常说的css z轴,如何在div中z-index合理使用会使网页更加美观,先往下看。 z-index属性简介 引用: z-index : auto | number auto:默认值。 number:无单位的整数值,可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此转载 2013-09-11 15:12:17 · 376 阅读 · 0 评论 -
最全的16进制颜色代码方便查阅
Hex CodeColor#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00 #FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33转载 2013-09-11 15:13:16 · 434 阅读 · 0 评论 -
有关CSS样式中ID和class的命名
有关CSS样式中id与class命名或许大家都没有太在意,以为随意命名就行了,没有那么多讲究。其实这种观点不是一个很好的编程习惯。拥有良好的命名规则更加有样式的可读性等。 一、用class_name方式来命名类名。 有些网友喜欢用class-name来命名,不过好像这二个命名没有很大关系。但笔者反对用className写类名,像这样的驼峰命名法在服务器端脚本中可能用的多。但我不建原创 2013-09-11 15:14:27 · 485 阅读 · 0 评论 -
div css技巧,25个css样式技巧分享
css技巧,div css技巧,25个css网页布局技巧分享。 1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。 3、一个兼容转载 2013-09-11 15:15:07 · 389 阅读 · 0 评论 -
解决IE6 IE7 IE8 Firefox浏览器兼容性
今天在导航栏中额外添加了一个链接,在IE7 IE8和Firefox都很正常,但是在IE6下面却无法查看到。就是这个页面的导航栏,我额外添加了一个PHP博客链接,但是在IE6下面从系统优化后面的ThinkPHP和PHP博客这二个链接都是无法显示的。这种情况下不是你的后台程序有问题,而是前台CSS兼容性的问题。 我的导航栏 li 标签的一个属性 width 宽度设置为了70px,导航栏上14个转载 2013-09-11 15:16:39 · 444 阅读 · 0 评论 -
包含css、js文件带参数的意思和作用
可能很多新手在阅读其他网站的源代码的时候发现在包含css、js文件的时候文件后面还带有参数,类似于下面这样: Ruthon的这个博客在今天也开始启用了这样带参数的包含静态文件的方式。 其实说到底这样带参数的包含文件的方式和不带参数没有什么本质上的差别,带参数唯一的作用就是防止浏览器的缓存。 我们知道浏览器当包含的静态文件,比方说css、js等,如果没有路径上面的改转载 2013-09-11 15:17:26 · 466 阅读 · 0 评论 -
完美解决XHTML+CSS在浏览器兼容性问题
编程入门大家描述一下解决XHTML+CSS兼容性的五个方案!虽然使用XHTML+CSS构架好处不少,但也确实存在一些问题,特别是在浏览器的支持方面。这里和大家分享一下解决方案。 解决XHTML+CSS兼容性的五个方案 使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。转载 2013-09-11 15:18:10 · 375 阅读 · 0 评论 -
HTMLCSS分页按钮
page1展示:div class="digg">span class="disabled"> span>span class="current">1span>a href="#">2a>a href="#">3a>a href="#">4a>a href="#">5a>a href="#">6a>原创 2013-09-30 09:42:47 · 485 阅读 · 0 评论 -
垂直居中的几种实现方法
用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:一、利用 position 和负边距利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难原创 2013-09-30 10:49:50 · 332 阅读 · 0 评论 -
常用CSS样式缩写
使用样式缩写可以帮助减少你CSS文件的大小,且更易阅读,常用css样式缩写的主要规则如下:颜色16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示to原创 2013-09-30 10:51:17 · 370 阅读 · 0 评论 -
CSS中font-size文字单位详解
在用px作为文字大小的单位的时候,经常会出现一些问题。最主要是体现在用户不能灵活的控制文字的大小,现在IEseo/' target='_blank'>浏览器是主流,但我们不能通过seo/' target='_blank'>浏览器设置文字大小,因为我们用px作为文字大小的单位。一、长度单位长度单位分为两种,一种是相对长度,另一种是绝对长度。以下为三种相对长度单位:◆ em 相对于原创 2013-09-30 10:55:58 · 527 阅读 · 0 评论 -
web2.0常用网页配色
颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它定位了一些东西,以用户为中心,群体智慧,分享等等,等等。同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨,再做补充吧!淡淡的浅色系及延伸应用此类颜色似乎最早被应用在一些转载 2013-09-30 10:03:50 · 799 阅读 · 0 评论 -
CSS鼠标光标样式属性一览表
CSS Cursor Types 光标类型 CSS 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致。 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照顾IE5,它只认hand。原创 2013-09-30 10:07:05 · 648 阅读 · 0 评论 -
display:block/inline/inline-block的区别
1、display:block 就是将元素显示为块级元素。 block 元素的特点是:总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。 , , , , 和 是块元素的例子。 2、display:inline 就是将元素显示为行内元素。inline 元素的特点是:和其他元素都在一行上; 高,行高及顶和原创 2013-09-30 10:09:04 · 308 阅读 · 0 评论 -
谈谈CSS Sprites技术及其优化
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊。在大家还在拨号上网的“远古时期”,由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展,网速的提升,大家越来越重视页面的加载速转载 2013-09-30 10:12:45 · 491 阅读 · 0 评论 -
表单button的行高问题
下面我们先来看一个Demo的实例:HTML Codeinput type="submit" id="button" value="engage"/> CSS Code#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font:转载 2013-09-30 10:59:59 · 484 阅读 · 0 评论 -
IE下中英文字体下划线不能对齐问题解决
在IE下当一行文字同时有英文跟中文的时候,出现链接下划线就会发生折行,也就表示这个时候中英文是没有对齐的!(FIREFOX不受此问题影响),但是经过测试,默认的直接在页面里设置链接的时候是不会出现这个情况。是什么导致了中英文偏差呢?解决办法又是什么呢?于是经过测试发现两种情况(当然有可能有更多导致的情况。你们可以自己去尝试),当中英文对象的相邻元素拥有vertical-align属性设置(比如原创 2013-09-30 10:52:07 · 910 阅读 · 0 评论 -
css的filter应用介绍
语法:STYLE="filter:filtername(fparameter1, fparameter2...)"(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 滤镜说明:Alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 Chroma:制作专用颜色透明 DropShadow:创建对象的固定影子原创 2013-09-30 10:53:39 · 366 阅读 · 0 评论 -
IE6: border的transparent解决方案
代码如下:border:solid 1px transparent; _border-color:tomato; _filter:chroma(color=tomato); 说明:Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:Filter:Chroma(color=color)这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Co原创 2013-09-30 11:00:33 · 352 阅读 · 0 评论