微信滑动门

微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多。为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。

在这里插入图片描述

其核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的:

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结:

  1. a 设置 背景左侧,padding撑开合适宽度。
  2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
  3. 之所以a包含span就是因为 整个导航都是可以点击的。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信导航栏</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		body {
			background: url(../images/wxnav.jpg)  repeat-x; 
		}
		.nav li {
			list-style: none;
			float: left;
		}
		.nav a {
			display: inline-block;
			height: 33px;
			background: url(../images/to.png) no-repeat;
			color: #fff;
			text-decoration: none;
			line-height: 33px;
			padding-left: 15px;
			margin: 10px;
		}
		.nav a span {
			height: 33px;
			display: inline-block;
			background: url(../images/to.png) no-repeat right;
			padding-right: 15px;
		}
		.nav a:hover, .nav a:hover span{
			background-image: url(../images/ao.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<li>
			<a href="#">
				<span>首页</span>
			</a>
			<a href="#">
				<span>帮助与反馈</span>
			</a>
			<a href="#">
				<span>公众平台</span>
			</a>
		</li>
	</div>
</body>
</html>

效果图:
在这里插入图片描述

发布了8 篇原创文章 · 获赞 0 · 访问量 109
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览