CSS设计圆角自适应按钮教程

Oh小菲机

Oh小菲机

2016-02-19 13:36

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS设计圆角自适应按钮教程,一起来学习了解下吧!
!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" xml:lang="en" lang="en"
head
title/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
!--
*{padding:0px;margin:0px;}
body{font-size:12px;}
h2{margin:50px;}
a{text-decoration:none;background:url(http://www.w3css.com/1.jpg) 0 0;float:left;color:#fff;margin:0px 60px 0px 0px; cursor:pointer;}
a span{ position:relative;background:  url(http://www.w3css.com/1.jpg) top right;line-height: 25px;margin:0 -30px 0 30px; padding-right:30px;float:left;}
a:hover{background:  url(http://www.w3css.com/1.jpg) left -25px;height:25px;float:left;margin:0px 60px 0px 0px;}
a:hover span{background:  url(http://www.w3css.com/1.jpg) right -25px;line-height: 25px;margin:0 -30px 0 30px; padding-right:30px;float:left;color:#fff;}
--
/style
/head
body
h2自适应宽度按钮/h2
a href="" title="nogo"span自适应/span/a
a href="" title="nogo"span自适应宽度/span/a
a href="" title="nogo"span自适应宽度,对吧!/span/a
/body
/html

展开更多 50%)
分享

猜你喜欢

CSS设计圆角自适应按钮教程

Web开发
CSS设计圆角自适应按钮教程

圆角自适应宽度按钮的css实现

Web开发
圆角自适应宽度按钮的css实现

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页制作CSS教程:自适应圆角

Web开发
网页制作CSS教程:自适应圆角

CSS教程:图片的自适应居中和兼容处理

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:图片的自适应居中和兼容处理

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Div + CSS高度自适应解决方案

Web开发
Div + CSS高度自适应解决方案

用CSS控制图片自适应大小

Web开发
用CSS控制图片自适应大小

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Mac系统Shift键使用技巧三则

Mac系统Shift键使用技巧三则

教程:在J2ME中基于UDP协议编程

教程:在J2ME中基于UDP协议编程
下拉加载更多内容 ↓