随笔分类 -  CSS

上一页 1 2
W3C标准
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
摘要：该插件在火狐浏览器中安装。Web Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以详细的研究一下它的强大功能。CSS工具　是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：1、Disable Style 禁用样式 可以用来禁用当前页面的某些或全部样式的显示。·All Style 禁用所有样式，页面中将没有任何样式效果。·Browser Defaul 阅读全文
posted @ 2011-10-26 18:41 网络爱上点击 阅读(602) 评论(0) 推荐(0)
CSS块级元素和行内元素
摘要：块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，tablebasedlayout和cssbasedlayout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看 阅读全文
posted @ 2011-10-25 13:13 网络爱上点击 阅读(48881) 评论(0) 推荐(3)
html文档中media="all"是什么
摘要：html中link标记允许当前文档和外部文档之间建立连接，但是只能在head标签里面用。href设置或获取目标 URL ，rel设置或获取对象和链接目的的关系，type设置或获取对象的 MIME 类型，media设置或获取媒体类型。 all 就表示all所有媒体类型的样式完整一句是这样的<link href="Theme/2010_/Css_/css_.css" rel="stylesheet" type="text/css" media="all" /> 阅读全文
posted @ 2011-03-08 10:51 网络爱上点击 阅读(12188) 评论(0) 推荐(1)
文本超出指定宽度 溢出
摘要：看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。 一般的文字截断（适用于内联与块）： Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellips 阅读全文
posted @ 2011-03-02 10:28 网络爱上点击 阅读(273) 评论(0) 推荐(0)
cursor 鼠标形状
摘要：<head><title></title><style type="text/css"><!--a {cursor: help;}--></style></head>------------------------------------其中的"help"可以换成以下内容hand 手形 crosshair 十字形 text 文本形 wait 沙漏形 move 十字箭头形 help 问号形 e-resize 右箭头形 n-resize 上箭头形 nw-resize 左上箭头 阅读全文
posted @ 2011-03-01 17:24 网络爱上点击 阅读(234) 评论(0) 推荐(0)
white-space: nowrap;
摘要：定义和用法white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。默认值： normal继承性： yes版本： CSS1JavaScript 语法： object.style.whiteSpace="pre"实例规定段落中的文本不进行换行：p { white-space: nowrap }TIY浏览器支持所有浏览器都支持 white-space 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "in 阅读全文
posted @ 2011-03-01 17:19 网络爱上点击 阅读(2467) 评论(0) 推荐(0)
CSS实例：区分IE6、IE7、FF对HR解释的CSS hack
摘要：因为IE和Firefox对hr默认的各种属性margin，padding等等都不一样，所以定义为0也没用。 我们可以通过下面的CSShack来解决：.52css.com]hr.ducky{margin-bottom:1px!important;>margin-bottom:8px!important;margin-bottom:8px} 不只是针对hr，这只是一个例子。IE6和IE7对hr边距margin的解释是一样的，所以都定为8px，Firefox与IE有区别，下边距只能为1px。 第一条IE6，IE7，Firefox都读懂，这时候都是1px；第二条IE6，IE7能读懂，都用第二条的 阅读全文
posted @ 2011-02-28 16:46 网络爱上点击 阅读(533) 评论(0) 推荐(0)
overflow与text-indent:-999em 字体隐藏
摘要：作为一个web前端开发为了html语义化常常要给内容模块加上一些标题来让页面更有意义当然还有我们的图片按钮在抛开css裸奔的情况下也能很顺利的汲取到页面信息通常为了传达更好的视觉效果我们常用图片替代掉字体而早前的前端开发常直接不在html中给出内容用 ;(甚至为空)这样在没有加载到css时就无法知道这个区块究竟是什么内容了正题开始通常偏移掉字体的方式是使用text-indent:-9999px;可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化成block的话 往往 他身后的的元素 阅读全文
posted @ 2011-02-24 21:45 网络爱上点击 阅读(306) 评论(0) 推荐(0)
如何判断浏览器类型然后让它读取指定的CSS
摘要：<SCRIPT LANGUAGE="JavaScript"><!--if (window.navigator.userAgent.indexOf("MSIE")>=1){//如果浏览器为IEsetActiveStyleSheet("default.css");}else{if (window.navigator.userAgent.indexOf("Firefox")>=1){//如果浏览器为FirefoxsetActiveStyleSheet("default2.css&q 阅读全文
posted @ 2011-02-24 14:14 网络爱上点击 阅读(1537) 评论(0) 推荐(0)
CSS定义鼠标经过时鼠标图型样式
摘要：巧合要用到鼠标样式效果，就顺便整理了下十五种CSS 鼠标样式，小例子供大家使用啊。CSS鼠标样式语法如下：任意标签中插入 style="cursor:*" 例子：<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种：下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！hand是手型 例子：CSS鼠 阅读全文
posted @ 2011-02-23 17:52 网络爱上点击 阅读(14600) 评论(0) 推荐(0)
css如何控制文字多行显示，溢出截断后末尾出现省略...
摘要：css如何控制文字多行显示，溢出截断后末尾出现省略...比如用户评论上传后，想控制在页面的显示为一行，超过一行的其余内容截断，并要求最后能有省略号...出现类似以下的代码无法在截断的最后显示省略（。。。）<div style=" overflow: hidden;text-overflow:ellipsis; width: 150px; height: 16px;font-size:12px;line-height:16px;">我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过 阅读全文
posted @ 2011-02-23 14:02 网络爱上点击 阅读(4653) 评论(0) 推荐(1)
样式命名规则
摘要：相信大家对样式命名都多少感到困难，特别是想起一个有意义的名，更难。回顾了一下之前写的《 样式命名规则 》（不知道大家使用后有什么感想）结合这段时间使用上发现的一些问题，重新整理了样式的命名规则，希望能更实用些。要避免当状态改变时名称失去意义，最常见的就是用于布局的类名，如“left”、“right”，当左边栏不再是左边栏的时候，“left”这个名就没有实际意义了（可以看下《 CSS代码命名惯例语义化的方法 》中的“CSS类命名的语义化VS结构化方式”部分）。这与我们所推荐的“命名要有意义”就相违背了，使用序号就更加有问题了。好像没错，不过有好长一段时间都有个问题让我很烦恼，如果一个页面中同个模 阅读全文
posted @ 2011-02-23 14:01 网络爱上点击 阅读(245) 评论(0) 推荐(0)
有利于SEO的DIV+CSS的命名规矩小结
摘要：利于SEO的DIV+CSS的命名规矩小结: 一、CSS文件及样式命名 1、CSS文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 2、CSS样式命名规范 本人建议：用字母、_号工、-号 一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须 以字母开头，不能为纯数字 阅读全文
posted @ 2011-02-22 15:59 网络爱上点击 阅读(1336) 评论(0) 推荐(1)
用CSS控制DIV居中失效的解决方法
摘要：1、一般情况下DIV居中失效是因为没写DTD语句　　在页面的最上方加上：　　＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞　　就可以了！其实其他很多css的问题也是因为没有加上dtd语句引起的。　　2、使用margin来让DIV居中　　最简单的写法就是：　　.divstyle{ margin:0 auto; }　　复杂一些就把左右边距都加上：　　.divstyle{ margin-left:auto; 阅读全文
posted @ 2011-01-20 11:44 网络爱上点击 阅读(271) 评论(0) 推荐(0)
div 圆角
摘要：我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。圆许多读者也许不会意识到我们可以用这个属性来做一个圆。-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; 如果想再添加点效果，我们可以利用Flexibl 阅读全文
posted @ 2011-01-19 13:29 网络爱上点击 阅读(258) 评论(0) 推荐(0)

上一页 1 2