木子屋 Dnawo's BLOG

分类:HTML/CSS

共 133 篇

CSS精确控制背景图像显示位置

使用CSS的background-image、background-repeat和background-position三个属性,我们就能很容易控制容器背景图的显示位置,这也就为我们将多个图标做到一个文件中并通过CSS控制在不同地方显示不同图案提供了条件,为什么要这么做呢?优势很多: ·将众多图标做到一个文件中能减少客户端对服务器端的请求次数; ·一次性将图片下载到本地,页面显示许多图标或是做些图片翻转效果时能马上显示图片,减少等待时间; 上边这张图来源于淘宝网,下边我们看下如何通过CSS控制在不同位置显示出不同的图案: 下边我们着重说下background-position这个属性,它用于设置或检索对象的背景图像位置,其值通常有三种形式:…

CSS区分IE5/IE5.5/IE6.0/IE7.0/FF

上边例子中的背景色在IE各个版本及FF中均不相同!这主要是由于不同的浏览器或是同一浏览器的不同版本对CSS的支持及解析结果不一样,以及CSS优先级的关系共同作用而引起的,下表中列出了不同浏览器对CSS解析的一些不同:

Js动态添加样式

参考文章 动态增加CSS,兼容任意浏览器:http://www.rainic.com/blog/index.php/183

WML表单提交

上边两种方式都可以用来提交表单,下边说下几个伪指令的含义: $(keyword:escape):指示微浏览器将非文本数字的字符替换成十六进制代码; $(keyword:unesc):指示微浏览器用相应的字符替换十六进制代码; $(keyword:noesc):指示微浏览器准确的按照字符出现的样子处理他们; WML似乎没有类型为hidden的input,如有些参数需隐藏发送,可直接在go中设置:

带图片信息提示的内容框

<textarea rows="7" cols="80" style="background:#F5FAFE ) no-repeat right bottom; border:1px;"></textarea>…

如何编写兼容各主流邮箱的HTML邮件

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认、营销推广。这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的HTML邮件。 首先,我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以,我们只能通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析,我把邮箱分为两类: 第一类包括gmail、hotmail、sohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中。如图:…

XPath语法

我们将在下面的例子中使用这个 XML 文档:   Harry Potter   29.99   Learning XML   39.95 1.选取节点 XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。下面列出了最有用的路径表达式:  表达式  描述  nodename  选取此节点的所有子节点  /  从根节点选取  //  从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置  .  选取当前节  ..  选取当前节点的父节点  @  选取属性 在下面的表格中,我们已列出了一些路径表达式以及表达式的结果: 路径表达式 结果 bookstore…

说说background-image属性图片的相对路径

background-image属性主要用来设置或检索对象的背景图像,其值有none和url,none表示无背景图像,url为背景图像的地址,url可以用相对地值或绝对地址,例如: 在实际操作过程中,我们发现:当使用相对地址时,相对地址和css是内联还是外联是有关系的,这个问题在使用绝对地址时不存在。下边我们做些简单的测试来说明它们是有关系的,最终总结下它们有什么样的关系,测试页面结构为: index.htm style/css.css 当使用内联方式时,用background-image设置index.htm中的对象的背景图像代码为: 现在我们把.bg {background-image: );}移到css.css文件中,改用外联的方式调用:…

IE中的条件注释

一、条件注释简介 1.IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。 2.条件注释只能用于IE5以上。 3.如果你安装了多个IE,条件注释将会以最高版本的IE为标准。 4.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。 5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。 二、条件注释属性 ·gt : greater than,选择条件版本以上版本,不包含条件版本 ·lt : less than,选择条件版本以下版本,不包含条件版本…

常用CSS命名参考

在XHTML中定义ID、CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。 (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper (2)导航类 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 位置导航:crumb 菜单:menu 子菜单:submenu…