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/ ...
随机推荐
- jumperserver的简单使用
用户管理:这里的用户说的是登录跳板机的账号,通过这个账号可以登录跳板机 资产管理: 资产管理/管理用户:有权限对最终的目标服务器进行管理的用户,可以单独创建,也可以直接使用root用户 资产管理/ ...
- 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...
- Maven 打war包
使用maven将项目达成war包 右击项目的跟项目,选择run as 选择maven build.... 进入窗口,在 Goals 输入命令 clean package,选择 skip Tes ...
- PAT 甲级 1031 Hello World for U (20 分)(一开始没看懂题意)
1031 Hello World for U (20 分) Given any string of N (≥) characters, you are asked to form the char ...
- ABAP DEMO篇21 选择屏幕显示说明TEXT
实现方式1: *&---------------------------------------------------------------------**& Report YCX ...
- LeetCode_198. House Robber
198. House Robber Easy You are a professional robber planning to rob houses along a street. Each hou ...
- C# 3DES加密解密,差点要了命
最近 一个项目.net 数据采用3DES加密.下面分享一下,这里的KEY采用Base64编码,便用分发,c#的Byte范围是0-255核心是确定Mode和Padding,关于这两个的意思可以搜索3DE ...
- 静态路由协议和动态路由协议(rip协议和ospf协议)
一.静态路由协议 1.拓扑图 2.分别是设置各个路由器的ip地址 以R1为例 R1> R1>en //进入全局配置模式 R1#conf t //进入端口 int g0/0 //配置ip地址 ...
- matlab截取图像
声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...
- 17-js观察者模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...