|
这里将给大家介绍一种仅仅通过文本CSS效果来实现这种按钮图片的方式，比起前者，更加简单、灵活、方便！ 【演示】 W3C CSS Valid RSS 1.0 Google Me MSN huangmj@mx.cei.gov.cn QQ 379945116 【HTML代码】 <span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: white; color: #06c"> W3C </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: #06c; color: white;"> CSS Valid </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: white; color: #c60"> RSS </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: orange; color: black"> 1.0 </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: white; color: green"> Google </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: green; color: white"> Me </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#ccf; color:#006"> MSN </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#006; color:white"> huangmj@mx.cei.gov.cn </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#003; color:#ffc"> QQ </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#dd9; color:black;"> 379945116 </span> 【说明】 v 必须在html编辑状态下编辑代码。 v 每个按钮都是由两个Span元素构成。 v Span元素通过Style属性控制样式，主要设置如下： font-size（字体大小）：数值； font-weight（字体粗细）：normal、bold、bolder、lighter； font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆； background（背景颜色）：色彩代码； color（字体颜色）：色彩代码； border（边框）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； |
加入收藏 
通过CSS实现按钮图片效果
网友评论：（只显示最新5条。评论内容只代表网友观点，与本站立场无关！）