CSS设计推荐

[Jack]

给大家介绍一个网站: http://www.dynamicdrive.com/
上面有很多非常好的CSS样本。
下面给出一个横向菜单的例子，使用在导航条上，可以达到不错的效果。


效果演示

 

• 首页
• 新进商品
• 特价商品
• 公司简介
• 联系我们

CSS代码

代码: 全选

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#invertedtabs ul{
font: bold 14px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}


#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>


HTML代码

代码: 全选

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://demo.zen-cart.cn" title="Home"><span>首页</span></a></li>
<li><a href="http://demo.zen-cart.cn/products_new.html" title="New Product"><span>新进商品</span></a></li>
<li><a href="http://demo.zen-cart.cn/specials.html" title="Specials"><span>特价商品</span></a></li>
<li id="current"><a href="http://demo.zen-cart.cn/page.html?id=8" title="Intro"><span>公司简介</span></a></li>   
<li><a href="http://demo.zen-cart.cn/contact_us.html" title="About Us"><span>联系我们</span></a></li>   
</ul>
</div>

<br style="clear: left" />

[zpfkufei]

貌似不怎么样

[liuchong]

CSS禅意花园比较经典

[kk190_1]

css很菜呢。

[hws001]

我想弄下来的菜单列表。刚好用上了

[Jack]

好几年前的帖子了，翻出来看看。再贴一个效果图：

• 首页
• 新进商品
• 特价商品
• 公司简介
• 联系我们

CSS 源代码：

代码: 全选

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#tabs {
   float:left;
   width:100%;
   font-size:100%;
   line-height:normal;
   border-bottom:1px solid #666;
   margin-bottom:1em; /*margin between menu and rest of page*/
   overflow:hidden;
   }

#tabs ul {
   margin:0;
   padding:10px 10px 0 0px;
   list-style:none;
   
   }

#tabs li {
   display:inline;
   margin:0;
   padding:0;
   }

#tabs a {
   float:left;
   background:url("http://www.dynamicdrive.com/cssexamples/media/left.png") no-repeat left top;
   margin:0;
   padding:0 0 0 6px;
   text-decoration:none;
   }

#tabs a span {
   float:left;
   display:block;
   background:url("http://www.dynamicdrive.com/cssexamples/media/right.png") no-repeat right top;
   padding:6px 15px 4px 6px;
   margin-right:2px;
   color:#FFF;
   }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
   color:white;
   }

#tabs a:hover {
   background-position:0% -42px;
   color:white;
   }

#tabs a:hover span {
   background-position:100% -42px;
   }

</style>

HTML 源代码：

代码: 全选

<div id="tabs">
  <ul>
<li><a href="http://demo.zen-cart.cn" title="Home"><span>首页</span></a></li>
<li><a href="http://demo.zen-cart.cn/products_new.html" title="New Product"><span>新进商品</span></a></li>
<li><a href="http://demo.zen-cart.cn/specials.html" title="Specials"><span>特价商品</span></a></li>
<li><a href="http://demo.zen-cart.cn/page.html?id=8" title="Intro"><span>公司简介</span></a></li>   
<li><a href="http://demo.zen-cart.cn/contact_us.html" title="About Us"><span>联系我们</span></a></li>   
  </ul>
</div>

[Jack]

来看一个适合商品图片、或者在商品简介中插入图片的效果：

将鼠标移到后面这些文字或图片上，看看利用CSS弹出图片的效果。Zen Cart 网店一
、Zen Cart 网店二
、Zen Cart 网店三



Simply beautiful.
So real, it's unreal. Or is it?

CSS 源代码：

代码: 全选

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 20px;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML 源代码：

代码: 全选

将鼠标移到后面这些文字或图片上，看看利用CSS弹出图片的效果。<a class="thumbnail" href="#">Zen Cart 网店一<span><img src="http://www.zen-cart.cn/uploads/img46a6479705312.jpg" /><br /></span></a>、<a class="thumbnail" href="http://www.lightinthebox.com">Zen Cart 网店二<span><img src="http://www.zen-cart.cn/uploads/img46a6478210957.jpg" /><br /></span></a>、<a class="thumbnail" href="http://www.bajiaojie.com">Zen Cart 网店三<span><img src="http://www.zen-cart.cn/uploads/img46a646ad61707.jpg" /><br /></span></a>
<br />
<br />

<a class="thumbnail" href="#thumb"><img src="/uploads/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="/uploads/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="/uploads/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="/uploads/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>


[crazy4u]

我喜欢mega菜单，可惜FIREFOX对js的支持不好

[dahoonwang]

这个如何应用到zen-cart中产品页面附图中呢，比如鼠标滑过就显示大图