萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> html5仿按鈕效果代碼介紹

html5仿按鈕效果代碼介紹

下面我們給大家介紹一下html5仿按鈕的制作方法吧!希望大家可以在這裡學習!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<head>

<title>仿按鈕效果的導航菜單</title>

<FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />

<!--把下面代碼加到<head>與</head>之間-->

<style type="text/css">

#navigation{

font-size:90%

}

#navigation ul{

list-style:none;

margin:0;

padding:0;

padding-top:1em;

}

#navigation li{

display:inline;

}

#navigation a:link,#navigation a:visited{

margin-right:0.2em;

padding:0.2em 0.6em 0.2em 0.6em;

color:#A62020;

background-color:#FCE6EA;

text-decoration:none;

border-top:1px solid #FFFFFF;

border-left:1px solid #FFFFFF;

border-bottom:1px solid #717171;

border-right:1px solid #717171;

}

#navigation a:hover{

border-top:1px solid #717171;

border-left:1px solid #717171;

border-bottom:1px solid #FFFFFF;

border-right:1px solid #FFFFFF;

}

</style>

</head>

<body>

<!--把下面代碼加到<body>與</body>之間-->

<div id="navigation">

<ul>

<li><a href="#" _fcksavedurl="#">11</a></li>

<li><a href="#" _fcksavedurl="#">22</a></li>

<li><a href="#" _fcksavedurl="#">33</a></li>

<li><a href="#" _fcksavedurl="#">44</a></li>

</ul>

</div>

</body>

</html>

以上就是我們給大家介紹的html5仿按鈕的制作方法了。希望大家繼續關注我們的網站!

copyright © 萬盛學電腦網 all rights reserved