![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
页面设计
SAP剑客
一日不读书,胸臆无佳想。一月不读书,耳目失精爽。
展开
-
【学习笔记】JS进阶语法一document对象
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例:write()方法和writeln()方法区别<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>writeln()方法</title> <style type="text/css"> div{width: 100px;heigh..原创 2022-03-08 21:04:12 · 457 阅读 · 0 评论 -
【学习笔记】JS进阶语法一window对象
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例:打开/关闭新窗口<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>打开窗口/关闭窗口</title> <script> window.onload = function () { var btnOpen = document原创 2022-03-07 21:36:10 · 477 阅读 · 0 评论 -
【学习笔记】JS进阶语法一事件进阶
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例:event对象keyCode属性获取键盘上下左右键<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>event对象</title> <style type="text/css"> #search{color:#bbbbbb;} <原创 2022-03-06 21:51:04 · 250 阅读 · 1 评论 -
【学习笔记】JS进阶语法一事件基础
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例:键盘松开一瞬间触发的事件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>键盘松开事件</title> <script> window.onload = function(){ var oTxt = document.getEleme.原创 2022-03-04 21:41:24 · 621 阅读 · 0 评论 -
【学习笔记】JS进阶语法一DOM进阶
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例:为元素设置属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bigmimi</title> <script> window.onload = function(){ var oBtn = document.getElementByI原创 2022-03-02 22:01:42 · 657 阅读 · 0 评论 -
【学习笔记】JS进阶语法一DOM基础
内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇getElementById() 和 getElementsByTagName()区别:1、getElementById()获取的是一个元素,而 getElementsByTagName()获取的是多个元素,即“类数组”(也成伪数组);2、getElementById()前面只可以接document,而 getElementsByTagName()前面不仅可以接document,还可以接其他DOM对象;3、get..原创 2022-02-28 21:48:12 · 531 阅读 · 0 评论 -
【学习笔记】JS基础语法一小时通
内容整理自《从0到1Javascript快速上手》上半部分-基础语法篇原创 2022-02-25 13:18:23 · 572 阅读 · 0 评论 -
【学习笔记】 Javascript定时器
Javascript定时器Window对象提供的定时器功能,其基本功能是在规定的时间自定执行某个函数。根据执行的机制,定时器又分为间歇定时器和延迟定时器。间歇定时器:每隔一段时间执行指定函数(不断循环);延迟定时器:指定时间到期后执行指定函数(执行一次);间歇定时器创建:使用window对象的setInterval()方法。语法:定时器对象ID = setInterval(函数调用/函数定义,毫秒);由于window对象是全局对象,访问同一个窗口的方法时,可以省.原创 2022-01-29 17:30:42 · 1653 阅读 · 0 评论 -
【学习笔记】Javascript this应用
Javascript this应用在Javascript程序中经常会使用this来指向当前对象,这里所谓的当前对象其实指的是调用当前方法(函数)的对象,而当前的方法(函数)指的是正在执行的方法(函数)。在不同的情况下,this会指向不同的对象。【示例】通过“fn1()”直接调用即调用当前函数的是window对象,所以输出的this为window对象;通过“aBtn[0].onclick = fn1”按钮1单击事件来调用即调用当前函数的是aBtn[0],所以输出的this为按钮对象原创 2022-01-29 17:29:26 · 1300 阅读 · 1 评论 -
【学习笔记】Javascript函数调用
Javascript函数调用函数调用函数定义后,并不会自动执行,需要通过调用来实现。在JS中调用通常有四种方式:函数调用模式;方法调用模式;构造器调用模式;apply、call调用模式;其中函数调用模式的语法是:函数名([实参列表]);若实参缺省时,会传“undefined”值给对应的形参;如果实参个数小于形参个数,实参首先按顺序一一对应传给形参,没有实参对应的形参,就会对应传“undefined”值;如果实参个数多余形参,那么多余的实参无效。再比如下面的例子原创 2022-01-27 18:10:55 · 1501 阅读 · 0 评论 -
【实用工具】HBuilder
HBuilder宝藏工具一、HBuilder简介HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。“快”是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、JS、CSS的开发效率(摘自《动态网页设计与开发》一书)。二、HBuilder特点原创 2022-01-26 18:20:02 · 12735 阅读 · 1 评论 -
【温故知新】CSS学习笔记(外边距合并)
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。一、相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距并不是margin-bottom加上margin-top之和,而是两者之间的较大者,这种现象被称之为相邻...原创 2020-05-07 20:29:42 · 1159 阅读 · 0 评论 -
【温故知新】CSS学习笔记(盒子水平居中方法)
CSS盒子水平居中比如有一个DIV盒子,如果不给任何样式,默认的宽度是和浏览器一样宽的(如下图所示)。那么若要让盒子里面的内容居中对齐,我们可以设定如下样式: div { text-align: center; }这里的内容包括文字、行内元素、行内块元素。盒子本身是可以...原创 2020-05-06 20:00:38 · 752 阅读 · 0 评论 -
【温故知新】CSS学习笔记(盒子内边距介绍)
CSS盒子内边距这一节我们开始介绍内边距(Padding)。内边距(Padding)属性用于设置内边距,内边距是指边框与显示内容之间的距离。【例子】默认情况下边框和内容紧挨着的;这里我们设置“padding: 10px;”,发现上下左右都有了10像素的间距;和上一节的边框一样,内边距同样分上下左右:padding-top:上内边距 padding-bot...原创 2020-05-03 14:28:39 · 627 阅读 · 0 评论 -
【温故知新】CSS学习笔记(盒子边框介绍)
CSS盒子边框CSS中其实就三个大模块:盒子模型、浮动、定位。其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)构成。看透网页的本质:把网页元素比如文字或者图片,放入盒子里面,然后利用CSS摆放盒子的过程,就叫做网页的布局。其实CSS确实没有太多...原创 2020-05-01 20:40:12 · 1065 阅读 · 0 评论 -
【温故知新】CSS学习笔记(背景)
CSS背景1、background-color:背景色;例如:background-color: #000;外部链接 :CSS颜色表2、background-image:背景图片;例如:background-image: url(images/ms.jfif);外部链接 :相对位置与绝对位置3、background-repeat:设置背景图像如...原创 2020-04-25 10:07:24 · 666 阅读 · 0 评论 -
【温故知新】CSS学习笔记(三大特性)
CSS三大特性简介CSS(层叠样式表)三大特性:层叠性、继承性、优先级。一、CSS层叠性所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上面,那么这时候一个属性就会将另一个属性层叠掉。比如先给某个标签指定了内部文字颜色会红色,接着又指定了颜色为蓝色,那么此时出现了一个标签指定了相同样式的不同值的情况,这类情况...原创 2020-04-19 15:10:21 · 670 阅读 · 0 评论 -
【温故知新】CSS学习笔记(行高简介)
行高简介【行高的测量】真正的行高有如下图所示的四条线组成(顶线、中线、基线、底线)。顶线:以文字的最高点为准; 中线:以文字的最高点和最低点中间取一条线为中线; 基线:以文字中最短的底线为基准; 底线:以文字的最低点为准;那么我们所说的行高其实就是基线到基线的距离。区分上面的底线与顶线之间的距离(行距)。【行高的运用】我们利用行高最多的一个地方就是...原创 2020-04-18 16:11:28 · 734 阅读 · 0 评论 -
【温故知新】HTML学习笔记(下)
表单标签表单的目的是收集用户信息,在网页中,也需要跟用户进行交互,收集用户资料。在HTML中,一个完整的表单通常由表单控件(也成为表单元素)、提示信息和表单域三个部分构成。1、input控件其中主要属性如下表所示:Input属性 属性 type text password radio checkbox ...原创 2020-02-17 10:16:02 · 493 阅读 · 1 评论 -
【温故知新】CSS学习笔记(显示模式简介)
显示模式Display我们的网页标签有很多,在不同的地方会用到不同类型的标签,以便于更好的展示我们的网页。标签的类型即显示模式,一般可以分为块标签和行内标签两种类型,也可以称之为块元素和行内元素。一、块级元素(Block-Level)每个块元素通常会独自占据一整行或者多个整行,可以对其设置其宽度、高度、对其等属性,常用于网页布局和网页结构的搭建,用一个词形容它,就是“霸道”。...原创 2020-04-18 10:37:25 · 535 阅读 · 0 评论 -
【温故知新】CSS学习笔记(链接伪类选择器)
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果。之前我们学过类选择器,以点“.”开头,为了区分开来,伪类选择器则是以冒号“:”开头。类选择器: .demo { }伪类选择器: :link { }链接伪类选择器通常有以下四个::link 未访问的链接 :visited 已访问的链接 :hover 鼠标移...原创 2020-04-15 20:25:45 · 617 阅读 · 0 评论 -
【温故知新】CSS学习笔记(并集和交集选择器)
并集和交集选择器这一节我们介绍另外两个“复合选择器”,并集选择器和交集选择器。复习一下上一讲的“子代选择器”,看下面的例子,要求将“上级菜单”置为红色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...原创 2020-04-14 20:31:05 · 979 阅读 · 0 评论 -
【温故知新】CSS学习笔记(后代和子代选择器)
后代和子代选择器CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题。1、后代选择器比如下面的例子,我们需要将所有的“Hello”选择出来,当然我们可以使用类选择器,但是要是p标签的数量有N个,岂不是要累死人的节奏。<!DOCTYPE html><html lang="en"><head>...原创 2020-04-12 15:33:19 · 614 阅读 · 1 评论 -
【温故知新】CSS学习笔记(开发者工具介绍)
Chrome工具浏览器中检查:F12键(或者右键“检查”Ctrl+Shift+i)按下上面这个“箭头”按钮后会出现右边的部分,左边是HTML代码,右边则是CSS代码。细看右边CSS代码,会发现有一条语句前面有一个感叹号,且语句加上了删除线,则说明改行的语法有问题(语句无效),后面会给出具体的行号。小技巧:Ctrl+滚轮 可以放大开发者工具代码大小; 左边...原创 2020-04-12 13:54:36 · 431 阅读 · 0 评论 -
【温故知新】CSS学习笔记(字体样式属性)附加篇
CSS字体样式属性一、font属性font属性用于对字体样式进行综合设置。基本语法:选择器{font: font-style font-weight font-size/line-height font-family;}字体连写是有顺序的,不能更换顺序,各个属性之间用空格分隔。font-size和font-family是不能省略的(其他可以省略),否则不起作用。[...原创 2020-03-01 21:23:22 · 686 阅读 · 0 评论 -
【温故知新】CSS学习笔记(字体样式属性)
CSS字体样式属性一、font-size:字号大小该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px。相对长度单位 说明em 相对于当前对象内文本的字体尺寸px 像素(推荐)绝对长度单位 说明in 英寸cm ...原创 2020-02-29 20:51:43 · 574 阅读 · 0 评论 -
【温故知新】CSS学习笔记(选择器)
选择器(选择符)目的是选择目标元素(选择标签用)。这里我们介绍四种基础选择器。1、标签选择器之前的例子都属于标签选择器,可以把某一类的标签全部选择出来;2、类选择器上面点声明,下面class调用就可以了;<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2020-02-18 10:21:47 · 436 阅读 · 1 评论 -
【温故知新】CSS学习笔记(样式表)
CSS-网页的美容师CSS-Cascading Style Sheets 美化样式通常叫做层叠样式表(级联样式表)。CSS样式引入的方式有三种(书写位置):1、内部样式表<head> <meta charset="UTF-8"> <title>Document</title> <style>...原创 2020-02-17 16:29:47 · 442 阅读 · 1 评论 -
【温故知新】HTML学习笔记(表格)
表格Table用来处理和显示数据。学习要求:能手写表格结构,能合并单元格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Table</title></head><body>...原创 2020-02-16 20:32:26 · 619 阅读 · 1 评论 -
【温故知新】HTML学习笔记(上)
HTML固定结构:<html> <head> <title> </title> </head> <body> </body> </html>HTML标签分类:1、双标签 <head> &...原创 2020-02-16 13:58:43 · 610 阅读 · 0 评论