flash遮盖div层在IE和FF下解决办法
flash遮盖div层在IE和FF下解决办法
Archive for category: HTML&CSS
条件注释的使用详解
玩WEB重构的朋友相信都有一个同样的苦恼，那就是由于浏览器版本的不同，对CSS里某些元素的解释也不一样，才子当然也碰到同样的问题，也收集了一些解决方法，才子之前贴过两个针对浏览器版本不同而选择不同css的代码，有兴趣的朋友自己找找吧。 其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，才子也在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧。 <!–[if XXX]> 这里是正常的html代码 <![endif]–> 这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义： <!–[if IE]> / 如果浏览器是IE / <!–[if IE 5]> / 如果浏览器是IE 5 的版本 / <!–[if IE 6]> / 如果浏览器是IE 6 的版本 / <!–[if IE 7]> / 如果浏览器是IE 7 的版本 / …… 上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数： 有几个参数：lte，lt，gte，gt及! 各自的详细解释如下： lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater [...]
CSS截取图片大小
<!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=utf-8" /> <title>无标题文档</title> </head> <body> <img src="http://img2.126.net/xoimages/auto/20091125/200×60.gif" style="position:absolute;clip:rect(20px 104px 30px 10px);" /> </body> </html> 图片必须绝对定位 截取的效果是 104px宽 30px高 以原图片x轴10px y轴20px的地方为起点 这个东西似乎很少有地方用到 但还是觉得挺有意思的 知道有这么个意思就行了 呵呵
100%宽度div在改变浏览器窗口大小时背景截断情况的解决办法
100%宽度的div设有背景图片，如果浏览器窗口宽度小于内容宽度，将出现背景"截断"情况。 这是一个经典且常见的问题，通常会出现在网站的顶部。 不论是音乐小站还是门户大站都没有"逃过此劫"··· 音乐站：http://www.520music.com/Art/520music.com_1.htm(在IE6和FF下缩小浏览器窗口，页面底部发生背景"截断"情况) 门户站：http://www.163.com/ http://www.qq.com/ (163在FF下，qq在IE下缩小浏览器窗口都会发生类似情况)，还有qihoo，其实都是这样。 这里有个具体的例子：demo 那么，怎么才能解决这个问题呢？ 下面，给出几种解决的办法： 第一种：在100%宽度的div里再嵌套一层div，给这个div同样设一样bg即可。demo 第二种：用表达式加min-width实现。demo 个人推荐使用第一种方法来解决这个问题，虽然增加了一层div，但总比表达式要好，我觉得表达式这种东西就交给js吧···
div自适应高度的几种方法
相信大家都知道最简单的div自适应高度的方法：给div设较大的负外边距，再设较大的等值内边距。即下面的第一种方法： ①margin-bottom:-9999px;padding-bottom:9999px; 然后给最外面的div来个overflow:hideen;就可以了。 那么第二种方法，是js的方法： ②<script language="javascript"> document.getElementById( "H2").style.height=document.getElementById("H1").scrollHeight+"px"; </script> 但这个情况是假设H1div的高度高于H2div的高度，所以取得H1的高度值赋给H2。 考虑周全一点的话，就是多做一个判断： <script language="javascript"> if (document.getElementById( "H2").scrollHeight < document.getElementById("H1").scrollHeight) { document.getElementById( "H2").style.height=document.getElementById("H1").scrollHeight+"px"; } else { document.getElementById( "H1").style.height=document.getElementById("H2").scrollHeight+"px"; } </script> 不管如何 js的方法总归有些缺陷。 个人推荐使用第一种方法！
SEO优化div+css命名规则
用合适的Div层命名和Css命名，可能会让搜索引擎的Spider更快更准确地觉察到页面内容的相关性，以增强网站的搜索优化呢。对于百度由为重要。因为百度收录二级页面的时候是不收录meate标签的。而是收录网页内容。 但是内容他也会过滤一些标签，比如 nav,subnav,logo等等.. 网站的头部文件大多数都是共用的一个header，所以在百度收录的时候会出现所有的页面说明信息都是一样的。只有title不一样。这样对百度的收录会有很大的影响。有很多人抱怨百度删除他网站的收录量，其实这就是其中的原因之一.. 好了，话不多说。以下是一些常用的命名方式 页头：header 登录条：loginBar 标志：logo 侧栏：sideBar 广告：banner 导航：nav 子导航：subNav 菜单：menu 子菜单：subMenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendLink 页脚：footer 版权：copyRight 1.CSS ID 的命名 外 套： wrap 主导航： mainNav 子导航： subnav 页 脚： footer 整个页面： content 页 眉： header 页 脚： footer 商 标： label 标 题： title 主导航： mainNav（globalNav） 顶导航： topnav 边导航： sidebar 左导航： leftsideBar 右导航： rightsideBar 旗 志： logo [...]
文字垂直居中一法
CSS部分： <style type="text/css"> div{ position:relative; } span{ position:absolute; top:50%; left:0; margin-top:-25px; width:20px; height:50px; font-size:12px; } </style> HTML部分： <div style="width:20px; height:120px; background:#ccc; text-align:center;"><span>网络游戏</span></div>
怎样使页面中某一区域固定，不随滚动条滚动而滚动？
CSS部分： <style type="text/css"> body{ margin:0; padding:0; } html{_overflow:hidden;} body{_overflow:auto;height:100%;} .main{ margin:0 auto; background:#ccc; width:960px; } .left{ position:fixed; _position:absolute; left:0; top:0; background:#03c; width:300px; height:400px; } .right{ float:right; width:660px; background:#9c3; } </style> HTML部分： <div class="main"> <div class="right"> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> <p>我想左侧的蓝色区域是固定的</p> [...]
JS实现下拉菜单
CSS部分： ul{ margin:0; padding:0; list-style:none; } li{ float:left; width:160px; margin-left:1px; } ul li a{ display:block; font-size:12px; border:1px solid #CCC; padding:3px; text-decoration:none; color:#777; text-align:center; } ul li a:hover{ background-color:#0099CC; color:#FFFFFF; } li ul{ display:none; } li:hover ul,li.over ul{ [...]
