在html建站里，div如居中，有哪些方法能实现div层居中，还有div层于div层的上下左右间距时如何设计。
在html建站里，div如居中，有哪些方法能实现div层居中，还有div层于div层的上下左右间距时如何设计。如何制作下面图片显示的效果。当鼠标停留在图片上就显示出一个边...
在html建站里，div如居中，有哪些方法能实现div层居中，还有div层于div层的上下左右间距时如何设计。如何制作下面图片显示的效果。当鼠标停留在图片上就显示出一个边框能把文字图片都包住那种（见图更详细）当鼠标移出时边框消失。这种显示效果怎样制作的？？？谢谢！
展开
展开全部
前面说的DIV居中的问题，描述的不清楚！
以下是我的猜想：
DIV相对于父级水平居中，可以使用margin-left:auto; margin-right:auto;
以下是例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#F00; margin:0px;">
<div style="margin-left:auto; margin-right:auto; background-color:#000; width:950px; height:500px;">
</div>
</body>
</html>
然后是DIV相对于DIV上下左右的间距：
在日常布局中DIV相对于DIV的位置分为，同级和子级：
子级：一般只需要给出2个边距即可，上（下）、左（右）；
例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#F00; margin:0px;">
<div style="margin-left:auto; margin-right:auto; background-color:#000; width:950px; height:500px; vertical-align:middle;">
<div style="margin-left:50px; margin-top:50px; background-color:#FFF; width:600px; height:300px; position:absolute; text-align:center;">
我是黑色DIV的子级；我距离黑色DIV顶部50px、左边50px；
</div>
</div>
</body>
</html>
第三个，小弟也才疏学浅，边框是用背景颜色出来的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
无标题文档
</title>
<style>
.aaa:hover{ background-color:#000;}
</style>
</head>
<body style="background-color:#F00; margin:0px;">
<div style="margin-left:auto; margin-right:auto; background-color:#000; width:950px; height:500px; vertical-align:middle;">
<div style="margin-left:20px; margin-top:50px; background-color:#FFF; width:900px; height:300px; position:absolute; text-align:center;">
<div style="margin-top:25px; ">
<ul style="list-style:none;">
<li style="float:left;">
<a class="aaa" style="display:block; width:198px; height:248px; border:0px solid #000; float:left; ">
<img style="background-color:#FFF; width:196px; height:200px; margin-top:1px;"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block; background-color:#FFF; width:196px;height:45px; position:absolute; margin-left:1px; border-top:1px solid #999; ">
文字说明
</span>
</a>
</li>
<li style="float:left; margin-left:20px;">
<a class="aaa" style="display:block; width:198px; height:248px; border:0px solid #000; float:left; ">
<img style="background-color:#FFF; width:196px; height:200px; margin-top:1px;"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block; background-color:#FFF; width:196px;height:45px; position:absolute; margin-left:1px; border-top:1px solid #999; ">
文字说明
</span>
</a>
</li>
<li style="float:left; margin-left:20px;">
<a class="aaa" style="display:block; width:198px; height:248px; border:0px solid #000; float:left; ">
<img style="background-color:#FFF; width:196px; height:200px; margin-top:1px;"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block; background-color:#FFF; width:196px;height:45px; position:absolute; margin-left:1px; border-top:1px solid #999; ">
文字说明
</span>
</a>
</li>
<li style="float:left; margin-left:20px;">
<a class="aaa" style="display:block; width:198px; height:248px; border:0px solid #000; float:left; ">
<img style="background-color:#FFF; width:196px; height:200px; margin-top:1px;"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block; background-color:#FFF; width:196px;height:45px; position:absolute; margin-left:1px; border-top:1px solid #999; ">
文字说明
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div可以用边距控制间隔或居中第二个问题，这个很简单，只要在<a>标签设置个伪类参数，比如你说的效果，就是当鼠标移到链接上时边框变灰。
建议你先多看看基础知识，可以在这里学习下：http://www.w3school.com.cn/css/css_pseudo_classes.asp
建议你先多看看基础知识，可以在这里学习下：http://www.w3school.com.cn/css/css_pseudo_classes.asp
追问
我的意思是，一个很大的DIV层，里包含多个小块DIV层。如何让大的DIV层 居中？
追答
这样：margin: 0 auto
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
高+行高；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
