首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
css滑动门制作圆角按钮
】的更多相关文章
css滑动门制作圆角按钮
之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式. 效果展示:http://runjs.cn/detail/evk8nkc8 先上传要用的两张图片吧. btnBg.png bg.png <!doctype html>…
CSS——滑动门技术及应用
先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办? 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 最常见于各种导航栏的滑动门. 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度,…
CSS - 滑动门技术
1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最常见于各种导航栏的滑动门. 2. 原理: 2.1 利用CSS精灵Sprite(主要是背景位置position)和盒子padding撑开宽度, 以便能适应不同字数的导航栏. 2.2 原背景图--> 切开左边 --> 剩下的右边随着文字的增多从左往右滑动(这也是文字增长的方向) 3. 具体做法: 经典…
CSS 滑动门案例
一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 最常见于各种导航栏的滑动门. 二.核心技术 核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏. 核心代码: <li> <a href="#"> <span>导航栏内容</span> &l…
CSS——滑动门
在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利用的是字体的宽度,在加上padding进行调整. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="te…
CSS滑动门
如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边框.如下图所示,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些.两个图像可以滑动,重叠的部分的宽度会根据里面的文字的字数而自动调整,就像两扇推拉门一样,因此这种技术就叫做“滑动门”.(鼠标经过有凹凸感) 图片准备如下: html结构: <body> <div class=…
css滑动门技术
滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 <li> <a href="#"> <span>导航内容</span> </a> </li> 样式设置 a { margin: 100px; display: inline-block; height: 33px; bac…
WPF 制作圆角按钮
在程序对应坐置插入以下代码,或是先拖一个按钮控件到窗体中,再替换对应的代码. 修改 CornerRadius="18,3,18,3" 就可以改变圆角大小 按钮效果: <Button Content="Button" HorizontalAlignment="Left" Margin="19,10,0,0" VerticalAlignment="Top" Width="75" He…
js制作圆角按钮(兼容谷歌,ie7,ie8)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body { margin:; } div { behavior: url(../js/PIE.htc); border: 10px solid green; -webkit-box-sha…
DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…