链接，按钮

最新推荐文章于 2022-11-08 22:53:49 发布

andyweike

最新推荐文章于 2022-11-08 22:53:49 发布

阅读量144

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/andyweike/article/details/84266181

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.基于a元素，使用css制作图片按钮

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

要点：要把a块状化

有时超链接内容太长时要强制不被拆开换行，使用 a {word-break:keep-all;white-space:nowrap;}，但如果宽度比容器的一行还要宽怎么办？还是允许它拆分换行？

2. 滑动门技术，自适应宽度按钮
指按钮的宽度可以随着内容的多少而改变，这个在导航菜单上的应该尤为广泛。
主要技术是在a中嵌入辅助标签span，两者都使用同样的背景图片，a中背景图片右对齐，span中背景图片左对齐，文字在span中，当文字多时会把span撑开，两张背景图片重叠后形成一张像自适应宽度的图片。
图片的宽度要大于应用的最大宽度，这样就使每个背景图片都不会显示全，即被切掉了左边或右边一部分，最后两张背景图片组成了一张完整的，可滑动式的背景图片。

<style>
#nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; background:url(/upload/2010-07/05/13.gif) 0 bottom repeat-x; overflow:hidden;}
#nav li { float: left; margin-left: 5px; }
#nav a { display: block; float:left; height: 28px; line-height: 28px; text-align:center; color: #da4901; font-weight:bold; background:url(/upload/2010-07/05/13.gif) right -28px no-repeat; padding-right:18px; text-decoration: none; }
#nav a span { display:block; background:url(/upload/2010-07/05/13.gif) left -28px no-repeat; padding-left:18px;}
#nav a:hover { background:url(/upload/2010-07/05/13.gif) right 0 no-repeat; color:#fff;}
#nav a:hover span { background:url(/upload/2010-07/05/13.gif) left top no-repeat;}
</style>

<body>
<div id="nav">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>新首页</span></a></li>
<li><a href="#"><span>视频教程</span></a></li>
<li><a href="#"><span>网页版式布局</span></a></li>
</ul>
</div>
</body>

3.用图片美化按钮
采用按钮比超链接有一个好处是当css样式表没有加载上时，将会显示为默认按钮样式，这样用户可以清楚地知道这是个按钮，正常加载后，会使按钮更加美观。
例如：
.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}

4.修改链接的下划线
设置text-decoration:none去除链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果