ul | 易学教程

下划线跟着走的导航效果

阅读更多关于下划线跟着走的导航效果

效果图： css部分： <style type="text/css"> .navCon{ min-width: 1200px; height: 43px; margin: 0 auto; position: relative; } .navCon ul li{ float: left; list-style-type: none; background: #f1eeee; } .navCon ul li a{ display: inline-block; padding: 10px 20px; text-decoration: none; color: red; } .navCon ul li:hover{ background: #cacaca; } .navCon ul li:hover a{ color: #002A80; } .navCon ul li.active{ background: #cacaca; border-bottom: 2px solid #000000; } .navCon ul li.active a{ color: #002A80; } .bottomLine{ width: 0px; height: 2px; background: black; position: absolute; bottom: 0px; } .clear{ clear:

Vue

阅读更多关于 Vue

Vue 渐进式 JavaScript 框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue 三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 3、special -- 特点单页面web应用数据驱动数据的双向绑定虚拟DOM 4、how -- 如何使用Vue 开发版本： vue.js 生产版本： vue.min.js <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 二、Vue实例 1、el：实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2、data：数据 <div id='app'> {{ msg }} </div> <script> var app = new Vue({ el: '

更改无序列表列表的项标记的颜色、大小和位置等的解决办法

阅读更多关于更改无序列表列表的项标记的颜色、大小和位置等的解决办法

提示:如果仅更改列表项的颜色,设置li的颜色就可以,以下可以忽略。例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul { width: 200px; margin: 0 auto; padding: 0; list-style: none; } /*正方形*/ ul li::before { content: "■"; color: #F00; } /*实心圆*/ ul li::before { content: "●"; color: #0F0; position: relative; top: -1px; margin-right: 7px; } /*空心圆*/ ul li::before { content: "○"; color: #00F; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> 　　来源： https://www.cnblogs.com/fantianlong/p/11336555.html

ul li横放时有4px空隙

阅读更多关于 ul li横放时有4px空隙

ul{ list-style-type: none; } .li1{ float: left; width: 50px; background-color: aqua; } .li2{ display: inline-block; width: 50px; background-color: aqua; }  <ul> <li class="li1">1</li><li class="li1">2</li><li class="li1">3</li> </ul><br>  <ul> <li class="li2">1</li><li class="li2">2</li><li class="li2">3</li><li class="li2">4</li> </ul>  <ul> <li class="li2">1</li> <li class="li2">2</li> <li class="li2">3</li> <li class="li2">4</li> </ul> 来源： https://www.cnblogs.com/223zzm/p/11335227.html

JavaScript 之jQuery(二)

阅读更多关于 JavaScript 之jQuery(二)

四. 操作元素与文档处理 ( 属性，css ) --------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red") 1.操作元素 (1) attr() 设置属性值或者返回被选元素的属性值例： <div class="q" id="div01" box="box1"> </div> <script src="jquery-3.4.1.min.js"></script> <script> //获取值：attr()设置一个属性值的时候只是获取值 var id = $('div').attr('id'); console.log(id); var cla = $('div')

事件切换

阅读更多关于事件切换

　　　　//鼠标移入事件　　　　$(".nav > li").mouseover(function(){ 　　　　　　$(this).children("ul").slideUp(200); 　　　　}) 　　　　//鼠标离开事件　　　　$(".nav > li").mouseout(function(){ 　　　　　　$(this).children("ul").slideUp(200); 　　　　}) 　　　　1.事件切换 hover 就是鼠标经过和离开的复合写法　　　　$(".nav>li").hover(function(){ 　　　　　　$(this).children("ul").slideDown(200); 　　　　},function(){ 　　　　　　$(this).children("ul").slideUp(200); 　　　　}); 　　　　2.事件切换hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数　　　　$(".nav>li").hover(function(){ 　　　　　　$(this).children("ul"),slideToggle(); // li 下面的子元素 ul 移入显示出来，移出隐藏　　　　}) 来源： https://www.cnblogs.com/qtbb/p/11333456.html

zepto轮播图

阅读更多关于 zepto轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"> <title>Title</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } .clearFix:after, .clearFix:before{ clear: both; height: 0; line-height: 0; visibility: hidden; display: block; content: ""; } .container{ max-width: 640px; min-width: 320px; margin: 0 auto; position: relative; overflow: hidden; } .container>ul:first-child{ width: 1000%; transform: translateX(-10%); } .container>ul:first-child>li{ width: 10%;

swiper选项卡还可以左右滑动，最后一个直接跳转链接

阅读更多关于 swiper选项卡还可以左右滑动，最后一个直接跳转链接

整理分享： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css"> <style> *{margin:0;padding:0} body,html{ max-width: 640px; margin: 0 auto; background-color: #ebebeb;} a{ text-decoration: none; color: #333 } li{list-style:none} .swiper_tab{ overflow: hidden; font-size: 18px; font-weight: 700; background-color: #fff; height: 40px; line-height: 40px; overflow:

vue one one

阅读更多关于 vue one one

目录 Vue 渐进式 JavaScript 框架一、走进Vue 二、Vue实例三、生命周期钩子四、Vue指令五、组件六、Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue 三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 3、special -- 特点单页面web应用数据驱动数据的双向绑定虚拟DOM 4、how -- 如何使用Vue 开发版本： vue.js 生产版本： vue.min.js <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 二、Vue实例 1、el：实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容

导航菜单的实现

阅读更多关于导航菜单的实现

　　熟练使用导航栏，对于网站排版非常重要,使用CSS，js，jq等你可以转换成好看的导航栏而不是枯燥的HTML菜单。　　CSS实现： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Genarator" content="Sublime Text"/> 6 <meta name="description" content="菜单的实现" /> 7 <meta name="keywords" content="CSS实现，下拉菜单"/> 8 <title>CSS实现下拉菜单</title> 9 <style type="text/css"> 10 *{ margin:0px; padding:0px;} 11 #menu{ 12 background-color:#eee; 13 width:600px; 14 height:40px; 15 margin:0 auto; 16 } 17 ul{ list-style:none;} 18 ul li{ 19 float:left; 20 line-height:40px; 21 text-align:center; 22 position:relative; 23 } 24 a{ 25 text

订阅 ul