整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

冷门的HTML - tabindex 的作用

门的HTML - tabindex 的作用

HTML 的 tabindex 属性开发过程中一般不会使用到，最近开发中有个需求兼顾富交互，便总结了一下。本篇文章同时收录在我的【前端知识点】中，Github链接请点击阅读原文直达，欢迎 Star

兼容性：Safari不支持！

阅读本文您将收获

  • tabindex的作用
  • tabindex的使用
  • 如何利用 tabindex 创造更好的用户体验

前言

在我们日常使用网页的过程中，可以通过键盘控制一些元素的聚焦，从而达到便捷访问的目的

element 分为 focusable 和 非focusable ,如果使用了tabindex就可以改变相关的行为

在HTML中有6个元素默认支持聚焦：

  • 带 href 属性的 <a> 标签
  • 带 href 属性的 <link> 标签
  • <button></button> 标签
  • <input /> 标签 (排除带有 type="hidden" 属性的)
  • <select></select> 标签
  • <textarea></textarea> 标签

以上的元素默认都可以使用 Tab 键，以及 JS focus() 方法聚焦

document.querySelector("a").focus();

使用 tab键 进行聚焦元素时，聚焦的顺序等于元素在代码中的出现先后顺序，当我们进行富交互优化时，就需要用到 tabindex 这个属性来帮助我们进行更好用户体验的优化了

tabindex的作用

①元素是否能聚焦：通过键盘这类输入设备，或者通过 JS focus() 方法

②元素什么时候能聚焦：在用户通过键盘与页面交互时

通俗来说：就是当用户使用键盘时，tabindex用来定位html元素,即使用tab键时焦点的顺序。

tabindex的范围

tabindex理论上可以使用在几乎所有元素上

  • tabindex 理论上可以用在几乎所有元素上，不管这个元素默认是否支持聚焦

tabindex 有三个值：0，-N(通常是-1)，N(正值)

  • tabindex=0，该元素可以用tab键获取焦点
    • 且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位
  • tabindex<=-1，该元素用tab键获取不到焦点，但是可以通过js获取
    • 这样就便于我们通过js设置上下左右键的响应事件来focus
    • 取值 -1~-999 之间没有区别，但为了可读性和一致性考虑，推荐使用 -1
  • tabindex>=1，该元素可以用tab键获取焦点，而且优先级大于tabindex=0
    • 不过在tabindex>=1时，数字越小，越先定位到；
    • 如果多个元素拥有相同的 tabindex ，他们的相对顺序按照他们在当前DOM中的先后顺序决定

tabindex的使用

tabindex 决定聚焦顺序

  • 可聚焦元素中，正整数数值越大，顺序越往后，正整数数值的节点顺序比0值的节点靠前
  • 代码：
// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
  • 效果：
  • 可聚焦元素中，相同 tabindex 数值的节点，根据 DOM节点 先后顺序决定聚焦顺序
  • 代码：
// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
  • 效果：

tabindex 决定是否聚焦

  • 节点的 tabindex 设置为 -1 时，当前节点使用 tab键 不能聚焦
  • 代码：
// HTML
<button type="button">未设置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
  • 效果：

tabindex 与JS编程聚焦

  • 通过 tabindex 结合JS可以让默认不支持聚焦的节点进行聚焦,tabindex 为不超出范围的任何整数值都可以
  • 代码：
// HTML
<button type="button" @click="clickBtn()">点击让DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">这是一个div</div>

// JS
clickBtn: function() {
    document.getElementById('FocusDiv').focus();
}
  • 效果：

如何利用 tabindex 创造更好的用户体验

针对自定义标签进行富交互优化

  • 我们在创建一个自定义的标签时，如果默认行为中不包含聚焦事件，我们可以使用 tabindex 为它增加聚焦功能，从而可以像很多可聚焦节点一样进行顺次焦点聚焦了

针对特定节点禁止聚焦操作

  • 某些浮层及上层节点，如 toast组件、模态框、侧边弹出信息等，我们不希望节点被用户聚焦捕获，可以将节点的 tabindex 设置为 -1，就能避免这一问题

复杂列表控制聚焦顺序

  • 一些复杂的树形结构或者列式结构，如果需要用户操作顺序按照我们预想的书序进行聚焦，可以利用tabindex 值的大小来进行处理。

