ul | 易学教程

【插件】Emmet 快速编写代码

阅读更多关于【插件】Emmet 快速编写代码

最近新下载了一个编辑器，叫brackets。里面插件挺好弄的，直接安装就行。据说Emmet很好用，所以打算把一些用法写在这里，方便查看。一、在<head></head>中 link:css，然后按Tab键　　　　快速引入css文件 <link rel="stylesheet" href="style.css"> 二、在HTML中搞起来 1.初始化输入！（叹号）或html：5，然后按Tab键 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 2.添加类、id、文本和属性输入p.p1　　　　给p标签添加一个叫p1的类 <p class="p1"></p> 输入p#p2　　　　给p标签添加一个叫p2的id <p id="p2"></p> 输入p.p1#p2　　　　给p标签同时添加一个叫p1的类和p2的id <p class="p1" id="p2"></p> 输入h1{你好，我是h1标签}　　　　在{}中填写文本内容 <h1>你好，我是h1标签</h1> 输入a[href=#]　　　　　　在[]中填写元素的属性 <a href="#"></a> 3

ul li menu

阅读更多关于 ul li menu

第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> </div> CSS定义为： .test ul{list-style:none;} 说明：“.test ul

CSS+HTML+JQuery简单菜单

阅读更多关于 CSS+HTML+JQuery简单菜单

1. [代码]style <style type="text/css"> body,ul,li,a{ margin:0; padding:0 } ul,li{ list-style-type:none } .menu{ width:270px; height:30px; line-height:30px; background:#0f67a1 } .menu li{ width:80px; float:left; display:inline; position:relative; z-index:10; text-align:center/*一级栏内容居中*/ } .menu li:hover{ background:#426d9c; } .menu .menuUl{ width:50px; height:auto; display:none; background:#426d9c; position:absolute; z-index:20; left:25px; top:30px } .menuUl li{ width:100%; float:left; text-align:left; } a{ color:#eee; text-decoration: none } a:hover{ color:#000; text-decoration: none } </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=

emmet 工具的基本使用，总结

阅读更多关于 emmet 工具的基本使用，总结

一.先配置一下idea,在Settings中设置一下就可以了。二、正式开始，常用命令新建一个HTML文档 html:5 或者 ! 生成 HTML5 结构 html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型生成带有 id 、class 的 HTML 标签 1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代命令：nav>ul>li 每个命令输完后按下Tab键即可快速得到代码 <nav> <ul> <li></li> </ul> </nav> 2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素命令：div+p+bq 得到代码如下： 1 <div></div> 2 <p></p> 3 <blockquote></blockquote> 3、生成上级元素：^ 表示^后面的元素与^前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级命令：div+div>p>span+em^bq 得到代码如下： <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> 命令：div+div>p>span+em^^bq 得到代码如下： <div></div> <div> <p><span></span><em></em>

用JS原生写瀑布流

阅读更多关于用JS原生写瀑布流

效果图 html <!DOCTYPE html> < html > < head > < meta charset = " UTF-8 " > < title > Document </ title > < style > * { margin : 0 ; padding : 0 ; } .container { width : 840px ; background : #cccccc ; margin : auto ; padding-left : 10px ; overflow : hidden ; } .container ul { width : 200px ; margin-right : 10px ; float : left ; list-style : none ; } .container ul li { width : 200px ; position : relative ; background : white ; margin-top : 10px ; } .container ul li img { width : 100% ; height : 90% ; background : url("./images/timg.gif") no-repeat center ; } .container ul li p { height : 30px ;

JS模拟瀑布流无限加载

阅读更多关于 JS模拟瀑布流无限加载

效果图：随着鼠标往下滚动，不断加载生成不同颜色大小的图片 HTML <div id= "content" > <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> CSS * { margin : 0 ; padding : 0 ; } #content { width : 1000px ; border : 1px dashed black ; margin : 0 auto ; overflow : hidden ; } #content ul { width : 240px ; padding : 5px ; float : left ; list-style-type : none ; } #content li { background-color : yellow ; font-size : 20px ; color : white ; text-align : center ; margin-bottom : 5px ; } JS //随机[m,n]之间的整数封装 function randomNumber(m, n) { return Math. floor ( Math. random ( ) * ( n - m + 1 ) + m ) ; } //随机颜色封装 function randomColor() {

菜单制作:ul li横向排列

阅读更多关于菜单制作:ul li横向排列

CSS菜单制作 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜单</title> 6 <style type="text/css"> 7 .ui { 8 width: 1200px; 9 height: 100px; 10 list-style: none; 11 margin: 0; 12 padding: 0; 13 } 14 15 .ui li { 16 width: 200px; 17 margin: 0 10px; 18 float: left; /*该处换为display:inline-block;同样效果*/ 19 20 } 21 22 .ui li a { 23 width: 70px; 24 height: 50px; 25 padding: 0 20px; 26 font-size: 12px; 27 line-height: 50px; 28 border: solid 1px; 29 {#background: red;#} 30 display: inline-block; 31 text-decoration: none; 32 cursor: pointer; 33 } 34 </style> 35 </head> 36 <body>

导航条

阅读更多关于导航条

<!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>CSS Menu - Horizontal</title> <style type="text/css"> ul#navmenu { margin: 0; border: 0 none; padding: 0; width:790px; /*For KHTML*/ list-style: none; height:30px; background:#f90; } ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height:30px; background

React入门看这篇就够了

阅读更多关于 React入门看这篇就够了

摘要：很多值得了解的细节。原文： React入门看这篇就够了作者： Random Fundebug 经授权转载，版权归原作者所有。 React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 React 官网 React 中文文档特点使用 JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门性能高的让人称赞：通过 diff算法和虚拟DOM 实现视图的高效更新 HTML仅仅是个开始 > JSX --TO--> EveryThing - JSX --> HTML - JSX --> native ios或android中的组件（XML） - JSX --> VR - JSX --> 物联网为什么要用React 使用组件化开发方式，符合现代Web开发的趋势技术成熟，社区完善，配件齐全，适用于大型Web项目

订阅 ul