您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

html5仿按钮效果代码介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

下面我们给大家介绍一下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仿按钮的制作方法了。希望大家继续关注我们的网站!