lengyuefengqing的博客

原创 html+css span和div 布局

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body> div> span style="display: inline-block;float: left">标题&nbspspan> p style="padding-left:48px;

原创 下拉菜单

1、静态网页下拉菜单html+css标签项目列表标签链接float浮动display:block属性position属性规定元素的定位 注意点：ul li{ float: left;//垂直列表改成水平列表 width: 90px; line-height: 40px;//垂直居中 text-align: center;//水平居

原创 js——事件

1、事件流1.1事件冒泡1.2事件捕获2、事件处理程序2.1html事件处理程序2.2DOM0级事件处理程序2.3DOM3级事件处理程序2.4IE处理事件程序及跨浏览器解决3、事件对象 3.1DOM中的事件对象3.2IE中的事件对象4、事件类型4.1 QQ面板拖拽效果4.2 QQ面板状态切换

原创 js——Dom对象，控制html

1、getAttribute()方法html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> title>getAttribute()title>head>body>p id="intro">课程列表p>ul> li title="第1个li">HTMLli

转载 点击按钮，弹出对话框

html代码: html> head> meta charset="utf-8"> title>JS Bintitle> head> body> button id="show">点我1button> div class="wrapper"> div class="inner"> div class="box">

转载 实现tab切换的功能

实现如下图Tab切换的功能html代码： html> head> meta charset="utf-8"> title>DEMOtitle> head> body> div class="wrapper"> ul class="tabs"> li class="selected">Tab1li>

转载 代码小片段

1、楼梯有200级，每次走1级或是2级，从底走到顶一共有多少种走法？用代码（递归）实现 function fn(num) { if (num==0||num==1) { return 1; } else { return fn(num-1)+fn(num-2);

转载 js——正则表达式 验证邮箱、手机号、密码、用户名是否合法

\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?\d:匹配数字\w:匹配字母或数字或下划线或汉字\s:匹配任意的空白符[a-zA-z0-9]:匹配任意字母和数字\b:匹配单词的开始或结束. :匹配除换行符以外的任意字符*:重复零次或更多次+:重复一次或更多次? :重复零次或一次x{3}:重复三次x^$:匹配行的开

转载 jqurey dom 事件问题

说说库和框架的区别？框架和类库最重要的区别是控制权的反转。框架就像一个模具，它需要你把原材料放在模具里面，然后成品就出来了，由于模具已经造好，所以原材料不能乱加，人家要什么你就给什么，控制权在模具。但是类库就不一样了，控制权在你手中，想实现什么功能就实现什么功能，类库只是帮你封装好了大量实用的函数，帮助你实现自己的目的，你要做的只是根据自己的需要合适地调用这些函数。jquery 能做什么？

原创 html+css 漂亮的登陆界面

Login.htmlhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="style.css" rel="stylesheet" type="text/css">head>body>div class="wrapper"> div class="header"

转载 flex布局教程：实例

你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo

转载 Flex 布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就

转载 git简明教程

转载 js——类型转换原理

一段js代码，如下：(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]猜猜运行结果是什么？太风骚了有木有！如果有人诋毁前端瞧不起JS的话，那就可以把这段代码发给他了~不过话说回来了，这到底是什么原理呢？为什么一堆符号运算结果竟然能是两个字符，而且恰巧还是个sb！其实靠的是js

原创 js——内置对象之Date日期对象

Data对象日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。定义一个时间对象 :var mydate=new Date(); 注意:使用关键字new，Date()的首字母必须大写。 使 mydate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。如果要自定义初始值，可以用以下方法：var d = ne

原创 js——事件

1、事件js创建动态页面。事件是可以被js侦测到的行为。2、鼠标单击事件html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>单击事件 title> script type="text/javascript">

原创 html+css——网页布局

1、一列布局 meta charset="UTF-8"> title>Titletitle> style type="text/css"> body{ margin: 0; padding: 0; } .top{ height: 100px;

原创 js——DOM操作

1、通过id获取元素document.getElementById("id");2、innerHTML属性document.getElementById("id").innerHTML;//获取元素对象的内容，也可以直接给赋值。3、改变HTML样式Object.style.property=new style;4、显示和隐藏Object.style.display=no

原创 js——认识js 变量 函数 各种对话框 输出

1、认识jsscript type="text/javascript"> document.write("hello");//在网页上打印 document.getElementById("p1").style.color="blue"; alert("world")//弹出对话框script>2、变量

原创 js添加到html

js代码不仅可以直接写在html文件中， 也可以单独写在js文件中。如果写在js文件中，方式如下：

原创 html+css 菜单的制作

垂直菜单 *{ margin:0px;padding:0; font-size:14px;}ul{ list-style:none;width:100px;}a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bo

原创 CSS——样式设置技巧（居中和隐藏）

1、水平居中设置1.1 行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。1.2 定宽块状元素满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。1.3 不定宽块状元素不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：加入 t

原创 CSS——长度值

目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。1、像素像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。2、em就是本元素给定字体的 font-size 值，如果元素的 font-size

原创 CSS——颜色值

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：1、英文命令颜色前面几个小节中经常用到的就是这种设置方法：p{color:red;}2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三

原创 CSS——字体缩写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;

原创 CSS——布局模型

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）1、流动模型流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特

原创 CSS——盒模型

1、元素分类css中，html中的标签元素答题被分为不同的类型：块状元素、内联元素、内联块状元素常用的块状元素有：、、...、、、、、、 、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、1.1 块级元素在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码

原创 CSS——文字排版

1、字体为网页中的文字设置字体body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yah

原创 CSS----继承与特殊性（根据权值选择）、叠层、重要性

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。p{color:red;}三年级时，我还是一个胆小如鼠的小女孩。可见右侧结果窗口中p中的文本与span中的文本都设置为了

原创 CSS------选择器

1、标签选择器标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、、、、。例如下面代码：h1{    color:red;    font-weight:normal;    }2、类选择器语法： .类选器名称{css样式代码;}注意：1、英文圆点开头2、其中类选器名称可以任意起名（但不要起中文噢）使

原创 CSS-----CSS 样式代码插入的形式

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。1、内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：这里文字是红色。2、嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：span{color:red;}嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之

原创 html——label

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。语法：注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。例：    性别：   

原创 html——下拉列表

篮球    足球    羽毛球     1、value：2、selected="selected"：设置selected="selected"属性，则该选项就被默认选中。

原创 html——表单（单选框与复选框）

html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:语法：1、type:   当 type="radio" 时，控件为单选框   当 type="checkbox" 时，控件为复选框2、value：提交数据到服务器的值（后台程序PHP使用）3、name：为控件

原创 html——表单2（多行输入）

1、多行输入当用户需要在表单中输入大段文字时，需要用到文本输入域。语法：rows="行数" cols="列数">文本1、标签是成对出现的，以开始，以结束。2、cols ：多行输入域的列数。3、rows ：多行输入域的行数。4、在标签之间可以输入默认值.example:    建议：    请在这里输入您的建议文本框的宽和高可以通过css的width和he

原创 html——表单（1）

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。语法：讲解：1. ：标签是成对出现的，以开始，以结束。2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method ： 数据传送的方式（get/post）。

原创 html——使用mailto在网页中链接Email地址

标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。下面是一个完整的实例:

原创 html——<a>标签

使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。语法：链接显示的文本例如：click here!上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。

原创 html——网页上添加表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：想在网页上展示上述表格效果可以使用以下代码：创建表格的四个元素：table、tbody、tr、th、td1、…：整个表格以标记开始、标记结束。2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。3、…

原创 html——加入代码

1、加入一行代码：当代码为一行代码时，你就可以使用标签了，如下面例子：var i=i+300;注意：在文章中一般如果要插入多行代码时不能使用标签了。语法：代码语言注：如果是多行代码，可以使用标签。 2、加入多行代码语法：语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如下代码： var m