本框是表单中与用户打交道最多的元素之一,它包括单行文本框<input type="text">和多行文本框<textarea>,

更广义的还可以包括密码输入框<input type="password">。

控制用户输入字符个数

对于单行文本框<input type="text">和密码输入框<input type="password">而言,可以利用自身的maxlength属性控制用户输入字符的个数;

<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"/>

而对于多行文本框<textarea>没有类似的属性,可以自定义类似的属性,并对onkeypress事件做相应的处理

<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea/>

以上代码中maxlength为自定义属性(<textarea>标签中没有这个maxlength属性),其值为最多允许输入的字符的个数,

在onkeypress事件发生时则调用返回LessThan()函数的返回值,函数如下:

function LessThan(oTextArea){
//返回文本框字符个数是否符号要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}

实例:

<html>
<head>
<title>控制textarea的字符个数</title>
<style>
<!--
form{
padding:0px;
margin:0px;
font:14px Arial;
}
input.txt{ /* 文本框单独设置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{ /* 按钮单独设置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
-->
</style>
<script language="javascript">
function LessThan(oTextArea){
//返回文本框字符个数是否符号要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">请输入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p>
<p><label for="comments">我要留言:</label><br>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p>
</form>
</body>
</html>

设置鼠标经过时自动选择文本

通常是在用户名、密码等文本框中希望鼠标指针经过时自动聚焦，并且能够选中默认值以便用户直接删除。

首先是鼠标指针经过时自动聚焦，代码如下

onmouseover="this.focus()"

其次是聚焦后自动选中所有文本，代码如下：

onfocus="this.select()"
如:<label for="name">请输入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">

javascript分离实现自动选择文本

i，大家好，我是拾光。

今天给大家带来的是前端的部分功能模块，

以后的时间里还会给大家继续发布更多的模块内容。

希望大家看完了之后甩一个收藏关注哦~

1、CSS3按钮的另类做法

HTML代码：

<body>

<div id="box">

<div id="icon">

<i><em></em><span></span></i>

</div>

</div>

</body>

CSS:

body

{

margin: 0px;padding: 0px;

}

#box{

height: 31px;

width: 31px;

border-radius: 50%;

box-shadow: 0 0 0 1px #ccc inset;

margin: 100px;

transition:box-shadow 0.25s ease-in-out 0s,

transform 0.25s ease-in-out 0s;

}

#box:hover

{

box-shadow: 0 0 0 16px #039 inset;

/*transition:box-shadow 0.25s ease-in-out 0s; */

transform: rotate(180deg);

}

i

{

display: block;

height:6px;

width: 6px;

float:left;

position:relative;

top:13px;

left:10px;

}

em,span

{

width: 0px;

height: 0px;

border-style: solid dashed dashed dashed;

border-width: 5px;

border-color: transparent;

position: absolute;

left:0px;top:0px;

}

em{

border-top-color:#000;

top:1px;

}

span

{

border-top-color:#fff;

}

2、css3立体旋转导航菜单

HTML：

<body>

<ul class="menu">

<li class="home current">

<a href="#">

<span>Home</span>

<span>Home</span>

<span>Home</span>

<span>Home</span>

</a>

<ul>

<li><a href="">Sub Menu</a></li>

<li><a href="">Sub Menu</a></li>

</ul>

</li>

<li class="about">

<a href="#">

<span>About</span>

<span>About</span>

<span>About</span>

<span>About</span>

</a>

</li>

<li class="contact">

<a href="#">

<span>Contact</span>

<span>Contact</span>

<span>Contact</span>

<span>Contact</span>

</a>

<ul>

<li><a href="">Sub Menu</a></li>

<li><a href="">Sub Menu</a></li>

</ul>

</li>

<li class="twitter">

<a href="#">

<span>Twitter</span>

<span>Twitter</span>

<span>Twitter</span>

<span>Twitter</span>

</a>

</li>

</ul>

</body>

CSS：

body {

margin: 0;

padding: 0;

background: #f9f9f9;

}

.menu {

-webkit-perspective: 100000;

-moz-perspective: 100000;

-o-perspective: 100000;

-ms-perspective: 100000;

perspective: 1200;

display: block;

width: 800px;

height: 65px;

margin: 0 auto;

list-style: none;

padding: 0;

padding: 0 0 0 30px;

border-radius: 5px;

background-color: #546065;

}

.menu li {

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

height: 21px;

width: 140px;

margin: 0 10px 0 0;

float: left;

position: relative;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

.menu li a {

display: block;

color: #fff;

font-weight: bold;

box-sizing: border-box;

height: inherit;

width: inherit;

font-size: 1.2em;

text-decoration: none;

text-transform: uppercase;

font-family: Arial, sans-serif;

}

.menu li a span {

height: inherit;

width: inherit;

padding: 22px 0;

text-align: center;

position: absolute;

left: 0;

display: block;

}

.current {

-webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

}

.menu li a span:first-of-type {

-webkit-transform: translateZ(74px);

-moz-transform: translateZ(74px);

-o-transform: translateZ(74px);

-ms-transform: translateZ(74px);

transform: translateZ(74px);

background-color: #3e4649;

box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1);

}

.menu li a span:nth-of-type(2) {

background: #fa623f;

box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);

-webkit-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);

