滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门：

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术

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

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

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

总结：

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

案例：制作微信导航栏（用滑动门）

资源

wx.jpg

ao.jpg

to.jpg

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>微信导航栏</title><style>body {background: url(images/wx.jpg) repeat-x;}.nav li {list-style-type: none;float: left;margin: 0px 15px;}.nav a {/*1. a 左边放 左圆角   但是文字需要往右走 15px*/color: #fff;height: 33px;line-height: 33px; /*竖直居中*/text-decoration: none;background: url(images/to.png) no-repeat;padding-left: 15px;display: inline-block;}.nav span {/*2. span 右边放右圆角   但是文字需要往左走 15px*/background:  url(images/to.png) no-repeat right;height: 33px;padding-right: 15px;display: inline-block;}.nav a:hover,.nav a:hover span {background-image: url(images/ao.png);}</style>
</head>
<body><ul class="nav"><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>
</body>
</html>

CSS——CSS滑动门及其应用（制作微信导航栏） ※相关推荐

Androidstudio的制作微信导航栏的微信素材库
Androidstudio的制作微信导航栏的微信素材库(全部都是矢量绘图),大家可以去下载本次是一个资源分享,当你第一次看相关的导航栏的制作时可能会去模仿制作一个微信导航栏,用现成的矢量 ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
漂亮的CSS蓝色滑动门式的导航菜单
代码简介: CSS版相当漂亮的滑动门式导航菜单,蓝色系,立体效果,设计的非常精美,希望大家能够喜欢哦.主菜单分为二级,如果想多级,可以看看代码是如何调用的,分级后菜单结构更加明淅,用户体验更好. 代码 ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...
使用php制作导航栏,如何制作简单导航栏
如何制作简单导航栏导语:一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的"栏"给去掉了,以非栏架的`形式制作出导航.所以,导航是一个网页友好的入口,要学习网页制作 ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...

CSS——CSS滑动门及其应用（制作微信导航栏） ※

滑动门

滑动门出现的背景

核心技术

案例：制作微信导航栏（用滑动门）

资源

效果图

代码

CSS——CSS滑动门及其应用（制作微信导航栏） ※相关推荐

最新文章

热门文章