ul | 易学教程

简单模拟穿梭框

阅读更多关于简单模拟穿梭框

穿梭框相信很多人接触过，在写后台管理系统的项目时有很大可能性会用到这个功能。其实这个组件在element ui里面有，但是因为兼容性ie的问题（万恶的ie啊），我现在必须手写一个类似的功能供项目使用乞丐样式上图原汁原味基本没有经过任何修饰的html，有一种朴素的美。。。还是以功能为主啊，只写了的简单的样式。。。主要功能就是左侧某一个checkbox选中后点击‘选中过’按钮，此选项就出现在右侧的框中，同时左侧的框中此选项消失 “1区”这个按钮其实就是一个全选的按钮右侧框中新选项默认为非选中状态，但已选中的状态不能改变，并且顺序和之前保持一致也就是先选第二过去之后，在选第一个过去之后第一个要在第二个之上，点击“全部过”按钮就是将左侧剩余的所有选项移入右侧，后面两个按钮是从右向左的反向操作上码 <div class="father"> <ul> <li> <input type="checkbox" class="all"> <label for="">1区</label> <ul> <li value="0"> //value值是排序使用的标识 <input type="checkbox" class="box"> <label for="">第一</label> </li> <li value="1"> <input type="checkbox" class=

2.5.1 位置过滤器:

阅读更多关于 2.5.1 位置过滤器:

2.5.1 位置过滤器: 有时候需要根据页面中的位置来选择元素,有时候希望选择第一个或最后一个页面中的元素例如,考虑编写以下代码: 这种格式的选择器会匹配页面上的第一个元素。现在,让我们家和想要选择页面上的第三个元素 <ul class="my-list"> <li> <a>123456789</a> <a href="http://jquery.com">jQuery11</a> <a href="https://jquery.com">jQuery22</a> <a href="ftp://jquery.com">jQuery33</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li> <li>jQuery also supports</li> <ul> <li>Custom selectors</li> <li>Form selectors</li> </ul> </ul> <script src="jquery-1.6.4.js" type="text/javascript"></script> <script> console.log($("a

来自微软的纯CSS下拉菜单

阅读更多关于来自微软的纯CSS下拉菜单

摘自： http://www.cnblogs.com/dvbhack/archive/2009/04/17/best-practices-of-css-dropdown-menu.htm 来自微软的纯CSS下拉菜单结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。先看一下效果（这是我重新实现的）：下面是实现方法：首先是菜单的XHTML代码： <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li>

通栏自适应通栏焦点图-05

阅读更多关于通栏自适应通栏焦点图-05

1、结构  <div class="fullSlide"> <div class="bd"> <ul> <li _src="url(images/banner1.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3/2015/0116/1193.html" target="_blank"></a></li> <li _src="url(images/banner2.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3/2015/0116/1193.html" target="_blank"></a></li> <li _src="url(images/banner3.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3

登录注册切换tab

阅读更多关于登录注册切换tab

<div style="background-color: #2e2828;"> <ul class="tab"> <li v-for="item in menuTab" :key="item.id" :class="{'current':item.current}" @click="togglemneu(item)">{{item.txt}}</li> </ul> </div> data(){ return{ menuTab:[ {txt:'登录',current:true}, {txt:'注册',current:false} ] } }, methods:{ togglemneu(data){ this.menuTab.forEach(Element=>{ Element.current = false }); data.current = true } } .tab{ text-align: center; } .tab li{ display: inline-block; width: 88px; line-height: 36px; font-size: 14px; color: #ffffff; border-radius: 2px; } .current{ background-color: rgb(3, 3, 92); } 效果如下：点击切换来源： https:

用HTML+CSS3写一个会旋转的魔方

阅读更多关于用HTML+CSS3写一个会旋转的魔方

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .box { width: 300px; height: 300px; margin: 150px auto; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite alternate; } .before, .back, .top, .bottom, .left, .right { width: 300px; height: 300px; position: absolute; } .before { transform: translateZ(150px); } .back { /* transform: rotateY(180deg) translateZ(150px); */ transform:

Sublime Text 3常用插件—Emmet

阅读更多关于 Sublime Text 3常用插件—Emmet

原文链接： http://www.cnblogs.com/easy-blue/p/6617852.html 摘要：安装请看上一篇 Sublime Text—安装，和 sublime自带快捷键一起用，写html简直快的飞起。下面整理的是常用的，完整的可看 emmet官方文档。生成标签 1.快速生成文档结构 ! 或 html:5 ，快速生成 HTML5 结构(都需要再按tab键) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型 2.生成带 id 的元素标签 # ID名，如： div#header <div id="header"></div> 3.生成带 class 的元素标签 . 类名，如： div.title <div class="title"></div> 4.生成后代元素：> 如： nav>ul>li <nav> <ul> <li></li> </ul> </nav> 5.生成兄弟元素：+ 如： div+p+div <div></div> <p></p> <div></div> 6

JS小案例分析

阅读更多关于 JS小案例分析

a、微博输入删除小案例 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; } input { float: right; } </style></head><body><div class="box" id="weibo"> <span>微博发布</span> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">发布</button> <ul id="ul"

一个简单的瀑布流效果

阅读更多关于一个简单的瀑布流效果

闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚（当然肯定后来会忘），因为是我实现的。下面说正题：瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。主体形式如下： <div id="main"> 　　<ul class="pics"> 　　　　<li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　... 　　</ul> 　　<ul class="pics"> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div

Gvim+Emmet.vim 那些事。

阅读更多关于 Gvim+Emmet.vim 那些事。

转自:http://www.jianshu.com/p/67fa1e2114c5 背景 HTML和CSS的写法相对固定，而且重复的工作特别多，特别是尖括号实在是很烦。使用Emmet至少能帮你节省一半的前期开发工作量，所以花点时间学习Emmet是很值得的。Emmet不是编程语言，而只是编辑器的插件，也可以自定义规则。安装 Emmet支持多种编辑器，参见列表。由于我使用vim，这里只介绍vim的插件。下载地址： https://github.com/mattn/emmet-vim 安装方法：上面的页面介绍的很清楚配置Emmet 只在html和css文件中起作用 let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstal 修改Emmet的触发键 let g:user_emmet_leader_key='<C-Z>' 教程： http://docs.emmet.io/ http://docs.emmet.io/cheat-sheet/ https://github.com/mattn/emmet-vim http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html 教程里已经介绍的很清楚，我主要罗列常用写法。用法快捷键注：

订阅 ul