ul | 易学教程

微博发布

阅读更多关于微博发布

布局： div.box > span+textarea + button + ul 案例分析： 1，在textarea中输入内容 2，获取textarea的值，创建 li 元素添加到 ul 中去 3，li 的内容就是 textarea 的值 jQuer代码： $("#btn").click(function(){ var val=$("textarea").val(); //返回字符串 $("<li></lil>").text(val).prependTo("#ul"); $("#txt").val(""); if($("#txt").val().trim().length==0) { return; } }) 完整代码： <!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

定位与浮动

阅读更多关于定位与浮动

对比三种清除浮动的方式 View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 5 <title>v_v</title> 6 <style type="text/css"> 7 <!-- 8 p {background:silver; } 9 ul {margin:0; padding:0; }10 li {list-style:none; border-right:1px solid white; padding:0.5em 1em; }11 li.left {float:left; }12 li.right {float:right; }13 14 /*~~法一：给外部盒子ul 也浮动，这导致需要为下部的测试段落清除浮动；15 Fire中的表现为：ul的宽度会自适应li的宽度

jQuery-jQuery选择器

阅读更多关于 jQuery-jQuery选择器

jQuery选择器基本选择器 #id : id选择器 /* 需求: 1. 选择id为div1的元素 */ $ ( '#div1' ) . css ( 'background' , 'red' ) ; element : 元素选择器 /* 2. 选择所有的div元素 */ $ ( 'div' ) . css ( 'background' , 'blue' ) ; .class : 属性选择器 /* 3. 选择所有class属性为box的元素 */ $ ( '.box' ) . css ( 'background' , 'yellow' ) ; * : 任意标签 selector1,selector2,selectorN : 取多个选择器的并集(组合选择器) /* 4. 选择所有的div和span元素 */ $ ( 'div,span' ) . css ( 'background' , 'black' ) ; selector1selector2selectorN : 取多个选择器的交集(相交选择器) /* 5. 选择所有class属性为box的div元素 */ $ ( 'div.box' ) . css ( 'background' , 'red' ) 层次选择器层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器 ancestor descendant

CSS Ul（列表样式）

阅读更多关于 CSS Ul（列表样式）

CSS Ul（列表样式） CSS列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一、列表在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。二、不同的列表项标记 list-style-type属性指定列表项标记的类型是： ul.a {list-style-type: circle;} /*无序，空心圆圈*/ ul.b {list-style-type: square;} /*无序，实现四方形*/ ol.c {list-style-type: upper-roman;} /*有序，罗马数字排序*/ ol.d {list-style-type: lower-alpha;} /*有序，小写字母排序*/ list-style-type属性值：值描述 none 无标记 disc 默认。标记是实心圆 circle 标记是空心圆 square 标记是实心方块 decimal 标记是数字 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等） upper-roman 大写罗马数字

CSS中的ul与li样式详解

阅读更多关于 CSS中的ul与li样式详解

　ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。　　一、list-style-type属性　　list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下：（列举一些常用的属性值）　　list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman 　　list-style-type属性的属性值有很多，在这里我们只是列举了比较常用的几个。 none：不使用项目符号。 disc：实心圆。 circle：空心圆。 square：实心方块。 demical：阿拉伯数字。 lower-alpha：小写英文字母。 upper-alpha：大写英文字母。 lower-roman：小写罗马数字。 upper-roman：大写罗马数字。　　使用list-style-type属性的示例代码如下： li{ list-style-type:square;} <ul> <li>这里是列表内容<

CSS中列表项list样式

阅读更多关于 CSS中列表项list样式

CSS列表属性属性描述 list-style-属性用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type　　设置列表项标志的类型　　　　 list-style:type image position; 列表项的简写方式 1.list-style-属性可以按顺序设置如下属性： list-style-type list-style-image list-style-position ul{ list-style-type:none; list-style-image:url("图片路径"); list-style-position:inside; } 2.list-style-type：设置列表项标志的类型（默认标记是实心圆）这里的标志类型比较多，我只将常用的通过列表展示出来，none使用最多。如需更多了解： http://www.w3school.com.cn/cssref/pr_list-style-type.asp CSS列表项标志 none 无标记 disc 默认，标记是实心圆 circle 标记是空心圆 square 标记是实心方块 decimal 标记是数字 ul{ list-style-type:none;

无缝轮播 + 小图标+文字介绍

阅读更多关于无缝轮播 + 小图标+文字介绍

html-----》 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ padding:0px; margin:0px; border:0px; } li{ list-style-type:none; } a{ text-decoration:none; } #wrapper{ margin:0px auto; border:0px; padding:0px; } #show-area{ width:800px; height:450px; position:relative; margin:0px auto; overflow:hidden; } #show-area ul{ position:relative; width:5600px; height:450px; right:0; } #show-area ul li{ float:left; width:800px; } #controler{ width:130px; text-align:center; position:absolute; top:425px; left:370px; z-index:1; } #controler div{ height:15px;

jQuery实现淘宝轮播图

阅读更多关于 jQuery实现淘宝轮播图

我爱撸码，撸码使我感到快乐大家好，我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图，揭开这层神秘的面纱，CSS样式就不做过多的赘述了，主要就是实现的原理，也就是jQuery，老样子，每行基本都打上了我理解的注释，表达的可能不是很好，但是理解理解就OK，欢迎一起技术探讨，一起成长。再讲讲轮播图的需求吧，一打开网址，轮播图就会自己每3秒切换到下一张，总共5张，一直轮播，当你鼠标进入图片区域，那么图片不再自动轮播，你可以点击向左的按钮，也可以点击向右的按钮，你点左图片就切到上一张，点右就切到下一张，并且你可以点击下面的小原点，点哪跑那张，并且鼠标离开，轮播图又会自己每3秒跑起来，好了，废话不多说，先上效果，可以试试哦，应该没bug，嘿嘿。。。效果如下： ps：如果效果出不来，那么请刷新下页面代码给出: <!DOCTYPE html> <html lang="zh"> <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>  <style>

easyui的accordion为动态生成，accordion的onSelect方法中又动态生成tree，为什么要第二次选择accordion，tree才生成出来...

阅读更多关于 easyui的accordion为动态生成，accordion的onSelect方法中又动态生成tree，为什么要第二次选择accordion，tree才生成出来...

< div id ="menu" > </ div > HTML结构 JS结构 1 <script type="text/javascript"> 2 $.ajax({ 3 url:Thinkphp['MODULE'] + '/Index/getTree' , 4 type:'post' , 5 success: function (data){ 6 $.each(data, function (i,n){ 7 $('#menu').accordion('add' ,{ 8 title: n.text, 9 selected: false , 10 content:'<div style="padding:0 0 0 10px;"><ul name="'+n.text+'"></ul></div>' , 11 }); 12 }); 13 }, 14 }); 15 $('#menu' ).accordion({ 16 fit: true , 17 border: false , 18 onSelect: function (title,index){ 19 $("ul[name='"+title+"']" ).tree({ 20 lines: true , 21 url: Thinkphp['MODULE'] + '/Index/getTree/Name/'+ encodeURI

todolist組件拆分

阅读更多关于 todolist組件拆分

<!doctype html> <html> <head> <meta charset="utf-8"> <title>TodoList組件拆分</title> <script src="vue.js"></script> </head> <body> <div id="root"> <input v-model="inputValue"/> <button @click="handleClick">提交</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li>{{content}}</li>' }) new Vue({ el:"#root", data:{ inputValue:"", list:[] }, methods:{ handleClick: function(){ this.list.push(this.inputValue); this.inputValue=" " } } }) </script> </body> </html> 来源： https://blog

订阅 ul