当前位置：主页 > 平面设计

最新发布

常用CSS缩写语法总结
常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;通常有下面四种书写方法:方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 边框的属性如下：可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景的属性如下：可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position;

共 3 次浏览
DIV CSS制作网页时易犯的错误总结
DIV CSS制作网页时易犯的错误总结

CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 　　1. 检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。　　2. 检查CSS是否正确　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。　　3. 确定错误发生的位置　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。　　4. 利用border属性确定出错元素的布局特性　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。　　5. float元素的父元素不能指定clear属性　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

共 2 次浏览
网站导航文字按特殊的类型进行切换的特效
网站导航文字按特殊的类型进行切换的特效

用CSS实现的文字导航上下切换，还有文本的左右切换，喜欢的话可以自己开发其它功能！

共 5 次浏览
IE中发生line-height属性失效的解决办法
IE中发生line-height属性失效的解决办法

如在body中设置line-height:80px;然后body中<p>有文字有img,有input...这个bug就发生了,在ie下的line-height会缩小了,但在ff和opera是正常的,于是我们为了解决这个办法需要单独给ie设置样式;

共 6 次浏览
CSS的私有属性小结(针对FireFox浏览器)
CSS的私有属性小结(针对FireFox浏览器)

        FF中CSS的私有属性小结　　有时..有些东西FF 总是支持不好…….　　只能找私有属性来帮忙….　　例子还米做…　　因为太多太不了解了…　　等理解得差不多时搞成本电子书.　　虽然这些不推荐使用,　　可是万不得以的时候总得有个解决的方法.. At-rules @-moz-document url(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(webjx.com){div{color:red;}}　　url是指定样式在哪里网址下可以用，url-prefix是指定样式在哪个目录下，domain是指定样式在哪里玉米下有用，用“,”可以使用多个。如 domain(webjx.com) 可以在www.webjx.com, *.webjx.com 下使用, 而如果是 domain(www.webjx.com) 的话.就只能在 www.webjx.com使用。Pseudo-elements and pseudo-classes 伪类与伪对象　　:-moz- 系列的还没理解清楚.不知道是不是只应用在xul上的..  Properties 属性: moz-appearance: appearance value 直接定义外观 (测试无结果..) -moz-binding: uri | none ; 链接XBL 跟HTC很像的东东.. -moz-background-clip: border | padding ; 背景色原点是否包括 border, 值padding 表示不包括 ,对应CSS3 background-clip -moz-background-inline-policy: bounding-box | continuous | each-box 内联背景渲染的方式  -moz-background-origin: border | padding | content 背景图原点 会根据 background-position 给边或者内容相反渲染.对应CSS3 background-origin -moz-border-top-colors:[color | transparent,]* color | transparent ; -moz-border-right-colors,-moz-border-bottom-colors,-moz-left-right-colors 给 border 定义多个颜色 从外到里..每个只有 1px,最后一个填满余下的 border,这个 border-style 也会变成 solid 没默认.无继承,可用于所有元素 -moz-border-radius: border-radius {1,4} | inherit 定义圆角 可以单独定义 -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright -moz-box-align: start | center | end | baseline | stretch 定义内容的位置 ,只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-direction: normal | reverse 定义内容的相反方向, 类如direction, 只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-flex: number 还不明.测试无结果. 只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-ordinal-group 官方未说明 -moz-box-orient: horizontal | vertical 

共 9 次浏览
将XHTML+CSS页面转换为打印机页面
将XHTML+CSS页面转换为打印机页面

  在以前，为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面，这样才能够在打印的时候获得令人满意的效果。现在，通过使用结构化的XHTML和CSS，你可以实现同样的效果而只用花费少得多的精力。 　　从屏幕显示到打印效果 　　大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而，有的时候用户需要将某些页面打印出来，也许就是为了保留一个长期的记录，或者将其用作方便的离线参考资料。 　　现在的麻烦是，让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性，都无法在打印版的Web页面上表现出相同的效果――尤其当打印机是黑白的时候。在被降级为灰度打印的时候，彩色的组合会失去（原有的）对比效果；图形会看起来失真，而且耗费太长的打印时间；在Web页面上起着重要作用的导航按钮在打印页面上也毫无用处。 　　为了克服这些问题，Web的创建者常常会为页面专门设计一个打印机友好的版本，这样访问者就有打印的欲望。打印机友好的版本通常都包括有和主要 Web页面相同的内容，但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种形式，以便生成能够让人接受的灰度图像。 　　CSS的解决方案 　　使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于，通过更改CSS样式，你可以很轻易就把内容重新格式化。因此，创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。 　　你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里，所以就没有必要单独创建一个打印机友好的页面，只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文件时，这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则，而为了打印输出要使用哪些规则。

共 3 次浏览
CSS网页布局
CSS网页布局

CSS能干什么呢？CSS能表现网页，以各种格式来显示页面，只需要你修改CSS代码就可以实现，HTML是网页的结构，可以配合CSS来实现制作我们的网页。 CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。   你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。 static值是元素的默认值，它会按照普通顺序生成，就如它们在的出现一般。的出现一般。 relative很像static，但可用top、right、bottom和left属性来偏移原始位置。 absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。

共 7 次浏览
不增加额外元素实现清除浮动(闭合浮动元素 Clear Floats)
不增加额外元素实现清除浮动(闭合浮动元素 Clear Floats)

浮动（Float）是页面布局中经常用到的技巧，但是，同时也出现了很多由于浮动引发的问题；父元素不能闭合具有浮动属性的子元素，是这些问题中最常见且最让新手头痛的一个。清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法。 以下是代码片段：<style type="text/css">  /* 说明：不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ） 月可整理： syku.net ( http://www.syku.net ) */  .clearfix:after {    content: ".";      display: block;      height: 0;      clear: both;      visibility: hidden; }  .clearfix {display: inline-block;}  /* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */  </style> 

共 2 次浏览
用CSS + 图片的方式制作漂亮的点击效果按钮
用CSS + 图片的方式制作漂亮的点击效果按钮

用CSS + 图片的方式制作漂亮的点击效果按钮<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="按钮, button, css, " /> <meta name="description" content="这篇文章教你用 CSS + 图片的方式制作漂亮的有点击效果的按钮，明白了原理，相信你也可以制作更加丰富的效果。" /> <title>用 CSS 让你的按钮（button）更加迷人 - 按钮, button, css, </title> </head> <body> <div id="example"> <h3 id="example_title">用 CSS 让你的按钮（button）更加迷人</h3> <div id="example_main"> <!--************************************* 实例代码开始 *************************************--> <style type="text/css"> a.button { background: transparent url("http://www.syku.net/web/UploadFiles_5065/200712/20071203121045802.gif") no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url("http://www.syku.net/web/UploadFiles_5065/200712/20071203121046965.gif") no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ } </style> <br class="clear" /> <a class="button" href="#" onclick="this.blur(); return false;"><span>提交</span></a> <a class="button" href="#" onclick="this.blur(); return false;"><span>重置</span></a> <br class="clear" /> <br /> <!--************************************* 实例代码结束 *************************************--> </div> </div> </body> </html>    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]  

共 4 次浏览
CSS截取固定长度字符
CSS截取固定长度字符

CSS截取固定长度字符<div style="width:100px; overflow:hidden; text-overflow:ellipsis">bbbbbbbbbbbaaa888899999aaaaa</div>     [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

共 3 次浏览
共计26043条记录 上一页 1.. 844 845 846 847 848 849 850 ..2605 下一页