ul

vue循环语句

江枫思渺然 提交于 2020-02-28 16:30:12
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ol> <li v-for="site in sites"> {{site.name}} </li> </ol> </div> <script> new Vue({ el: '#demo', data: { sites:[ {name:"cyy1"}, {name:"cyy2"}, {name:"cyy3"} ] }, methods:{ }, filters:{//过滤器 } }) </script> 模板中使用 v-for: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src=

html基础语言笔记

烈酒焚心 提交于 2020-02-28 12:02:29
01常用快捷键 ctrl+/ 等 02文本格式化标签 <strong>等 03图片标签 <img src="lzl.jpg" alt="" title="" /> 04超链接 ——绝对相对路径 05锚点 06列表 列表快捷键 <ul> <li><a href=""></a></li> </ul> ul>li>a 然后按Tab键盘,就可以快速构建 <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> ul>(li>a)*3 然后按Tab键,就可以快速撰写 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> ul>(li>a[#])*3 然后按Tab键,就可以快速撰写 07音乐标签 <embed src="1.mp3" hidden="true"> <marquee behavior="slide" direction="up" height="300px" bgcolor="orange"><img src="swk.jpg" alt=""></marquee> ——(加图片) 08网页描述 <!-- 关键字 --> <meta name=

css操作符

余生颓废 提交于 2020-02-28 02:25:40
p~ul{    background:#8e8e8e; } <p>段落P</p> <ul>    <li>列表项1</li>    <li>列表项2</li>    <li>列表项3</li> </ul> p~ul选择前面有<p>元素的每个<ul>元素,即选择p之后出现的所有ul,两种元素必须拥有相同的父元素,但ul不必紧随p。 css中“>”是css3中特有的选择器,A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。 A B{}选择A所有的后代B元素 A>B{}选择A的一代B元素 A+B{}这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:   h1 + p {margin-top:50px;} 来源: oschina 链接: https://my.oschina.net/carbenson/blog/3164706

给元素绑定事件 http://www.jb51.net/article/61915.htm

点点圈 提交于 2020-02-27 02:56:39
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 ? 1 2 3 < div id = "testdiv" > < ul ></ ul > </ div > 需要给<ul>里面动态添加的<li>标签添加click事件 jquery 1.7版以前使用live动态绑定事件 ? 1 2 $( "#testdiv ul li" ).live( "click" , function (){ }); jquery 1.7版以后使用on动态绑定事件 ? 1 2 3 $( "#testdiv ul" ).on( "click" , "li" , function () { //do something here }); 来源: https://www.cnblogs.com/kttbk/p/7686970.html

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

可紊 提交于 2020-02-26 22:55:54
<!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:

bootstrap导航栏.nav与.navbar区别

夙愿已清 提交于 2020-02-26 02:57:12
刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下; 一、简单的ul,li组成的导航: <ul class="nav nav-pills justify-content-center bg-dark nav-dark"> <li class="nav-item"> <a href="#" class="nav-link">1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">3</a> </li> </ul> //解析:.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示 在浏览器上显示为: 缩小浏览器窗口显示为: 二、导航栏——<nav>标签中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item" 代码为: <nav class="navbar navbar-expand-sm bg

首页滚动图片源码分享

☆樱花仙子☆ 提交于 2020-02-26 02:24:46
在开发网站时,首页难免会遇到需要滚动展示图片的时候,从其他网站搜刮了点代码,分享于此: <html lang="zh-CN"><head> <meta charset="utf-8"> <title>jQuery无缝滚动</title> <style> .scroll-container { width: 800px; margin: 50px auto; } .scroll { width: 800px; border: 1px solid #ccc; overflow: hidden; } .scroll ul { white-space: nowrap; } .scroll ul li { display: inline-block; margin: 10px; } .scroll ul img { vertical-align: top; } </style> </head> <body style=""> <div class="scroll-container"> <div class="scroll"> <ul style="margin-left: -43px;"> <li><img src="http://www.jq22.com/demo/jqueryscroll201903112313/images/0003.png" alt=""></li> <li>

jquery常用筛选方法

旧时模样 提交于 2020-02-25 23:38:01
1、jquery过滤方法 eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele|fn) map(callback) has(expr|ele) not(expr|ele|fn) slice(start,[end]) 具体事例如下: <ul> <li>第一个</li> <li>第二个</li> <li class="box" id="li3"><span class="child">第三个</span></li> <li>第四个</li> <li>第五个</li> </ul> eq() 获取子元素里面的其中某一个,根据索引来获取。 -index -1开始的 console.log($("ul>li:first")); console.log($("ul>li:eq(0)")); console.log($("ul>li:nth-child(1)")); console.log($("ul>li").eq(0));//上面四个等价均是第一个li console.log($("ul>li").eq(-1)); console.log($("ul>li:last")); hasClass(class) 根据元素的类名称来进行过滤的 参数是class名称

Bootstrap导航

女生的网名这么多〃 提交于 2020-02-23 20:00:31
前面的话   导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务。本文将详细介绍Bootstrap导航 基础样式   Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类   如果在使用导航组件实现导航条功能,务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性,或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上,因为这样可以被辅助设备(残疾人用的)上被识别为一个真正的列表 .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav> li { position: relative; display: block; } .nav> li > a { position: relative; display: block; padding: 10px 15px; } .nav> li >a:hover, .nav> li >a:focus { text-decoration: none; background-color: #eee; } .nav

Jquery选择器大全

限于喜欢 提交于 2020-02-22 15:14:50
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 JQuery最为强大的功能之一就是它支持全面的Dom元素选择器。它支持使用CSS选择器、子选择器、容器选择器、特性选择器、位置选择器以及JQuery自定义的选择器等多种选择器在Html文档中选择Doms。在这里将它们列出来,方便查找: 1.JQuery基本Css选择器 *:匹配任意元素 E:匹配标签名为E的所有元素,比如说$('a')会选出所有链接元素; #id:通过元素id进行选择,比如说$("#form1")会选择id为form1的元素; .class:通过元素的CSS类来选择,比如说$(".boldstyle")会选择CSS为boldstyle类的元素; 标签名#id.class:通过某类元素的id属性和class属性来选择,如:$(a#blog.boldStyle)会选择id为blog并且CSS类型为.boldStyle类型的链接元素(<a id='blog' class='.boldStyle'>); 父标签名 子标签名.class:通过选择父标签下的某种CSS类型的子元素,如:$(p a.redStyle)会选择p段落元素中的链接子元素a,且其css类型为.redStyle; parent >