-moz-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);

-o-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);

-ms-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);

transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);

}

.menu li a span:nth-of-type(3) {

background: #f8876d;

box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);

-webkit-transform: rotate3d(1,0,0,180deg) translateZ(-9px);

-moz-transform: rotate3d(1,0,0,180deg) translateZ(-9px);

-o-transform: rotate3d(1,0,0,180deg) translateZ(-9px);

-ms-transform: rotate3d(1,0,0,180deg) translateZ(-9px);

transform: rotate3d(1,0,0,180deg) translateZ(-9px);

}

.menu li a span:nth-of-type(4) {

background: #3e4649;

-webkit-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);

-moz-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);

-o-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);

-ms-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);

transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);

}

.menu > li:hover {

-webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

-ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

transform: rotate3d(1,0,0,-90deg) translateZ(-20px);

}

.menu > .current:hover {

-webkit-transform: rotate3d(1,0,0,-180deg) translateY(-44px);

-moz-transform: rotate3d(1,0,0,90deg) translateZ(-64px);

-o-transform: rotate3d(1,0,0,-180deg) translateY(-44px);

-ms-transform: rotate3d(1,0,0,-180deg) translateY(-44px);

transform: rotate3d(1,0,0,-180deg) translateY(-44px);

}

.menu > .current span:nth-of-type(4), .menu > li:hover span:nth-of-type(4) {

background: #fa623f;

}

.menu > .current:hover span:nth-of-type(4) {

background: #f8876d;

}

.menu ul {

opacity: 0;

width: 100%;

border-radius: 0;

padding: 0;

}

.menu > li:hover ul {

opacity: 1;

height: auto;

background: #fa623f;

-webkit-transition: opacity 0.1s linear 0.3s;

-moz-transition: opacity 0.1s linear 0.3s;

-o-transition: opacity 0.1s linear 0.3s;

-ms-transition: opacity 0.1s linear 0.3s;

transition: opacity 0.1s linear 0.3s;

-webkit-transform: rotate3d(1,0,0, 90deg) translateY(114px);

-moz-transform: rotate3d(1,0,0, 90deg) translateY(115px);

-o-transform: rotate3d(1,0,0, 90deg) translateY(114px);

-ms-transform: rotate3d(1,0,0, 90deg) translateY(114px);

transform: rotate3d(1,0,0, 90deg) translateY(114px);

position: absolute;

left: 0;

top: 65px;

}

.menu > li ul {

-webkit-transform: rotate3d(1,0,0, 90deg);

-moz-transform: rotate3d(1,0,0, 90deg);

-o-transform: rotate3d(1,0,0, 90deg);

-ms-transform: rotate3d(1,0,0, 90deg);

transform: rotate3d(1,0,0, 90deg);

}

.menu > .current:hover ul {

-webkit-transform: rotate3d(1,0,0, 180deg) translateY(145px);

-moz-transform: rotate3d(1,0,0, 270deg) translateY(31px);

-o-transform: rotate3d(1,0,0, 180deg) translateY(141px);

-ms-transform: rotate3d(1,0,0, 180deg) translateY(161px);

transform: rotate3d(1,0,0, 180deg) translateY(161px);

top: 65px;

background: #f8876d;

}

