5JUN's Blog » div http://5jun.com 快乐生活！快乐工作！ Wed, 01 Sep 2010 15:28:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 给DIV或块元素加链接及:hover效果 http://5jun.com/72.html http://5jun.com/72.html#comments Fri, 05 Dec 2008 22:56:02 +0000 5JUN http://www.5jun.com/wp/?p=72 　　当你在做页面时，想给一个div或p等元素加链接，首先你会考虑到a标签，但是如果在此div内已经包含了多个a标签，你再在此div上套用a标签，是不符合标准的，所以考虑用onmouseover事件。

　　代码如下：

<div onmouseover="this.style.cursor='pointer'"  onclick="document.location='http://www.baidu.com';" >就是这个DIV，点点看。</div>

　　其中Http://www.baidu.com就是你链接到的网址。

　　如果你想此div链接鼠标经过时背景或边框有所变化，可以通过hover来实现。

CSS代码如下： 
div {
　　width:300px;
　　height:100px;
　　color:#666;
　　text-align:center;
　　background:#ddd;
　　border:1px solid #aaa;
}
div:hover,div.hover {
　　color:#fff;
　　background:#0099FF;
　　border:1px solid #000;
}

　　这样当你鼠标经过这个div时，背景色和边框都会发生变化，但是此效果在IE6中不能得到效果，因为IE6不支持hover伪类。在上面CSS样式中:hover是给非IE浏览器识别的，因为大多数非IE浏览器都已经支持任意标记的hover伪类了。.hover是给IE6以及以下版本识别的，因为IE6以及一下版本一直都只支持<A href=”">标记的hover伪类(IE7已支持任意标记hover伪类效果)。

　　为了让IE6也能得到hover效果，还需加入以下JS代码：

<script type="text/javascript">
<!-- // 让所有标记支持hover
function $(){
if(document.all){ // 判断是否IE浏览器
var obj=document.all;
for(var i=0;i<obj.length;i++){
obj[i].onmouseover=function(){
this.className="hover"
} ;
obj[i].onmouseout=function(){
this.className=""
}
}
}
}
$();
//-->
</script>

　　查看效果：

提示：你可以先修改部分代码再运行。

]]> http://5jun.com/72.html/feed 0 随滚动条移动的DIV层 http://5jun.com/54.html http://5jun.com/54.html#comments Mon, 16 Jun 2008 19:42:49 +0000 5JUN http://www.5jun.com/wp/?p=54

提示：你可以先修改部分代码再运行。

]]> http://5jun.com/54.html/feed 0 解决div列高度自动适应的三种最常用的方法 http://5jun.com/34.html http://5jun.com/34.html#comments Tue, 18 Mar 2008 09:24:27 +0000 5JUN http://www.5jun.com/wp/?p=34 　　解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家（下面所有例子以父main，子divleft、divright为例）。

　　1、利用“clear:both”背景填充

　　这是使用最广泛的一种做法，我一直都用此方法解决div列高度自适问题。三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px。

CSS代码：
#main{
　　width: 780px;
　　margin: 0;
　　background: url(bg.gif) #FFFFFF repeat-y left;
　　text-align: left;
}
#divleft{
　　float: left;
　　width: 240px;
}
#divright{
　　float: right;
　　width: 540px;
}
.clear{
　　border-top:1px solid transparent !important;
　　margin-top:-1px !important;
　　border-top:0;
　　margin-top:0;
　　clear:both;
　　visibility:hidden;
}

html代码：
<div id="main">
　<div id="divleft"></div>
　　<div id="divright"></div>
　<div class="clear"></div>
</div>

　　优点：无hacks，完全的自适应高度。

　　2、脚本控制高度

在<body>中加入如下代码（假设divright的高度相对最高）：

<script language="javascript">
document.getElementById"divleft").style.height=document.getElementById"divright").scrollHeight+"px"
</script>

　　优点：代码超级简单。

　　缺点：要确定有某一列的高度始终是相对最高的，此方法比较被动。

　　3、margin负值父子容器高度继承

　　这个方法能较好地解决列高度相同的问题。三行二列布局，主要内容在左边，网页宽度780px,左列540px,右列240px。

CSS代码：
#main{
　　width: 540px;
　　float:left;
　　background:#FFFFFF;
　　text-align:left;
}
#divleft{
　　width: 540px;
　　float: left;
　　position:relative;
　　margin-left:-540px;
}
#divright{
　　width: 240px;
　　float: right;
　　position:relative;
　　margin: 0 -240px 0 0;
　　background: #F0F0F0;
}

html代码：
<div id="main">
　<div id="divleft">
　　<div id="divright"></div>
　</div>
</div>

　　或许刚接触的Web Standards的朋友对这种方法不怎么理解，现Blank分析一下：

　　［Ａ］
　　［Ｂ］［Ｃ］

　　上结构中a包含c，c包含b。当b的高度为最高时，那么a和c将继承b的高度，如果a和b位置重合，将显示b的背景；而当c的高度最高时，那么a继承将继承c的高度，如果a和b位置重合，将显示a的背景。这样无论b最高或者c最高都将显示div列高度相同。

　　优点：兼有第一种方法的优点，并且比第一种方法的代码稍微简洁。

　　缺点：整体结构只能左对齐。

]]> http://5jun.com/34.html/feed 0 常用CSS元素div ul dl dt ol的用法 http://5jun.com/21.html http://5jun.com/21.html#comments Sun, 03 Feb 2008 15:41:06 +0000 5JUN http://www.5jun.com/wp/?p=21 　　div+css网页编写中几个常用css元素div ul li dl dt dd ol li。 div，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好，下面是css元素简单的解释：

　　ol 有序列表。

<ol>
  <li>……</li>
  <li>……</li>
  <li>……</li>
</ol>

　　表现为：

  1. ……
  2. ……
  3. ……

　　ul 无序列表，表现为li前面是大圆点或方点，而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>

　　效果：

  • ……
  • ……
  • ……

　　很多人容易忽略 dl dt dd的用法：

　　dl 内容块
　　dt 内容块的标题
　　dd 内容

　　可以这么写：

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

　　dt 和dd中可以再加入 ol ul li和p

　　理解这些以后，在使用div布局的时候，灵活运用，会方便很多，w3c提供了很多元素辅助布局。

]]> http://5jun.com/21.html/feed 0