ul | 易学教程

轮播图--使用原生js的轮播图

阅读更多关于轮播图--使用原生js的轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图-不用jquery</title> <style> *{ padding:0; margin:0; } .view{ width: 1000px; height: 600px; margin: 0px auto; margin-top:30px; position: relative; } .view > ul{ list-style: none; width: 100%; height: 100%; transform: rotate3d(1,1,0,0deg); transform-style: preserve-3d; } .view > ul > li{ width: 20%; float: left; height: 100%; position: relative; transform-style: preserve-3d; transition: transform ; transition-duration: 0.5s; } .view > ul > li > span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top

jQuery入门[1]－构造函数

阅读更多关于 jQuery入门[1]－构造函数

jQuery入门[1]－构造函数 jQuery入门[2]－选择器 jQuery入门[3]－事件 jQuery入门[4]－链式代码 jQuery入门[5]－AJAX jQuery入门[6]－动画 JQuery 优点 ◦体积小（v1.2.3 15kb） ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera） ◦链式代码 ◦强大的事件、样式支持 ◦强大的AJAX功能 ◦易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: <! 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 > < title > jQuery basic </ title > < style

仿Google自动提示 SearchSuggess

阅读更多关于仿Google自动提示 SearchSuggess

页面： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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 runat="server"> <title>seach</title> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="js.js"></script> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div onClick="keyup_close();"> <ul> <li class="h_14"> <iframe style=

Jquery淡入淡出轮播图

阅读更多关于 Jquery淡入淡出轮播图

Jquery淡入淡出轮播图因为代码不多所以我就写一个html文件里了 html代码 <div class="banner"> 　　<ul> 　　　　<li><a href="javascript:;"><img src="./1 (1).png" /></a></li> 　　　　<li><a href="javascript:;"><img src="./1 (2).png" /></a></li> 　　　　<li><a href="javascript:;"><img src="./1 (3).png" /></a></li> 　　　　<li><a href="javascript:;"><img src="./1 (4).png" /></a></li> 　　　　<li><a href="javascript:;"><img src="./1 (5).png" /></a></li> 　　</ul> 　　<div class="arrow"> 　　　　<span class="arrow-l"><</span> 　　<span class="arrow-r">></span> 　　</div> 　　<ol> 　　　　<li class="dot"></li> 　　　　<li></li> 　　　　<li></li> 　　　　<li></li> 　　　　<li></li> 　　<

CSS中ul li居中的问题

阅读更多关于 CSS中ul li居中的问题

一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将其这个属性改为inline便可实现这种ul li居中的问题 <style type="text/css"> #bNav{ margin-top:10px; background:#D9EBF5; text-align:center; } #bNav ul{ padding:4px 0; margin:0; overflow:hidden; } #bNav ul li{ display:inline; padding:0; } </style> <div id="bNav" class="bNav"> <ul> <li><a href="index.aspx" title="Home">Home</a></li> <li>|</li> <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li> <li>|</li> <li><a href="info.aspx?info_id

react，react-router，redux+react-redux 构建一个React Demo

阅读更多关于 react，react-router，redux+react-redux 构建一个React Demo

创建初始化应用加速我们的npm。 npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app 创建项目，执行下面创建我们的demo-react应用： cd ......到你自己的路径 create-react-app reactdemo 我习惯使用VSCode，我用vscode打开这个文件夹，目录结构如下。安装需要的依赖我们的项目需要: react-router: react-router-dom redux react-redux 在VSCode中打开powershell（Ctrl+`）依次安装 cnpm install react-router --save cnpm install react-router-dom --save cnpm install redux --save cnpm install react-redux --save 打开package.json可以看到我们使用的版本：不同的版本使用是有一些区别的，尤其路由使用上创建几个组件页面在src下创建几个文件夹存放我们使用的组件在各自文件夹下创建组件js Login.js import React,{ Component } from 'react'; //=====组件=====

vue基本知识点概括

阅读更多关于 vue基本知识点概括

目录 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' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容

HTML中ul,ol,li,dl,dt,dd标签用法

阅读更多关于 HTML中ul,ol,li,dl,dt,dd标签用法

ul: unordered lists ol: ordered lists li: Lists ol 有序列表。 <ol> <li>……</li> <li>……</li> <li>……</li> </ol> 　　表现为： 1…… 2…… 3…… 　　ul 无序列表，表现为li前面是大圆点而不是123 <ul> <li>……</li> <li>……</li> </ul> 　　很多人容易忽略 dl dt dd的用法　　 dl 内容块　　dt 内容块的标题　　dd 内容　　可以这么写： <dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> 　　dt 和dd中可以再加入 ol ul li和p 　　理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。 LI代码的格式化: A).运用CSS格式化列表符：以下是引用片段： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则：以下是引用片段： ul li{ list-style-type:none; list-style-image: url(/blog/images/icon.gif); } C).为了左对齐，可以用如下代码：以下是引用片段： ul{ list-style-type:none; margin:0px;

32.纯 CSS 创作六边形按钮特效

阅读更多关于 32.纯 CSS 创作六边形按钮特效

原文地址： https://segmentfault.com/a/1190000015020964 感想：简简单单的动画特效，位置，动画。 HTML代码： <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> CSS代码： html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } nav{ --h: 3em; } nav:nth-child(1){ --rate: 1.5; --bgcolor: black; } nav:nth-child(2){ --rate: 1.732; --bgcolor:

JS中的事件委托 / 代理详解

阅读更多关于 JS中的事件委托 / 代理详解

【前言】事件委托/代理是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的【主体】概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。这里其实还有2层意思的：第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。为什么要用事件委托：一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了

订阅 ul