纯CSS实现上下左右都居中的代码

2016年07月27日 44 阅读

#box{width:600px; height:400px; border:1px solid red;} #box{position:static; *position:relative; display:table; *display:block; } #box-middle{position:static; *position:absolute; display:table-cell; *display:block; *top:50%; vert...

在DW中CSS编码需要注意和掌握的一些技巧

2016年07月27日 45 阅读

由于“可视化”和操作简便，在DW中编写CSS的朋友很多，今天我们介绍一些在DW中编写CSS的“最佳习惯”，希望对大家有所帮助。 CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求，Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性，你可以为未来的更新作好计划，开发与W3C标准更加兼容的站点。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。 一般地讲，样式表（s...

DIV CSS网页布局 最小高度（min-height）的妙用

2016年07月27日 53 阅读

假定有二个BOX，我们需要它的最小高度为150PX。 CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; } xhtml <div>IE中没保持最小高度为150px</div> <div>最小高度可以设定一个BOX的最小高度， 当其内容较少时时，也能保持BOX的...

css position: absolute、relative详解

2016年07月27日 44 阅读

CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁（ margin ），但仍有内补丁（ padding ）和边框（ border ）。 要激活对象的绝对（absolute）定位，必须指定 left ， right ， top ， bottom 属...

实用CSS 文字收集

2016年07月27日 49 阅读

text-transform:uppercase //把文字变成全大写 text-transform:lowercase //把文字变成全小写 text-transform:capitalize //把文字变成首字母大写 text-indent:-9999em //图片添加文字说明但不显示在页面增强SEO...

CSS渐变统计柱形图

2016年07月27日 49 阅读

用作图工具作一个渐变的长度.看起来能好看一点（宽:187px;高15px） 本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地（看起来和1px的图片底没什么区别）.下午时去网罗了一班.发现不占地是不太可能的. 要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了: <div style="background:url（...） 12% left;width:187px;height:15...

跨浏览器的实践:position:fixed 层的固定定位

2016年07月27日 47 阅读

看示例吧: <style type="text/css"> body{ margin:0; padding:30px 0 0 0; } div#menu{ position:absolute; top:0; left:0; width:100%; height:30px; background-color:#ddd; } @media screen{ body>div#menu{ position:fixed; } } * html bo...

标准布局常见问题及解决办法

2016年07月27日 45 阅读

CSS2.0盒模型层次平面示意图和3D示意图 3像素问题及解决办法 当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 如以上例子中的footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，footer也跟着浮动到...

CSS之少用继承，多用组合

2016年07月27日 43 阅读

下面是一段普通的代码: css:复制代码 代码如下:.box{ border:1px solid #ccc; font-size:12px; background:#f1f1f1; padding:10px; } html： 复制代码 代码如下:<div class="box">this is a gray box</div> 但是这个时候需求增加了，在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子，可能还有绿色，通常我们会说用集成...

css美化input file按钮的代码方法

2016年07月27日 44 阅读

input file在系统默认下的外观： 我们最多通过定义input的border来改变系统默认的外观：如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用背景图片来代替，通过css定义input flie还真是办不到的。偶然看到一篇文章：input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。按照作者的方法，我也试验了一下，代码如下： input file的另类做法 ...

重置默认样式 css reset第1/2页

2016年07月27日 47 阅读

我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章， 可以看看国外使用css reset的比例调查。这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站，用Fire...

IE下href 的 BUG问题

2016年07月27日 48 阅读

复制代码 代码如下:<div id="test"> <a href="#"> test </a> </div> <div id="result"></div> <script type="text/javascript"> （function（）{ var test = document.getElementById（"test"）; alert（test.innerHTM...

支持IE6 IE7 Firefox 的纯CSS的下拉菜单

2016年07月27日 48 阅读

纯CSS的下拉菜单 支持IE6 IE7 Firefox *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;lef...

firefox的超链接点击去除扩大的难看虚线的解决方法

2016年07月27日 47 阅读

在某些特殊的情况下，比如做一个导航菜单的时候，出现这个情况时效果就很糟糕了，因为Firefox会错误地扩大链接的边框： 在Firefox的地址栏输入about:config，回车。有一个配置项叫做“browser.display.focus_ring_width”，把它修改成0，点击链接时就不会出现那个边框。但这样的话，在焦点落在按钮上时也没有了边框指示。而且作为一个开发者，在浏览器里设置这个属性，无异于掩耳盗铃。 这实际上是Firefox在<a&g...

css li 超出隐藏代码

2016年07月27日 47 阅读

这样的方法新手们常常不知道该如何搞定。下面就是方法的演示。不过请注意此方法适用与IE与OP浏览器！ 设置li超出部分显示省略号的方法 jb51.net jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div C...

多浏览器支持CSS 容器内容超出（溢出）支持自动换行

2016年07月27日 43 阅读

.linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-...

IE6不能正常解析CSS文件问题的解决方法及原因分析

2016年07月27日 50 阅读

网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，在 IE7 中把它修复了。但是用IE6 的人还是不少。因此这个问...

css 表单效果

2016年07月27日 45 阅读

by 阿会楠 2008-12-4 //js辅助 window.onload = function（）{ var initleft = 200;// 初始化第一个定位 var lis = document.getElementById（"menu"）.getElementsByTagName（"li"）; for（var i = 0;i < lis.length;i++）{ lis[i].style.left = initleft + i*100 ...

div+css模拟表格效果代码

2016年07月27日 42 阅读

DIV+CSS模拟表格效果 - by koyoz.com * {margin:0;padding:0} #main {margin:100px 0 0 200px} #main ul {width:520px;height:165px;list-style:none} #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;heig...

ie6 注释引起的问题

2016年07月27日 46 阅读

问题：div框架里的文字在IE6中出现溢出现象，IE7和FF都显示正常，经过测试，发现这似乎与FLOAT浮动 有关，只要把相应div中的float去掉，就可以显示正常，可缺少了float，在FF下就无法正常显示div的位置，确实让我头疼的非常，今天在网上找找资料，发现IE6的文字溢出原来是由于注释所造成的 问题原因以及解决方法。 原因： 大部分是由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中 文或英文数字时都成立...