网页中的安全字体

Html/Xhtml/Css 1 Comment »

所谓安全字体,就是在所有的浏览器中都能正常显示的字体,也就是所有操作系统默认都安装了的字体。
共有21种安全字体:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
阅读全文——共3348字

让CSS兼容IE和Firefox的技巧集合 (上)

Html/Xhtml/Css No Comments »

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。
CSS技巧
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
阅读全文——共4875字

让CSS兼容IE和Firefox的技巧集合 (下)

Html/Xhtml/Css No Comments »

FF与IE
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
阅读全文——共4442字

IE6实现min-width

Html/Xhtml/Css, 他山之石 No Comments »

首先我们知道这个效果应该是一个老话题了。
今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧
需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现,而且肯定是很早就给出来了。
闲话少说,上源码:
触发并利用IE6-layout的怪异特性,css实现:
 
<div class="ie6-out">
<div class="ie6-in">
阅读全文——共584字

CSS hacks

Html/Xhtml/Css, 他山之石 No Comments »

IE6以下
*html{}
IE 7 以下
*:first-child+html {} * html {}
只对IE 7
*:first-child+html {}
只对IE 7 和现代浏览器
html>body {}
阅读全文——共2170字

屏蔽选择的样式定义:-moz-user-select属性

Html/Xhtml/Css No Comments »

屏蔽选择的样式定义:-moz-user-select属性(只支持ff)。 
属性有三个属性值: 
1、 none:用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。
2、 -moz-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。
3、 -moz-none:子元素所有的文字都不能选择,但是input输入框中的文字除外。
  IE浏览器下是通过 onselectstart=”javascript:return false;”事件来实现该功能。

阅读全文——共246字

跨浏览器实现float:center

Html/Xhtml/Css, 他山之石 2 Comments »

原文:
http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/
一直想实现一种类似float:left/right的居中效果,但想了好久,也问了好多大侠,一直没解决,今天在蓝色看见了,大喜!
<div id="macji">
    <ul class="macji-skin">
        <li>列表一</li>
阅读全文——共1165字

震灾中的新媒体

Html/Xhtml/Css No Comments »

       距离汶川地震已过48小时之久,紧张的救援行动有序的展开,一线的军人和工作人员正在争分夺秒的施救,身居后方的我们在努力组织捐款捐物,为震灾提供强有力的保证。
      在这次事件中,我觉得网络起了非常大的作用,它具有及时快速的优点,它通过文字,图片,视频等多种载体更深入的展现信息,提供更直观、更细致的信息,为五湖四海的我们传达信息,方便我们及时了解灾区的情况、救援的情况、政府采取的措施等等。目前震灾已是各大网站的主旋律,首页显著位置都放着震灾的Banner,新闻的头条也都是震灾的最新信息,并且开建专题,汇总信息,让每个浏览者都可以及时了解到最新的情况。同时,在论坛、在贴吧、在社区这些交互性的网络空间中,大家都在讨论着震灾,你一言我一语,交流信息,为灾区的人民祈福,带动大家共同伸出援助之手,传递着一方有难,八方支援的情意。
阅读全文——共370字

 
Copyright ©2008 缘由心生 Design by j david macor.com.Original WP Theme & Icons by N.Design Studio   京ICP备09005659号