网站前端

CSS的一些技巧剪辑

一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为id的权重要比class大。 三、一个兼容性调整(IE和Mozilla)的笨办法： 　　初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。 　　临时解决方法：选择符{属性名:B !important;属性名:A} 或许有时候并没有效果。你可以在52CSS.com搜索更多的BUG解决方法。 四、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding 五、li标签前面的图标推荐使用background-image，而不是list-style-image。 六、IE分不清继承关系和父子关系的差别，全部都是继承关系。 七、在给...
阅读全文 >>

writing-mode控制文字方向

语法：   writing-mode : lr-tb | tb-rl   参数：   lr-tb : 左-右，上-下 tb-rl : 上-下，右-左   说明：   设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右，上-下的书写方式。但是亚洲语言常有上-下，右-左的书写方式。 当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。 对应的脚本特性为writingMode。请参阅我编写的其他书目。
阅读全文 >>

overflow-y控制textarea无边框自动高度

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: .t_area{ width:300px; overflow-y:visible } <textarea> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea>
阅读全文 >>

css-expression

CSS中expression使用方法简介,IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 给元素固有属性赋值 例如，你可以依照浏览器的大小来安置一个元素的位置。 #myDiv { position: absolute; width: 100px; height: 100px; left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; } 给元素自定义属性赋值 例如，消除页面上的链接虚线框。 通常的做...
阅读全文 >>

word-wrap与word-break的用法区别

css中word-wrap与word-break的用法区别,兼容IE和firefox。 两个属性最好用的方法是: word-wrap:break-word; overflow:hidden; 而不是: word-wrap:break-word; word-break:break-all; 也不是: word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题，在firefox下，长串英文会被遮住超出的内容。 word-wrap与word-break的区别: 1)word-wrap: normal　 Default. Content exceeds the boundaries of its container. break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。 2)word-break: normal　 Default. Allows line breaking within ...
阅读全文 >>

white-space属性-自动换行相关

用法: white-space:通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 取值: normal | pre | nowrap | pre-wrap | pre-line | inherit normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre: 保持HTML源代码的空格与换行,等同与pre标签 nowrap: 强制文本在一行,除非遇到br换行标签 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 inherit: 继承 初始值: normal 继承性: 是 适用于: 所有元素 white:白色.space:间隔,距离 例子: <html> <head> <style type="text/css"> body { font-size:12px; color:#ffffff; } #main span { float:left; padding:10...
阅读全文 >>

用word-break,word-wrap控制内容超出表格宽度自动换行

有时候在table或div中显示文字的时候，如果是汉字，文章会根据table和div的width属性自动分行，但如果是英文，当单词长度超过table或div宽度的时候，table/div便会被撑开，有时候会造成页面很难看，这时可以给table或者div设置如下样式： .table_div{ word-break:break-all;word-wrap:break-word; } 单词超长的时候能够自动截断单词分行，避免上述情况的发生。
阅读全文 >>

css布局时常见注意事项

1. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 2. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 3. 确定错误发生的位置 假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 6. float元素的父元素不能指定clear属性 MacIE下假如对float的元素的父元素使用clear属性，四周的fl...
阅读全文 >>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用css实现鼠标链接悬停提示</title> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <style type="text/css"> body {font:normal 12px Verdana} a#tip {position:relative;left:75px; font-weight:bold;} a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block} a#tip...
阅读全文 >>

一个简单的DIV+CSS布局实例

首先在DW里边新建一个标准HTML文件 <!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" /> <title>无标题文档</title> </head> <body> </body> </html> 然后定义全局属性 * { margin:0px; padding:0px; border:0px; }/*为兼容浏览器设置全局属性,严格的写应该列出所有用到的HTML标签,例如：h1,h2,h3,table,th,t...
阅读全文 >>