css滑动门技术
滑动门的核心技术:
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏
一般经典布局
<li>
<a href="#">
<span>导航内容</span>
</a>
</li> 样式设置
a {
margin: 100px;
display: inline-block;
height: 33px;
background: url(image/ao.png) no-repeat;
padding-left: 15px; }
a span {
height: 33px;
display: inline-block;
background: url(image/ao.png) no-repeat right;
padding-right: 15px;
}
总结:
1. a设置背景左侧, padding撑开合适宽度
2. span设置背景右侧,padding撑开合适宽度剩下由文字继续撑开宽度
3. 之所以a包含span就是因为整个导航都是可以点击的
微信导航栏练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: url(image/wx.jpg) repeat-x;
}
.nav {
height: 75px; }
.nav li {
float: left;
margin: 0 15px;
padding-top: 21px;
}
.nav li a {
display: block;
height: 33px;
background: url(image/to.png) no-repeat;
color: #fff;
font-size: 14px;
line-height: 33px;
text-decoration: none;
padding-left: 15px; }
.nav li a:hover {
background-image: url(image/ao.png);
}
.nav li a:hover span {
background-image: url(image/ao.png);
} .nav li a span {
display: block;
line-height: 33px;
background: url(image/to.png) no-repeat right;
padding-right: 15px; } </style>
</head>
<body>
<div class="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>
<li>
<a href="#">
<span>公众平台</span>
</a> </li>
</ul>
</div>
</body>
</html>
css滑动门技术的更多相关文章
- CSS——滑动门技术及应用
先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...
- CSS - 滑动门技术
1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...
- CSS 滑动门案例
一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- css+html应用实例1:滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
- CSS——滑动门
在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...
- CSS滑动门
如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...
- css滑动门制作圆角按钮
之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...
- DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Django和Flask这两个框架对比
Flask 在 Django 之后发布,现阶段有大量的插件和扩展满足不同需要 Django发布于2005年,Flask创始于2010年年中. Django功能大而全,Flask只包含基本的配置, D ...
- centos6.8下配置vsftp
几个小时的调试 终于OK了 以下配置就算开了selinux 也照样能正常上传 注意 默认的上传目录 在 /home/用户名目录 如果不能下载文件 设置下文件的权限 一.安装VSFTP # yum -y ...
- C#数字除法
C#中计算double a=1/1000:应该结果是0.001,但为什么会变成0呢? C# 中 如果相除的两个数都是整数(int 型) 那么除的结果就是只取整数部分 所以你才会取到0 如果你要取精确的 ...
- Halcon 学习2 金属雕刻字识别
*HALCON 里面的例程名称:engraved_cnn.hdevread_image (Image, 'engraved')get_image_size (Image, Width, Height) ...
- C#使用KingAOP实现AOP面向切面编程二
本文继续上篇讲述一下比较复杂点的AOP例子,先新建一个控制台项目,然后同样先在Nuget中搜索安装KingAop到项目中 1.项目结构 2 .定义一个登录实体类User和LoggingAspect切面 ...
- 洛谷 题解 UVA1151 【买还是建 Buy or Build】
[题意] 平面上有\(n(n<=1000)\)个点,你的任务是让所有n个点联通.为此,你可以新建一些边,费用等于两个端点的欧几里得距离平方.另外还有\(q(q<=8)\)个套餐可以购买,如 ...
- 关于db2中listagg函数开发中的体验
一.首先解释一下可能会查询的基础问题: 1.1db2 “with ur”是什么意思: 在DB2中,共有四种隔离级:RS,RR,CS,UR.以下对四种隔离级进行一些描述,同时附上个人做试验的结果.隔离级 ...
- VLAN之间通信-三层交换机实现
1.打开三层交换机的命令行,配置VLAN和设置端口IP enable //进入特权模式 configure terminal //进入全局配置模式 ip routing //启动交换机的路由功能 vl ...
- VC++:创建,调用MFC动态链接库(扩展DLL)
概述 DLL(Dynamic Linkable Library)动态链接库,Dll可以看作一种仓库,仓库中包含了可以直接使用的变量,函数或类. 仓库的发展史经历了"无库" ---& ...
- Vue基础知识学习(后端)
### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...