2017 年 1月随笔档案 - 美林pml

摘要：一、单列布局（类似于搜狐网站）如：代码为：二、两列布局 1.固定宽度代码为： 2.自适应代码为：三、三列布局代码为：四、混合布局就是在前面的基础上，在进行划分块如：代码为：阅读全文

posted @ 2017-01-23 18:06 美林pml 阅读(154) 评论(0) 推荐(0)

摘要：window对象是BOM的核心，window对象指当前的浏览器窗口。 window对象方法: JavaScript 计时器在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。计时器类型：一次性计时器：仅在指定的延迟时间之后触发一次。间隔性触发计时器：每隔阅读全文

posted @ 2017-01-23 10:34 美林pml 阅读(150) 评论(0) 推荐(0)

内置对象（Date String Math Array）

摘要：什么是对象 JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；阅读全文

posted @ 2017-01-22 11:02 美林pml 阅读(164) 评论(0) 推荐(0)

事件

摘要：JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。主要阅读全文

posted @ 2017-01-21 23:38 美林pml 阅读(191) 评论(0) 推荐(0)

流程控制语句

摘要：做判断（if语句） if语句是基于条件成立才执行相应代码时使用的语句。语法: if(条件) { 条件成立时执行代码}例如：运行结果如下：二选一（if...else语句） if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。语法: if(条件) { 条件成阅读全文

posted @ 2017-01-21 13:54 美林pml 阅读(128) 评论(0) 推荐(0)

数组

摘要：一起组团（什么是数组）我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5 阅读全文

posted @ 2017-01-21 13:09 美林pml 阅读(168) 评论(0) 推荐(0)

控制类名（className属性）

摘要：className 属性设置或返回元素的class 属性。语法：作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观例如：运行结果为：点击“点击更改”后：再例如：运行结果为：点击“添加样式”后：点击“更改外观”后：阅读全文

posted @ 2017-01-20 17:00 美林pml 阅读(181) 评论(0) 推荐(0)

显示和隐藏（display属性）

摘要：网页中经常会看到显示和隐藏的效果，可通过display属性来设置。语法：注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。 value取值: 例如：运行结果为：点击“隐藏内容”后：阅读全文

posted @ 2017-01-20 16:14 美林pml 阅读(486) 评论(0) 推荐(0)

改变HTML样式

摘要：HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？语法: Object.style.property=new style; 注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。基阅读全文

posted @ 2017-01-20 16:07 美林pml 阅读(184) 评论(0) 推荐(0)

通过ID获取元素

摘要：网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。语法: 运行结果为：理解：输出为null,是因为代码是顺序执行的，先调用了JavaScript代码，但是这个时候还没有ID 阅读全文

posted @ 2017-01-20 15:59 美林pml 阅读(854) 评论(0) 推荐(0)

DOM对象，控制HTML元素

摘要：认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合，DOM节点有: 1. 阅读全文

posted @ 2017-01-20 15:12 美林pml 阅读(167) 评论(0) 推荐(0)

打开新窗口（window.open）关闭窗口（window.close）

摘要：打开新窗口（window.open） open() 方法可以查找一个已经存在或者新建的浏览器窗口。语法： window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任阅读全文

posted @ 2017-01-19 20:54 美林pml 阅读(2558) 评论(0) 推荐(0)

提问（prompt）

摘要：prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。语法: prompt(str1, str2); 语法: 参数说明： str1: 要显示在消息对话框中的文本，不可修改 str2：文本框中的内容，可以修改返回值: 1. 阅读全文

posted @ 2017-01-19 20:35 美林pml 阅读(193) 评论(0) 推荐(0)

警告（alert）、确认（confirm）

摘要：我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。语法: 确认（confirm 消息对话框）语法: confirm(str); 参数说明: str：在消息对话框中要显示的文本返回值: Bo 阅读全文

posted @ 2017-01-19 19:54 美林pml 阅读(558) 评论(0) 推荐(0)

输出

摘要：document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。第一种:输出内容用""括起，直接输出""号内的内容。 <script type="text/javascript"> document.write("I love JavaScript！"); 阅读全文

posted @ 2017-01-19 09:37 美林pml 阅读(164) 评论(0) 推荐(0)

函数

摘要：函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。如何定义一个函数呢？基本语法如下: function 函数名() { 函数代码; } 说明: 1. funct 阅读全文

posted @ 2017-01-19 09:06 美林pml 阅读(136) 评论(0) 推荐(0)

判断语句

摘要：if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。语法: if(条件) { 条件成立时执行的代码 } else { 条件不成立时执行的代码 } 运行结果为：运行结果为：阅读全文

posted @ 2017-01-19 08:53 美林pml 阅读(133) 评论(0) 推荐(0)

什么是变量？操作符？

摘要：什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。定义变量使用关键字var,语法如下： var 变量名变量名可以任意取名，阅读全文

posted @ 2017-01-19 08:48 美林pml 阅读(692) 评论(0) 推荐(0)

开始JavaScript的学习了

摘要：为何学习？ 1. 所有主流浏览器都支持JavaScript。 2. 目前，全世界大部分网页都使用JavaScript。 3. 它可以让网页呈现各种动态效果。 4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。易学性 1.学习环境无外不在阅读全文

posted @ 2017-01-18 23:52 美林pml 阅读(137) 评论(0) 推荐(0)

隐性改变display类型

摘要：隐性改变display类型有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一： 1. position : absolute 2. float : left 或 float:right 简单来说，只要html代码中出现以上两句之一，元素的d 阅读全文

posted @ 2017-01-18 19:55 美林pml 阅读(78) 评论(0) 推荐(0)

垂直居中

摘要：垂直居中-父元素高度确定的单行文本我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。父元素高度确定的单行文本的竖直居中的方法是通过设置父元素阅读全文

posted @ 2017-01-18 19:46 美林pml 阅读(109) 评论(0) 推荐(0)

水平居中总结

摘要：水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？如果被设置元素为文本、图片阅读全文

posted @ 2017-01-18 17:29 美林pml 阅读(127) 评论(0) 推荐(0)

长度值

摘要：长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1、像素像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单阅读全文

posted @ 2017-01-18 14:32 美林pml 阅读(152) 评论(0) 推荐(0)

颜色值

摘要：颜色值在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 1、英文命令颜色前面几个小节中经常用到的就是这种设置方法： p{color:red;} 2、RGB颜色这个与 photoshop 阅读全文

posted @ 2017-01-18 14:29 美林pml 阅读(221) 评论(0) 推荐(0)

盒模型代码简写

摘要：盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为阅读全文

posted @ 2017-01-18 14:19 美林pml 阅读(357) 评论(0) 推荐(0)

css布局模型

摘要：清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的阅读全文

posted @ 2017-01-18 12:42 美林pml 阅读(220) 评论(0) 推荐(0)

盒子模型

摘要：边框（一）盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是 border 代码的缩写形式，可以分开写：阅读全文

posted @ 2017-01-18 11:53 美林pml 阅读(186) 评论(0) 推荐(0)

元素分类

摘要：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有：阅读全文

posted @ 2017-01-18 11:37 美林pml 阅读(184) 评论(0) 推荐(0)

文字排版

摘要：文字排版--字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";} 这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的阅读全文

posted @ 2017-01-18 10:49 美林pml 阅读(192) 评论(0) 推荐(0)

三种CSS样式

摘要：内联式css样式，直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：并且css样式代码要写在style=""双引号中，如果有多条阅读全文

posted @ 2017-01-18 09:18 美林pml 阅读(228) 评论(0) 推荐(0)

选择符

摘要：伪类选择符更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字阅读全文

posted @ 2017-01-16 21:42 美林pml 阅读(144) 评论(0) 推荐(0)

选择器

摘要：每一条css样式声明（定义）由两部分组成，形式如下：在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。标签选择器标签选择器其实就是html代码中的标签。如编辑器中的<htm 阅读全文

posted @ 2017-01-16 21:10 美林pml 阅读(177) 评论(0) 推荐(0)

认识CSS样式

摘要：CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。为什么使用css样式来设阅读全文

posted @ 2017-01-16 20:03 美林pml 阅读(129) 评论(0) 推荐(0)

表单-续

摘要：form表单中的label标签 label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）阅读全文

posted @ 2017-01-16 17:33 美林pml 阅读(121) 评论(0) 推荐(0)

表单

摘要：使用表单标签，与用户交互网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。语法： <form method="传送方式" action="服务器文件"> 讲解： 1.<form> ：<form>标签阅读全文

posted @ 2017-01-16 17:28 美林pml 阅读(133) 评论(0) 推荐(0)

为网页插入图片

摘要：在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。语法： <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 举例： <img src = "myimage.gif" alt = "My Image" title = 阅读全文

posted @ 2017-01-15 18:13 美林pml 阅读(624) 评论(0) 推荐(0)

认识网页上的表格

摘要：一、创建表格的五个元素： table、tbody、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格阅读全文

posted @ 2017-01-15 17:58 美林pml 阅读(266) 评论(0) 推荐(0)

认识div在排版中的作用

摘要：在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。语法： <div>…</div> 确定逻辑部分：什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出阅读全文

posted @ 2017-01-15 17:33 美林pml 阅读(263) 评论(0) 推荐(0)

在网页中加入代码

摘要：一、加入一行代码，使用<code>标签在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，就可以使用<code>标签了，如下面例子： <code>var i=i+300;</code> 注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。语法：阅读全文

posted @ 2017-01-15 17:16 美林pml 阅读(927) 评论(0) 推荐(0)

引用

摘要：一、<q>标签，短文本引用语法： <q>引用文本</q> 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。运行结果为：二、<blockquote>标签，长文本引用 <blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要阅读全文

posted @ 2017-01-15 16:38 美林pml 阅读(120) 评论(0) 推荐(0)

使用<span>标签为文字设置单独样式

摘要：1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。 2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的阅读全文

posted @ 2017-01-15 16:26 美林pml 阅读(294) 评论(0) 推荐(0)

浅谈html入门

摘要：一、学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色阅读全文

posted @ 2017-01-15 16:16 美林pml 阅读(153) 评论(0) 推荐(0)

在sublime_text3中实现项目的跳转

摘要：作为学习前端的小白，选择了sublime_text3作为学习的编译器。学习的过程是艰辛的，但也是快乐的。遇到自己不会的，有时候会折腾好几个小时，在实现预期效果的时候，那种兴奋真的难以言述。今天，在学习资料的时候，遇到了一个问题：如何实现界面之间的跳转？常用的是<a href="跳转链接">，如：< 阅读全文

posted @ 2017-01-12 19:10 美林pml 阅读(811) 评论(0) 推荐(0)