ul | 易学教程

使用display:flex实现多个子标签等分间距排列

阅读更多关于使用display:flex实现多个子标签等分间距排列

今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图：因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了；于是想到了使用display:flex;justify-content: space-between;align-items: center;（有浏览器兼容问题）但出现了如下问题： li标签之间的间距并没有真正意义上的等分；先是复习了一遍space-between属性的意思： justify-content: space-between; 运用在父级元素上第一个子元素和最后一个子元素分别靠在最左和最右除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等重点是：“除第一个子元素和最后一个子元素外”；所以最终的解决方法是：在li标签的开头和末尾分别加上一个伪类 ul:before { content: ""; display: block; } ul:after { content: ""; display: block; } 已经加过伪类清浮动的可只往开头添加一个伪类即可；即：ul:before { content: ""; display: block; } 问题到此解决；希望能帮到各位来源： CSDN 作者：

jquery初步总结

阅读更多关于 jquery初步总结

1、$(document).ready()方法和window.onload差分法为页元件的正确操作，我们需要把操作元件JS编写的代码$(document).ready()（Jquery）或window.onload（普通JS）中。$(document).ready()(这样的写法实际上是/把dom对象document转换成了jQuery对象，然后注冊ready()事件)一般我们能够简化为 $( function (){ ........jquery代码........... }); 以下介绍一些它们的差别：运行时机 window.onload方法是在网页中的全部的元素（包含元素的全部关联文件）都全然载入到浏览器之后才运行。而通过jQuery中的$(document).ready()方法仅仅要在DOM全然就绪时，就能够调用了。比方一张图片仅仅要<img>标签完毕，不用等这个图片载入完毕，就能够设置图片的宽高的属性或样式等。 $(document).ready()方法能够多次使用而注冊不同的事件处理程序，而window.onload一次仅仅能保存对一个函数的引用。多次绑定函数仅仅会覆盖前面的函数。 2、$.map函数（obj, fn）和$.each（obj, fn）函数。 obj (Object): 要反复迭代的对象或数组 fn (Function): 要在每一个对象中运行的函数

纯css实现的三级水平导航菜单

阅读更多关于纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单。先上图： 1、html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 10 <body> 11 <header class="header"> 12 <nav class="menu radius"> 13 <ul class="nav"> 14 <li><a href="#">首页</a></li> 15 <li> 16 <a href="#">菜单项</a> 17 <ul> 18 <li> 19 <a href="#">二级菜单项</a> 20 <ul> 21 <li><a href="#">三级菜单项</a></li> 22 <li><a href="#">三级菜单项</a></li> 23 <li><a href="#">三级菜单项</a></li> 24 <li><a href="#">三级菜单项</a></li> 25 <li><a href="#">三级菜单项</a></li> 26 </ul> 27 </li> 28 <li>

JS 事件触发机制

阅读更多关于 JS 事件触发机制

目录一、JS 事件机制二、事件阶段划分三、注册事件四、取消事件传递五、为什么要阻止事件传递？六、e.preventDefault() 和 e.stopPropagation() 的区别七、事件解绑八、事件代理 (事件委托) 一、JS 事件机制 JS 的事件机制其实就是事件在 DOM 上的传递顺序，并且我们可以对应阶段对这些事件进行获取和处理。可以看到 li 标签被 ul 标签包装了，而 ul 标签又被 div 标签包装了。当我们点击 li 时，其实也点击了 ul 和 div。 <div> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li>l4</li> <li>l5</li> </ul> </div> 二、事件阶段划分 Javascript事件分为三个阶段：捕获阶段目标阶段冒泡阶段我们可以通过事件目标对象的 eventPhase 属性来得知当前事件在什么阶段。 eventPhase事件值：点击代码黄色的right模块之后，可以发现：捕获阶段是从外部一层层往内部传递至目标元素，eventPhase 的值为1，当发现是目标元素时，eventPhase 的值变为2。冒泡阶段是从目标元素开始，一层层向外部传递至根节点，当当前是目标元素时，eventPhase 的值为2，若不是，则为3。关键代码： <script

Vue总结（二）

阅读更多关于 Vue总结（二）

