Rumah >hujung hadapan web >tutorial css >div+css melaksanakan butang lebar penyesuaian_Pertukaran pengalaman
div+css melaksanakan butang lebar penyesuaian_Pertukaran pengalaman
- PHP中文网asal
- 2016-05-16 12:06:501832semak imbas
div+css untuk melaksanakan butang lebar adaptif_Pertukaran pengalaman
Mari kita lihat gambar dahulu: 
Prinsipnya melepasi kiri sisi latar belakang Jajar dan jajarkan ke kanan menggunakan tag A dan teg span untuk mencipta segi empat tepat bulat lengkap. Kemudian luncurkan gambar melalui teg hover. Dan anda hanya perlukan gambar: 
ok, mari kita lihat kodnya.
CSS:
Kod adalah seperti berikut:
*{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:
Kod adalah seperti berikut:
<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>
Demonstrasi:
<!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>Di atas ialah kandungan pelaksanaan div+css pertukaran butang_pengalaman lebar penyesuaian kandungan, sila beri perhatian kepada laman web PHP Cina (www.php.cn)!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Petua untuk menggunakan h1 tag_Experience exchangeArtikel seterusnya：Petua untuk menggunakan h1 tag_Experience exchange