HTML“按钮”的设置！

最新推荐文章于 2024-05-16 18:18:03 发布

学不会的程序猿

最新推荐文章于 2024-05-16 18:18:03 发布

阅读量2.7k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46651716/article/details/105235737

版权

说实话我的记性不太好，好怕有时候解决的问题忘记掉，所以想写博客记录一下！
这次是“按钮”的一个写法，其实就是通过边框填充一个超链接再加上鼠标点击时候的样式来得到一个假按钮，虽然写出来很LOW但是总感觉会有用吧~

1、创建超链接

<body>
	<div>
		<ul>
		<li><a href="#">新闻新闻</a></li>
		<li><a href="#">首页    </a></li>
		<li><a href="#">超链接三</a></li>
		<li><a href="#">超链接四</a></li>
		</ul>
		<div>	
</body>

可以看到是这样的

2、添加CSS样式
主要通过改变边框的颜色来达到“按钮”的效果

<style type="text/css">
	a:link,a:visited,a:hover,a:active,.biaoti
			{
				text-decoration:none;
				color:black;
				}
				
	a:active{
		background-color: #d4d0c8;
		padding:30px;
		border: 2px solid ;
		border-top-color:#808080 ;
		border-left-color:#808080;
		border-bottom-color:#EEEEEE; 
		border-right-color:#EEEEEE;
	}
	.biaoti{
		background-color:#d4d0c8;
		border: 2px solid ;
		border-top-color: #EEEEEE;
		border-left-color: #EEEEEE;
		border-bottom-color: #808080; 
		border-right-color: #808080;
		padding:30px;
		margin: 50px;
		float: left;
		display:block;
	}
	</style>

应用一下

<body>
	<div>
		<ul>
		<li style="list-style: none;"><a class="biaoti" href="#">新闻新闻</a></li>
		<li style="list-style: none;"><a class="biaoti" href="#">首页</a></li>
		<li><a href="#">超链接三</a></li>
		<li><a href="#">超链接四</a></li>
		</ul>
		<div>
</body>

下面的按钮点击就会有一种神奇的效果

注意：不可以把class样式写在《li》里！

学不会的程序猿

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML“按钮”的设置！

说实话我的记性不太好，好怕有时候解决的问题忘记掉，所以想写博客记录一下！这次是“按钮”的一个写法，其实就是通过边框填充一个超链接再加上鼠标点击时候的样式来得到一个假按钮，虽然写出来很LOW但是总感觉会有用吧~1、创建超链接<body> <div> <ul> <li><a href="#">新闻新闻</a>&l...
复制链接

扫一扫