欢迎访问 水平网    今天是:2017年11月22日 注册 | 登录 | 订阅 | 收藏
推荐文章
热点文章
专题
JQuery框架
Prototype.js
HTML5

DHTML基础及应用教程CSS位置设定

鼠标点击控制这一节我们将告诉你如何运用鼠标来控制这些运动方. 请你记住我们的目标是写出兼容在 NetScape 和 Internet Explore 上的程序。鼠标点击控制 跟键盘控制一样,我们可以用鼠标来控制任何动画效果。下面我们将要设立一个连接,当拿鼠标按这个连接的时候, 元素就能滑动, 当你放开鼠标的时候,滑动 就停止了。程序几乎跟键盘控制的一样。 function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.active = false } function slide() { if (block.active) { block.xpos += 5 block.left = block.xpos setTimeout("s...
类别:网页编程 - CSS技术,阅读:536,更新:2014-06-10

important终级讲解

很多人,包括很多网站(我所见过的所有网站,包括国内著名的‘网页设计师’网站),都说important是不被IE所支持和认识的,可是真的是这样吗?看了下边的两个例子,也许你会改变一些看法! 例一: <style> #box { color:red !important; color:blue; } </style>    <div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>   这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。 例二: <style> #box div...
类别:网页编程 - CSS技术,阅读:541,更新:2014-06-10

使pre的内容自动换行

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题:1.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。2.查看了pre的浏览器默认样式: xmp, pre, plainte...
类别:网页编程 - CSS技术,阅读:468,更新:2014-06-06

常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。1. 居中布局创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。 #container{ border: solid 1px #000; background: #777; width: 400px; height: 160px; margin: 30px 0 0 30px;} #element{background: #95CFEF; border: solid 1px #36F; width: 300px; height: 100px; margin: 30px...
类别:网页编程 - CSS技术,阅读:523,更新:2014-06-06

ul在Firefox和IE下的不同表现

ul是一个很常用的标签,但是因为它在Firefox和IE下的不同表现,让人觉得它是个很难以控制的标签。  ul在Firefox下有个padding值, 却没有margin值;而在IE下正好相反,ul有个margin值, 却没有padding值.  在Firefox下,ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。  通过权衡得到适合两个浏览器的设置:padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;,然后给li添加背景图片,也是很不错的选择。<style type="text/css">body{font-size:12px; margin:20px; line-height:18px;}ox{width:200px; background-colo...
类别:网页编程 - CSS技术,阅读:460,更新:2014-06-06

css中的position定位和z-index属性

由于平时不太用到,所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档,总算是对盒模型的浮动、定位有了比较深刻的理解。我们在实践中很有可能遇到这样的问题:1、做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键;2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气泡提示破坏正常的文档布局,又不想气泡提示的定位在不同的浏览器中到处乱飘。3、当我们在一句正常的文本中插入一个小图标的话,一般会使用<img />标签...
类别:网页编程 - CSS技术,阅读:537,更新:2014-06-06

将XHTML+CSS页面转换为打印机页面

在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。  从屏幕显示到打印效果  大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料。  现在的麻烦是,让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性,都无法在打印版的Web页面上表现出相同的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的...
类别:网页编程 - CSS技术,阅读:633,更新:2014-06-06

Div+CSS:absolute与relative

Div + CSS 进行网页布局,适当地运用 absolute 与 relative,能给布局带来意想不到的效果和方便,达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。详细讲解两者的关系,需要配合例子,请先看例子 以下是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=gb2312" /><title&...
类别:网页编程 - CSS技术,阅读:515,更新:2014-06-05

IE6.0,ie7.0与Firefox的CSS兼容性

1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上  6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制...
类别:网页编程 - CSS技术,阅读:520,更新:2014-06-05