首页新闻找找看学习计划

CSS如何实现图片中的效果?不用背景图片怎么实现?

0
悬赏园豆:30 [已解决问题] 解决于 2011-10-20 12:44

实现中间背景统一是白色,周围都有边框。

simbel的主页 simbel | 初学一级 | 园豆:30
提问于:2011-10-20 10:12
< >
分享
最佳答案
0

示例:

<!DOCTYPE html>
<html>
<head>
<title>abc</title>
<style type="text/css">
#nav_bar
{
height
: 45px;
margin-left
: 170px !important;
margin-top
: 20px;
position
: absolute;
width
: auto;
z-index
: 68;
}
.nav_dd.selected
{
border
: 1px solid #DEDEDE !important;
}
.selected
{
border-color
: #005BA6;
color
: #FFFFFF !important;
}
.nav_dd
{
background
: none repeat scroll 0 0 #FFFFFF;
border
: 1px solid #FFFFFF !important;
color
: black;
cursor
: pointer;
float
: left;
font-size
: 20px;
font-weight
: bold;
height
: 29px;
line-height
: 30px;
margin-right
: 24px;
overflow
: hidden !important;
padding
: 0 10px;
position
: relative;
z-index
: 50;
}
.nav_dd span.label
{
background
: none repeat scroll 0 0 #FFFFFF;
border-bottom
: 1px solid white;
color
: #164065;
height
: 100%;
position
: absolute;
right
: 0;
text-align
: center;
top
: 0;
width
: 100%;
z-index
: 50;
}
.nav_dd div.content
{
background
: none repeat scroll 0 0 white;
border
: 1px solid #494949;
box-shadow
: -3px 3px 3px rgba(0, 0, 0, 0.45);
left
: -1px;
margin
: 0 !important;
min-width
: 100%;
position
: absolute;
top
: 30px;
z-index
: 40;
}
.nav_dd div a
{
border-top
: 1px solid #FFF;
cursor
: pointer;
display
: block;
font-size
: 13px;
font-weight
: normal;
padding
: 2px 8px;
text-decoration
: none;
white-space
: nowrap;
}
a
{
color
: #164065;
cursor
: pointer !important;
}
.nav_dd:hover
{
box-shadow
: -3px 3px 3px rgba(0,0,0,0.45);
-moz-box-shadow
: -3px 3px 3px rgba(0,0,0,0.45);
-webkit-box-shadow
: -3px 3px 3px rgba(0,0,0,0.45);
overflow
: visible !important;
border
: 1px solid #494949 !important;
height
: 30px
}
.content a:hover
{
font-size
:15px;
font-weight
:bold;
}
</style>
</head>
<body style="background:none;">
<div style="" id="nav_bar">
<div class="nav_dd selected" id="ask">
cnblogs
<span class="label">
cnblogs
</span>
<div class="content">
<a href="http://q.cnblogs.com">q.cnblogs.com</a>
<a href="http://www.cnblogs.com">www.cnblogs.com</a>
</div>
</div>
</div>
</body>
</html>

效果:



收获园豆:30
artwl | 专家六级 |园豆:16526 | 2011-10-20 11:24

太牛了,谢谢

simbel | 园豆:30 (初学一级) | 2011-10-20 12:44
其他回答(1)
0

同样告诉你

很简单的.products单独一个背景图片.注意下面是没边框线的.然后当鼠标移动上去给这个products的元素加上position:relative;z-index:999999

深蓝色梦想 | 园豆:6 (初学一级) | 2011-10-20 10:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册