.menu ul li {

display: block;

float: none;

border-radius: 0;

background: inherit;

width: 170px;

height: 40px;

}

.menu ul li a {

box-sizing: border-box;

padding: 8px 0 0 25px;

background: inherit;

width: inherit;

}

.menu ul li a:hover {

background-color: #eb350b;

}

.menu ul .current a:hover {

background-color: #ce5f45;

}

.menu .contact {

width: 170px;

}

#travel {

padding: 10px;

background: rgba(0,0,0,0.6);

border-bottom: 2px solid rgba(0,0,0,0.2);

font-variant: normal;

text-decoration: none;

margin-bottom: 50px;

}

#travel a {

font-family: 'Georgia', serif;

text-decoration: none;

border-bottom: 1px solid #f9f9f9;

color: #f9f9f9;

}

.header {

font-family: Arial, sans-serif;

text-align: center;

margin-bottom: 60px;

}

.header h2 {

font-size: 2em;

}

3、3D旋转导航栏

HTML：

<body>

<div id="nav">

<ul class="nav-menu clearfix unstyled">

<li><a href="#" class="three-d active">

Home

<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>

</a></li>

<li><a href="#" class="three-d">

Services

<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>

</a></li>

<li><a href="#" class="three-d">

Products

<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>

</a></li>

<li><a href="#" class="three-d">

About

<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>

</a></li>

<li><a href="#" class="three-d">

Contact

<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>

</a></li>

<li><a href="#" class="three-d">

Blog

<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>

</a>

<ul class="clearfix unstyled drop-menu">

<li><a href="#" class="three-d">

Html5

<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>

</a></li>

<li><a href="#" class="three-d">

Css3

<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>

</a></li>

<li><a href="#" class="three-d">

JavaScript

<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>

</a></li>

<li><a href="#" class="three-d">

Videogames

<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>

</a></li>

</ul>

</li>

<li><a href="#" class="three-d">

Shop On-line

<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>

</a></li>

</ul>

</div>

</body>

CSS：

@import url("http://www.w3cplus.com/demo/css3/base.css");

/*任务一：引入本地字体文件*/

@font-face {

font-family: 'sansationregular';

src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');

src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background-color:#edecec;

}

/* basic menu styles */

.nav-menu {

display: block;

background: #74adaa;

width:950px;

margin: 50px auto 150px;

}

.nav-menu > li {

display: inline;

float:left;

border-right:1px solid #94c0be;

}

.nav-menu > li:last-child {

border-right: none;

}

.nav-menu li a {

color: #fff;

display: block;

text-decoration: none;

/*调用本地字体*/

font-family: 'sansationregular';

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

font-smoothing: antialiased;

text-transform: capitalize;

overflow: visible;

line-height: 20px;

font-size: 20px;

padding: 15px 30px 15px 31px;

}

/* animation domination */

.three-d {

/* 任务三、设置3D舞台布景 */

-webkit-perspective: 200px;

-moz-perspective: 200px;

-ms-perspective: 200px;

-o-perspective: 200px;

perspective: 200px;

/*任务四、设置3D舞台布景过渡效果*/

-webkit-transition: all .07s linear;

-moz-transition: all .07s linear;

-ms-transition: all .07s linear;

-o-transition: all .07s linear;

transition: all .07s linear;

position: relative;

}

.three-d:not(.active):hover {

cursor: pointer;

}

/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/

.three-d:not(.active):hover .three-d-box,

.three-d:not(.active):focus .three-d-box {

-wekbit-transform: translateZ(-25px) rotateX(90deg);

-moz-transform: translateZ(-25px) rotateX(90deg);

-o-transform: translateZ(-25px) rotateX(90deg);

-ms-transform: translateZ(-25px) rotateX(90deg);

transform: translateZ(-25px) rotateX(90deg);

}

.three-d-box {

/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

-webkit-transition: all .3s ease-out;

-moz-transition: all .3s ease-out;

-ms-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

-webkit-transform: translatez(-25px);

-moz-transform: translatez(-25px);

-ms-transform: translatez(-25px);

-o-transform: translatez(-25px);

transform: translatez(-25px);

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-pointer-events: none;

-moz-pointer-events: none;

-ms-pointer-events: none;

-o-pointer-events: none;

pointer-events: none;

position: absolute;

top: 0;

left: 0;

display: block;

width: 100%;

height: 100%;

}