原始引用：开发时使用开发版本，线上使用生产版本。原始引用到html中，在浏览器中控制台输入Vue,输出一个函数就可以。 defineProperties实现的数据绑定。 //defineProperties // app.message = "assassin" vue实现了对象直接修改对象下面的任何嵌套的对象或者属性 var app = new Vue({ el: "#root", data: { message: "hello world" } }); v-bind(:) 条件 v-if直接影响DOM节点是否存在 v-show，只是display:none,DOM存在循环：v-for <ul> <li v-for="item in items"></li> </ul> var app = new Vue({ el: "#root", data: { items: [1,2,3,4] } }); v-for的键 <ul> <li v-for="(item,index) in items" v-bind:key="'item'+index"></li> //index:索引，key设置的键 </ul> 绑定事件：v-on，对应的写在methods对象中。 <button v-on:click="func"></button> methods: { func: function(

纯CSS制作动态背景随标题变换菜单

阅读更多关于纯CSS制作动态背景随标题变换菜单

纯CSS制作动态背景随标题变换菜单教程地址：原文地址（YouTube） B站教程：原文转载（bilibili）两个视频的内容相同，第二个为转载效果图代码区以下代码为本人填写，转载请注明教程地址和本贴地址 html <!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 > 动态背景随标题变换菜单 </ title > < link rel = " stylesheet " href = " css/style.css " > </ head > < body > < div class = " navigation " > < ul > < li > < a href = " # " data-text = " Home " > Home </ a > </ li >  < li > < a href = " # " data

jQuery操作DOM

阅读更多关于 jQuery操作DOM

Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：　　 View Code <!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-Type" content="text/html;charset=utf-8" <title>DOM Demo</title> </head> <body> <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <

jquery中的DOM操作集锦

阅读更多关于 jquery中的DOM操作集锦

1，查找节点： 1 2 var $li = $( "ul li:eq(1)" ); //查找元素 $li.attr( "title" ); //查找元素的属性值 2，创建和插入节点： 1 2 3 4 5 6 7 8 9 10 var $ul = $( "#ulMain" ); var $li_1 = $( "<li id='liApple'>苹果</li>" ); //创建一个li元素。 $ul.append($li_1); //在ulMain内部末尾插入元素 $li_1.appendTo($ul); //将li追加到ul内部的末尾。 $ul.prepend($li_1); //在ul内部将li插入到最前面。 $li_1.prependTo($ul); //将li插入到ul内部的最前面。 $ul.after( "<span>hello,span</span>" ); // 在ul后面插入一个span元素 $( "<b>重点</b>" ).insertAfter($ul); //将b插入到ul后面 $ul.before( "<b>重点</b>" ); //在ul前面插入b $( "<b>重点</b>" ).insertBefore($ul); 3，删除节点： 1 2 3 var $li = $( "ul li" ).remove( "li[title=hello]" ); /

jQuery中的DOM操作

阅读更多关于 jQuery中的DOM操作

一、DOM的概念 DOM ( Document Object Model ) 文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中所有标准组件。二、DOM操作的分类 1.DOM Core (核心) 定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML 例如JavaScript中的getELementById()、getElementByTagName()、getAttribute()、setAttribute() 2.HTML-DOＭ定义了一套标准的针对XML文档的对象例如.src()等 3.CSS-DOM 定义了一套标准的针对XHTML文档的对象例如.style.color()等三、jQuery中的DOM操作 01.查找节点元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body><ul>,<li>等等。元素节点之间可以相互包含(当然遵循一定的规则) 属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。查找元素节点查找属性节点 02.创建节点创建元素节点 var $li = $("<li></li>"); //创建一个<li>元素；注意事项一 $("ul").append($li);

CSS02-一些具体组件的样式属性

阅读更多关于 CSS02-一些具体组件的样式属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>具体组件的样式属性</title> <link rel="stylesheet" type="text/css" href="02.css"> </head> <body> <ol> <li><a href="#Background">背景</a></li> <li><a href="#Text">文本</a></li> <li><a href="#Word">字体</a></li> <li><a href="#Link">链接</a></li> <li><a href="#List">列表</a></li> <li><a href="#Table">表格</a></li> </ol> <hr> <ul id="Background"> <h3>背景</h3> <li id="BGC">背景颜色(background-color)</li> <ul> <li>颜色的表示方式： <dd>十六进制：#f00000</dd> <dd>RGB：rgb(255,0,0)</dd> <dd>颜色名称：blue</dd> </li> </ul> <li>背景图片(background-image)</li> <ul> <li>background-image

订阅 ul