请使用CHROME浏览器查看。
TAB导航样式
asdfasdfasdfasdfasdf
代码
< style type="text/css"> .divTab { position:relative; top:2px; margin-left:10px; } .divContent { -webkit-box-shadow:0px 0px 10px #ddd; -moz-box-shadow:0px 0px 10px #ddd; box-shadow:0px 0px 10px #ddd; } .divTab a { text-shadow:1px 1px 5px #999; display:block; float:left; margin-right:5px; border:solid 2px #ddd; padding:0px 10px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; background-color:#eff; color:gray; text-decoration:none; cursor:pointer; } .divTab a:hover { background-color:#fef; } .divTab .aCur { border-bottom:solid 2px white; background-color:white; color:blue; cursor:default; } .divTab .aCur:hover { background-color:white; } </ style > < div class="divTab" style=""> < a href="#">TAB1</ a > < a href="#" class="aCur">TAB1</ a > < a href="#">TAB1</ a > < a href="#">TAB1</ a > </ div > < div class="divContent" style="border:solid 2px #ddd; padding:10px; clear:both;"> asdfasdfasdfasdfasdf </ div > |
IMG样式
代码
< style type="text/css"> .divImg img { -webkit-box-shadow:0px 0px 10px #666; -moz-box-shadow:0px 0px 10px #666; box-shadow:0px 0px 10px #666; border:solid 5px white; outline:1px solid gray; width:200px; height:150px; margin:30px; *border:solid 5px gray; } .divImg img:hover { -webkit-box-shadow:0px 0px 10px red; -moz-box-shadow:0px 0px 10px red; box-shadow:0px 0px 10px red; *border:solid 5px red; } </ style > < div class="divImg"> < img alt="" src="1.jpg" /> < img alt="" src="1.jpg" /> < img alt="" src="1.jpg" /> < img alt="" src="1.jpg" /> < img alt="" src="1.jpg" /> </ div > |
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步