/*任务七、给导航设置3D前，与3D后变形效果*/

.front {

-webkit-transform: rotatex(0deg) translatez(25px);

-moz-transform: rotatex(0deg) translatez(25px);

-ms-transform: rotatex(0deg) translatez(25px);

-o-transform: rotatex(0deg) translatez(25px);

transform: rotatex(0deg) translatez(25px);

}

.back {

-webkit-transform: rotatex(-90deg) translatez(25px);

-moz-transform: rotatex(-90deg) translatez(25px);

-ms-transform: rotatex(-90deg) translatez(25px);

-o-transform: rotatex(-90deg) translatez(25px);

transform: rotatex(-90deg) translatez(25px);

color: #FFE7C4;

}

.front, .back {

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: #74adaa;

padding: 15px 30px 15px 31px;

color: white;

-webkit-pointer-events: none;

-moz-pointer-events: none;

-ms-pointer-events: none;

-o-pointer-events: none;

pointer-events: none;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

/*任务八、设置导航当前状态与悬浮状态下的背景效果*/

.nav-menu li .active .front,

.nav-menu li .active .back,

.nav-menu li a:hover .front,

.nav-menu li a:hover .back {

background-color: #51938f;

-webkit-background-size: 5px 5px;

background-size: 5px 5px;

background-position: 0 0, 30px 30px;

background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

}

.nav-menu ul {

position: absolute;

text-align: left;

line-height: 40px;

font-size: 14px;

width: 200px;

-webkit-transition: all 0.3s ease-in;

-moz-transition: all 0.3s ease-in;

-ms-transition: all 0.3s ease-in;

-o-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

-webkit-transform-origin: 0px 0px;

-moz-transform-origin: 0px 0px;

-ms-transform-origin: 0px 0px;

-o-transform-origin: 0px 0px;

transform-origin: 0px 0px;

-webkit-transform: rotateX(-90deg);

-moz-transform: rotateX(-90deg);

-ms-transform: rotateX(-90deg);

-o-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

/*任务九、显示下拉导航菜单，并其设置一个变形效果*/

.nav-menu > li:hover ul {

display: block;

-webkit-transform: rotateX(0deg);

-moz-transform: rotateX(0deg);

-ms-transform: rotateX(0deg);

-o-transform: rotateX(0deg);

transform: rotateX(0deg);

}

今天就先分享到这些吧。大家可以根据你自己的需求来进行兼容不同的浏览器；

好久没有跟大家分享段子了，今天给大家发几个段子乐呵一下。

希望大家每天开心；

1、

公园里长椅上，一对小情侣依偎在一起旁若无人地说着情话， 女孩羞涩地问男孩：“要是我们结了婚生孩子，你是喜欢儿子还是女儿？” 男孩宠溺地刮了一下女孩的鼻梁，温柔地说：“只要是我的，我都喜欢！” 女孩噗嗤一笑，轻轻锤了一下男孩的胸口：“你好坏！要求真高！”

2、

老师：“好了，让我们来统计一下独生子女，应该都是吧”

小明：“老师，我不是，”

老师：“哦那你有个什么？”

小明：“我有个弟弟”

老师：“哦，那他多大了？”

小明：“18厘米”

老师红着脸：“不要脸，下课滚到我办公室，我要好好教育你！”

3、

一男一女是网友，聊了很长时间，一天，男的忽然提起

男：我俩见个面吧。

女：行，但是你要先回答我个问题。

男：你问吧。

女：你抬头挺胸向下看，看到了什么？

男：脚啊！

女：我俩不合适。

4、

今天朋友几个一起出去吃大餐，吃完后，我提出谁丑谁付账单，正巧一旁的服务员听到了，然后看了我们一眼，说：“你们还是AA制吧……”

麻烦大家动动小手甩一个收藏与关注。


在线咨询
上一篇：html文件删除如何恢复？恢复误删html文件教程
下一篇：11 个可能你没见过，但非常特别的 HTML 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 台山市 高阳县 儋州市 栖霞 莱城区 三原县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服