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

div+css记录实用教程【转摘+原创+持续原创更新】
??? <div 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 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;
}

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

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

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

6 矩形线条框+圆形抬头

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

?? <div id="Sidebar">
??? <p id="nav1" onmouseover="chage1(1,this)" onmouseout="chage2(1,this)">首页</div>
?? ????? ????????? <div id="nav2" onmouseover="chage1(2,this)" onmouseout="chage2(2,this)">真题测试</div>
????????????????? <div id="nav3" onmouseover="chage1(3,this)" onmouseout="chage2(3,this)">弱项诊治</div>
???????????????? <div id="nav4" onmouseover="chage1(4,this)" onmouseout="chage2(4,this)">高分训练</div>
?????????????????? <div id="nav5" onmouseover="chage1(5,this)" onmouseout="chage2(5,this)">错题集</div>
?????????????????????? <div id="nav6" onmouseover="chage1(6,this)" onmouseout="chage2(6,this)">考试大纲</div>
????????????????????? <div id="nav7" onmouseover="chage1(7,this)" onmouseout="chage2(7,this)">用户管理</div>
??????????????????????? </span>

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>

1 楼 Javakeith 2010-12-12 给个效果看看呗！这样的格式，看着真有点晕！ 2 楼 jhlxge 2010-12-15 不错的分享，在实际的运用中还有很多的小技巧，多多的总结、积累、分享才好。 3 楼 ld57601870 2010-12-15 很不错的分享，楼主开发中的点滴，期待楼主以后更多的分享。呵呵~~~ 4 楼修补匠 2010-12-15 额...直接说浏览器兼容问题怎么解决吧。

div+css记要实用教程【转摘+原创+持续

热点推荐