Home > Article > Web Front-end > div css implements adaptive width button_Experience exchange
div css implements adaptive width button_Experience exchange
- PHP中文网Original
- 2016-05-16 12:06:501813browse
implement adaptive width button with div css_experience exchange
let’s look at a picture first: 
the principle is through the background left-align and right-align, use the a tag and span tag to create a complete rounded rectangle. then slide the picture through the hover tag. and you only need one picture:
ok, let’s take a look at the code.
css:
the code is as follows:
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left;
cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(1.gif) left -30px;height:30px;}
a span{background:url(1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px;
height:16px; }html:
the code is as follows:
<body> <h1><strong>css自适应宽度圆角按钮 @5key.net</strong></h1> <a href="#"><span>首页</span></a> <a href="#"><span>不是首页</span></a> <a href="#"><span>他也许是首页</span></a> <a href="#"><span>但他一定不是首页</span></a> <a href="#"><span>好了，就这样把。别扯了~</span></a> </body>
demo:
<!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=gb2312" />
<title>CSS自适应宽度按钮</title>
<style>
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(/upload/20071122231110605.gif) left 0; color:#fff; text-decoration:none;
height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(/upload/20071122231110605.gif) left -30px;height:30px;}
a span{background:url(/upload/20071122231110605.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px;
float:left; height:16px;}
a:hover span{background:url(/upload/20071122231110605.gif) right -30px; color:#000; padding:7px 8px 7px 0;
margin:0 0 0 8px; height:16px; }
</style>
</head>
<body>
<h1><strong>CSS自适应宽度圆角按钮</strong></h1>
<a href="" target="_blank"><span>首页</span></a>
<a href="" target="_blank"><span>不是首页</span></a>
<a href="" target="_blank"><span>他也许是首页</span></a>
<a href="" target="_blank"><span>但他一定不是首页</span></a>
<a href="" target="_blank"><span>好了，就这样把。别扯了~</span></a>
</body>
</html>the above is the div css implementing adaptive width buttons_experience exchange content, please pay attention to the php chinese website (www.php.cn) for more related content!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Tips for using h1 tag_Experience exchangeNext article：Tips for using h1 tag_Experience exchange