div+css记录实用教程【转摘+原创+持续原创更新】

首先，是整体的布局，拿到效果图，差不多把页面分割成几大部分，比如抬头和尾部和中间的内容区域。

分好几块div就行，然后分别为这些div写css控制，以便真正做到确定他们的具体位置。以下是这一部分一般会用到的经典css说明：

clear：both可以独霸一行的位置~设置这个之后，就可以清楚的为抬头和结尾或中间的div定位成独立一行。然后是一些float和width和height，这些是定位在这一行里面某块区域的大小和位置。

接下来的总结是一些经典的细节，总结如下：

1 虚线的实现：

不需要图片来填充，只需要在<td></td>中加入这么一段就可以了，可以用<div style="border-bottom:1px dashed #ccc"></div>，然后参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。举例：

<div id="banner"></div>

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}

通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

2 定位好div里面的元素位置

在一个div里面，里面的文字或其他元素什么的，默认是顶格在这个div的左上角，那么怎么定位这些在div里面的元素的位置呢？我们可以这样<div style="float:left;padding-top:50px;">再用div或一个span或p来写这些属性~或者：

<div class="father" style="position:relative;">
    <div class="son" style="position:absolute;left:Xpx;top:Ypx;>内容区</div>
</div>
把X.Y换成自己想要距父框的左边距，上边距就行。

3 关于图片按钮的实现

.button {    
     background-image:url(image/u6.png);
     background-repeat:no-repeat;        
     height:23px;width:85px;     
     padding-top:8px;margin-left:-5px;
      background-color: transparent;  
     font-size:12px;  
     cursor: hand;
     border:0px solid #666666
    }

    <div style="float:right;padding-top:50px;padding-right:35px;">
     <input class="button" type="button" value="首 页"
       onmouseover="javascript:this.style.backgroundImage='url(image/ru6.png)';"
        onmouseout="javascript:this.style.backgroundImage='url(image/u6.png)';" />
  
      </div>

如果以上这个div里面有多个input，他们之间的间距调整可以在在button的css里面用：

margin-left:-5px;来调整，如果是input里面的字体，可以用padding-top:8px；来调整

4 关于css+div的圆形矩形

圆角不是BORDER的属性。在PS里做圆角的图片然后做为DIV块的background-image就可以。也就是背景图片已经是圆角矩形了然后把这个背景图片放到div里面，把这个div的边框隐藏了就行。代码如下：

#MainBodyPalt{
     clear:both;width:735px;height:90px;
     margin-left:18px;
     background-image:url(image/u365.png);
     background-repeat:no-repeat;
     border:0px solid #666666;
}

<div id="MainBodyPalt">
   
    </div>

遇到图片没能整个覆盖，就是因为没有设置它平铺，怎么设置呢？很简答，在css里面写：background-repeat:no-repeat; 让它平铺，就行啦。

5 在圆形矩形div里面放元素。

要在一个div里面布局好你想要的元素，可以直接用p来规划，间隙可以用padding来定夺，也可以用span标签来拉开元素间的固定间隔，当然了，span里面也是用padding来拉开距离。

6 矩形线条框+圆形抬头

做法是用一个div的背景图片变成那个矩形图片，当然，实现应该准备标题的圆形图片和矩形线条的图出来。然后在这个div里加入一个<h1></h1>来放圆形背景图片的标题就可以了，然后写CSS来控制这个h1标签，就可以实现。代码如下：

   <div id="Sidebar">
    <p class="bar1"><span class="text">最新消息</span></p>
   </div>

      .bar1{
         width:745px;height:33px;float:left;
         padding:12px;margin-top:-2px;
         background-image:url(image/u67.png);
         background-repeat:no-repeat;
         border:0px solid #989898;
      }

      #Sidebar {
          width:745px;height:515px;float:left;  
          margin-top:20px;      
          background-image:url(image/u60.png);
     background-repeat:no-repeat;
             border:0px solid #989898 ;  
          }

一般在调试的时候，可以先保留border的值为1，然后好调整。

 

7 如何调整线条框架在div里面的位置：

有时候我们在div里面用矩形框架作为背景图片，偶尔线条和div之间还是有点距离，没能达到顶着边线的效果。这时候可以这样调整：background:url(ztcs/u42.png) -3px -3px no-repeat; 左 上 的间距去调整。

8 div里面的字体居中

有时候div是个图片按钮，上面有文字，默认居中不了，怎么办？<span style="text-align:center; line-height:26px;">居中文字</div>

9 导航，鼠标滑过图片按钮改变背景图片和文字颜色：

<span style="position:absolute;left:318px;top:2px;">
                  <div class="nav" id="nav1" onmouseover="chage1(1,this)" onmouseout="chage2(1,this)">首页</div>
                   <div class="nav" id="nav2" onmouseover="chage1(2,this)" onmouseout="chage2(2,this)">真题测试</div>
                  <div class="nav" id="nav3" onmouseover="chage1(3,this)" onmouseout="chage2(3,this)">弱项诊治</div>
                 <div class="nav" id="nav4" onmouseover="chage1(4,this)" onmouseout="chage2(4,this)">高分训练</div>
                   <div class="nav" id="nav5" onmouseover="chage1(5,this)" onmouseout="chage2(5,this)">错题集</div>
                       <div class="nav" id="nav6" onmouseover="chage1(6,this)" onmouseout="chage2(6,this)">考试大纲</div>
                      <div class="nav" id="nav7" onmouseover="chage1(7,this)" onmouseout="chage2(7,this)">用户管理</div>
                        </span>

 

<script language='JavaScript'>

function chage1(n,obj)
{ var oTip = document.getElementById("nav"+n);
oTip.style.background = "url(ztcs/ru23.jpg)";
oTip.style.color="#000000";
}
function chage2(n,obj)
{ var oTip = document.getElementById("nav"+n);
oTip.style.background = "";
oTip.style.color="#FFFFFF";
}
</script>

 

评论

4 楼 修补匠 2010-12-15  

额...直接说浏览器兼容问题怎么解决吧。

3 楼 ld57601870 2010-12-15  

很不错的分享，楼主开发中的点滴，期待楼主以后更多的分享。呵呵~~~

2 楼 jhlxge 2010-12-15  

不错的分享，在实际的运用中还有很多的小技巧，多多的总结、积累、分享才好。

1 楼 Javakeith 2010-12-12  

给个效果看看呗！这样的格式，看着真有点晕！