注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

CSS漂亮的便签框  

2013-08-17 10:23:48|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:(单击放大)
CSS漂亮的便签框 - 米欧studio - 米欧光影工作室
作用:
用于分类显示信息。鼠标悬停背景白色显示。
没有实现web实时编辑的js。


html代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>163邮箱-快捷登陆</title>
<!--auther wjl(jimmymall#163.com) -->
<style type="text/css">
/*background and structure*/
html,body,div,a,p,ul,ol,li,h2{margin:0; padding:0;}
li,ul,ol{ list-style: none;}

#wrap{
background-color: #f5f5f5;
width:850px;
padding: 50px;
margin:0 auto;
}

body{
font-size:15px;
font-family:Arial, times new roman, Helvetica, sans-serif,"宋体";
}


#light {
background-color: #fff;
border: 1px solid #dedede;
padding: 10px;
margin-top: 20px;
}
/*
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

*/





/*colors*/
.pink, .pink:visited { background-color: #e22092; }
.pink:hover { background-color: #c81e82; }

.green, .green:visited{ background-color: #91bd09; }
.green:hover { background-color: #749a02; }

.red, .red:visited{ background-color: #e62727; }
.red:hover{ background-color: #cf2525; }

.orange, .orange:visited{ background-color: #ff5c00; }
.orange:hover{ background-color: #d45500; }

.blue, .blue:visited { background-color: #2981e4; }
.blue:hover{ background-color: #2575cf; }

.yellow, .yellow:visited{ background-color: #ffb515; }
.yellow:hover{ background-color: #fc9200; }

.purple, .purple:visited{ background-color: #7535A7; }
.purple:hover{ background-color: #682F93; }

.black, .black:visited{ background-color: #4f4e4f; }
.black:hover{ background-color: #000; }

.greenyellow, .greenyellow:visited{ background-color: #ADFF2F; }
.greenyellow:hover{ background-color: #96FA00; }

.cyan, .cyan:visited{ background-color: #00CCFF; }
.cyan:hover{ background-color: #00A3CC; }

.brown, .brown:visited{ background-color: #964B00; }
.brown:hover{ background-color: #693400; }

.lakeblue, .lakeblue:visited{ background-color: #00ABA9; }
.lakeblue:hover{ background-color: #008583; }

.white, .white:visited{ background-color: #f1f1f1; color:black; }
.white:hover{ background-color: #ddd; }






/*the boxes*/
.space50{ display:block; clear:both; overflow:hidden; height:50px; width:100%;}

#boxes{ overflow:hidden; border:#efeeef 13px solid;}


.box{ background:#FFEEDF; /*FFE6D1*/

height:200px; width:200px;
margin:2px;
border:#ccc 1px solid;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

float:left; word-wrap:break-word;
}
.box:hover{ background:#fff;}

.title{ color:#fff; font-size:20px;

height:35px; line-height:35px; width:200px;
margin:0px; padding:0;

border-top-left-radius:6px; border-top-right-radius:6px;
-moz-border-left-top-radius: 6px;
-webkit-border-left-top-radius: 6px;

display:block; float:left; overflow:hidden;
}
.card{ font-size:12px; float:left; color:#999; text-shadow:none;}
.card ol{padding-left:20px; margin:0;}
.card ol li{list-style:decimal; padding:0; width:180px; padding-left:-10px; margin-left:-3px;}





</style>

</head>







<body>
<div id="wrap">

<p style="color:#999">Updated:2013-8-17</p>




<!-- 这个是下面的分类部分 -->
<div id=boxes>


<div class=box>
<div class="title pink">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title orange">分类一</div>
<div class=card></div>
</div><!--end of box class-->


<div class=box>
<div class="title yellow">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title green">分类一</div>
<div class=card></div>
</div><!--end of box class-->




<div class=box>
<div class="title blue">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title cyan">分类一</div>
<div class=card></div>
</div><!--end of box class-->





<div class=box>
<div class="title purple">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title greenyellow">分类一</div>
<div class=card></div>
</div><!--end of box class-->





<div class=box>
<div class="title black">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title brown">分类一</div>
<div class=card></div>
</div><!--end of box class-->



<div class=box>
<div class="title red">分类一</div>
<div class=card></div>
</div><!--end of box class-->


<div class=box>
<div class="title lakeblue">分类一</div>
<div class=card></div>
</div><!--end of box class-->

</div><!--end of boxes ID-->




</div>
</body>
</html>




refer:

  评论这张
 
阅读(381)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017