![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web开发
The_last_knight
这个作者很懒,什么都没留下…
展开
-
CSS3
CSS3新特性样式背景background-origin我们知道盒子的大小有三部分组成:border, padding, content,当我们设置背景图片时,图片是会以左上角对齐,但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的,它有三个可选值border-boxpadding-boxcont...原创 2019-12-29 18:56:06 · 221 阅读 · 0 评论 -
一文入门HTML5
HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体,例如:video标签和audio及canvas代标记。HTML5中语义化标签在HTML5中新增了很多的语义标签,如headerfooternavarticleasidesection… …比如以前我们使用以下方式来布局<div class="header">&l...原创 2019-12-26 20:45:32 · 225 阅读 · 0 评论 -
盒子阴影
盒子阴影 为了知道什么是盒子阴影,观看如下效果这里选取了小米的做法,由于设置阴影的颜色比较淡,所以可能比较难看出来。 用以设置盒子阴影的属性是box-shadow,它的值比较多,需要设置的值如下,水平阴影垂直阴影模糊距离(虚实)阴影尺寸(影子大小)阴影颜色内/外阴影其中水平阴影h-shadow和垂直阴影v-shadow是必须设置的。 为了观看设置这些值的效果,我...原创 2019-01-23 15:41:48 · 1837 阅读 · 0 评论 -
动画
动画 animation用以设置动画的效果,其使用方法为animation: 动画名称 持续时间 时间曲线 延迟时间 播放次数 是否反向 持续时间默认为0s,时间曲线默认为ease,延迟时间默认为0s,播放次数默认为1,是否反方向默认为normal,即不反方向。 假设有下面的这个盒子div { width: 100px; height: 100px; ba...原创 2019-02-01 12:27:54 · 160 阅读 · 0 评论 -
2d
2d 设置2d操作的属性是transform,具体操作包括移动,缩放和旋转。移动 transform: translate(x,y)用以设置移动,第一个参数x代表的是向x方向移动的距离,第二个参数y代表向y方向移动的距离,假设有如下结构<div></div><div></div>设置其样式为div { width: 100...原创 2019-02-01 12:09:09 · 223 阅读 · 0 评论 -
过渡
过渡 假设有一个100px * 100px的盒子,当鼠标经过时,该盒子的宽度变为200px,如下div { width: 100px; height: 100px; background-color: pink;}div:hover { width: 200px;} 但是这个效果太快了,直接显示结果,我希望是一个缓慢变化的过程,这个我们就需要...原创 2019-01-31 20:21:35 · 200 阅读 · 0 评论 -
CSS3盒子模型
CSS3盒子模型 我们知道盒子的大小是由border,padding,content三者的大小共同决定的,有时候如果我们确定了盒子的大小,之后我们改变padding值时,将会改变盒子的大小,为了不影响布局,我们会回过头去改变width和height以使得盒子的大小不变。 假设有如下的盒子div { width: 100px; height: 100px; back...原创 2019-01-31 19:20:18 · 979 阅读 · 0 评论 -
新增选择器
CSS3新增选择器结构伪类选择器 假设有如下结构<ul> <li>文字</li> <li>文字</li> <li>文字</li> <li>文字</li> <li>文字</原创 2019-01-31 18:52:03 · 225 阅读 · 0 评论 -
表单
表单 现实中会经常提交表单,比如在注册邮箱时,你就需要提交表单,表单由三部分组成,表单控件,提示文本和表单域。现在重点介绍表单控件,因为这个包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 与表单有关的标签是<input/ >,<input/ >是一个单标签,根据其属性type设置不同的值,可以指定不同的控件类型,如:...原创 2019-01-16 12:00:25 · 203 阅读 · 0 评论 -
新增表单
新增表单新增type属性值类型使用示例含义email<input type="email">输入邮箱格式tel<input type="tel"> 输入手机号码格式url<input type="url"> 输入url格式numbe<input type="number"&a原创 2019-01-31 14:00:04 · 403 阅读 · 0 评论 -
字体图标
字体图标获得自己需要的字体图标 首先进入icomoon.io网站去挑选自己需要的字体图标,该网站的服务器位于外国,所以打开的速度较慢。 然后会进入下面的页面,你可以在这里选择自己需要的字体图标 然后进入下载页面进行下载 下载后会得到一个压缩包使用字体图标 将该压缩包进行解压,会得到以下目录结构 我们将fonts文件夹复制到.html文件同一目录下...原创 2019-01-31 12:30:09 · 253 阅读 · 0 评论 -
圆角边框
圆角边框 至今为止,我们遇到的边框都是直角的,使用border-radius可以设置边框为圆角的,border-radius就是圆角边框的半径。width: 100px;height: 100px;margin: 0 auto;border-radius: 20px;background-color: pink; 与padding一样,取不同个数的值,代表设置不同地方的...原创 2019-01-21 19:35:29 · 1026 阅读 · 0 评论 -
表格
表格 表格在网页中也很常见,其写法为&lt;table&gt; &lt;tr&gt; &lt;td&gt;学科&lt;/td&gt; &lt;td&gt;分数&lt;/td&gt; &lt;/tr&gt; &am原创 2019-01-15 21:52:15 · 170 阅读 · 0 评论 -
伸缩布局flex
伸缩布局flex 如果我们想让盒子无缝的摆在一行,在之前我们用的是float实现的,使用浮动的话需要精确的计算盒子的宽度,以防止盒子掉下来。在这里使用伸缩布局不用考虑这一点,当设置父盒子为display: flex;时,那么父盒子使用的就是伸缩布局。 假设有如下结构<div class="father"> <div></div> <...原创 2019-02-01 13:21:01 · 178 阅读 · 0 评论 -
JavaScript入门
JavaScript入门JavaScript在HTML代码中的书写位置 JavaScript书写的位置有三个:<script>标签内HTML标签内在js文件中,需要以该种方式引入<script src="js文件的路径"> 需要注意的几个问题:如果一对script标签内的某行代码有问题,那么该标签内的该行代码后的代码不会被执行。script标签之间...原创 2019-02-01 18:49:49 · 580 阅读 · 0 评论 -
数据类型及操作符介绍
数据类型及操作符介绍Number 数字类型可以使用二进制,八进制,十进制和十六进制表示,当使用二进制表示时,在数字前面加上0b,使用八进制表示时,在前面加上0,使用十六进制表示时,在前面加上0x,如下var num1 = 0b110; //二进制表示,大小为6var num2 = 010; //八进制表示,大小为8var num3 = 0x1f; //十六进制表示,大小为3...原创 2019-02-01 19:59:00 · 466 阅读 · 0 评论 -
基本DOM操作
基本DOM操作什么是DOM DOM是Document Object Model文档对象模型的缩写,它用节点树的形式来表现文档,每个节点代表文档的构成部分。获取页面元素的方法 假设有如下的html结构&lt;div id = "dv" class = "first"&gt;&lt;/div&gt;那么通过下面的几种方法都可以获得这个div元素://通过原创 2019-02-20 22:05:30 · 180 阅读 · 0 评论 -
常用内置对象
常用内置对象Math对象//PI 圆周率console.log(Math.PI);//E 自然数econsole.log(Math.E);//abs() 求绝对值console.log(Math.abs(-1.5)); //1.5console.log(Math.abs(null)); //0//ceil() 向上取整console.log(Math.ceil(2.5)); /...原创 2019-02-20 14:04:29 · 300 阅读 · 0 评论 -
常见鼠标及键盘事件
常见鼠标及键盘事件鼠标点击事件对象.onclick = function () { //对象被点击时执行该函数}鼠标移动事件document.onmousemove = function () { //鼠标移动时执行该函数}获得焦点与失去焦点事件对象.onfoucus = function () { //对象获得焦点时执行该函数}对象.onblur ...原创 2019-02-22 12:13:42 · 387 阅读 · 0 评论 -
对象
对象对象的创建 第一种方法,通过new Object()方法创建对象//第一种方式创建对象var obj = new Object();obj.name = ... ; //添加属性... ...obj.f = function () {...}; //添加方法 第二种方法,通过自定义构造函数来创建对象function Person(name,age){...原创 2019-02-17 15:06:56 · 139 阅读 · 0 评论 -
节点
节点 页面中所有的内容(标签,属性,文本(文字,换行,空格,回车))都可以被称作是节点,文档就是由节点组成的。 首先通过一个简单的代码认识一下节点的结构&amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;p id=&amp;amp;amp;quot;pp&amp;amp;amp;quot;&amp;amp;amp原创 2019-02-22 15:23:47 · 226 阅读 · 0 评论 -
函数进阶
函数进阶 其实函数也可以看做是一种特殊的数据类型,所以函数也可以当做函数的参数,也可以作为函数的返回值。函数作为参数function f1(f) { f();}var f2 = function () { console.log("我是f2");}f1(f2);我是f2函数作为返回值function f1() { return function (...原创 2019-02-16 22:21:53 · 170 阅读 · 0 评论 -
函数
函数 函数可以看做是一个黑箱子,你给它丢入某个参数,它根据这个参数计算出相应的结果或者进行相应的操作。 函数可以让我们重复的使用代码,比如我要吃西红柿炒蛋,那么我会对西红柿和蛋进行一顿比较复杂的操作,然后做出一道西红柿炒蛋。然后今天我又要吃西红柿炒蛋,那么我会重复上次的工作,然后做出西红柿炒蛋。现在假如我有一台西红柿炒蛋机,我把如何做西红柿炒蛋告诉它,然后我每次要吃西红柿炒蛋时,我只需要把...原创 2019-02-16 21:15:33 · 148 阅读 · 0 评论 -
数组
数组数组的定义 当需要处理一组数据,我们就不能以大量的变量去保存这些值,我们可以把这些值放在一个数组中。比如现在我要保存一组学生的成绩var score = [60, 70, 80, 90];我们可以通过索引去引用这些值,比如score[0] //代表数组里的第一个数score[1] //代表数组里的第二个数...我们还可以通过索引去改变里面的值scor...原创 2019-02-16 19:27:03 · 141 阅读 · 0 评论 -
分支结构与循环结构
分支结构与循环结构分支结构if语句if(判断语句) { //如果为真,则执行下面的代码块,否则不执行 代码 ...}if-else语句if(判断语句){ //如果判断语句为真,则执行代码块1.否则执行代码块2 代码块1} else { 代码块2}例:判断某年是否为闰年。分析:满足闰年的条件是,该年能被4整除,但是不能被100整除,或...原创 2019-02-16 00:10:57 · 660 阅读 · 0 评论 -
浮动
浮动浮动概念介绍 浮动,正如它的表面意思,就是漂浮在空中,那么它有什么用以及有什么特性,我们看一个例子,假设有两个盒子.float { width: 200px; height: 200px; background-color: pink;}.no-float { width: 200px; height: 200px; backgrou...原创 2019-01-23 17:17:20 · 148 阅读 · 0 评论 -
列表标签
列表无序列表 该种列表在实际中使用的较多,效果是这样 足球 篮球 无序列表的标签为<ul> <li>足球</li> <li>篮球</li></ul>注意:<ul></ul>标签里面只能放<li>&l原创 2019-01-15 20:45:09 · 138 阅读 · 0 评论 -
链接标签
链接标签 我们碰到,当我们点击一句话就可以跳转到一个网页,或者点击一张图片跳转。那么这个就是用链接标签实现的。 链接标签为:&lt;a href="链接地址"&gt;跳转的文字或图片&lt;/a&gt;比如你点击这里就会跳转到百度。 比较需要注意的是,跳转到外部的网页要写成https://www.baidu.com,而不要写成www.baidu.com。 另外,注意这个跳转原创 2019-01-15 13:37:29 · 185 阅读 · 0 评论 -
标签显示模式
标签显示模式 我们把标签分为三类,一类为块级(block)标签,一类为行内(inline)标签,最后一类为二者的综合,为行内块(inline-block)标签。 每个块标签通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块级标签包括<h1>~<h6>、<p>、<div>、<ul...原创 2019-01-19 11:19:24 · 220 阅读 · 0 评论 -
链接伪类选择器
链接伪类选择器 什么是伪类选择器,伪类选择器是向某些选择器添加特殊效果,比如为链接添加特殊效果,链接伪类选择器有四个,分别为link: 未访问过的链接状态visited: 已访问过的链接状态hover: 鼠标放上去时的链接状态active: 鼠标按下时的链接状态 类选择器使用点.,而伪类选择器使用冒号:。 现在我们有这个需要,当未访问链接时,链接字体为25px,无...原创 2019-01-19 10:42:14 · 1429 阅读 · 0 评论 -
元素的隐藏与显示
元素的隐藏与显示display 当display设置为none时,会将元素隐藏,隐藏之后不会占据位置,如下&lt;div class="fir"&gt;&lt;/div&gt;&lt;div class="sec"&gt;&lt;/div&gt;div { width: 20原创 2019-01-24 11:45:53 · 191 阅读 · 0 评论 -
一个定位的练习
一个定位的练习 我们需要实现以下的效果 当鼠标放上去会有一层透明的&quot;薄膜&quot;出现,注意这张背景是插入的图片,而不是背景图片,所以这里只能用定位去实现。 第一步先构建出一个盒子,并且插入图片&amp;lt;div class=&quot;father&quot;&amp;gt; &amp;lt;img src=&quot;im原创 2019-01-24 10:40:30 · 471 阅读 · 0 评论 -
复合选择器
复合选择器后代选择器 假如有下面这么一个例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> </head&原创 2019-01-18 23:29:59 · 790 阅读 · 0 评论 -
WebStorm的快捷方式
WebStorm快捷方式 生成标签的方法:直接输入标签名,然后按下tab键即可,比如输入div,然后按下tab键,就可以生成<div></div>。 如果想要生成多个相同标签,加上*就可以了。比如div*5,就可以快速生成5个div。 如果标签之间有嵌套关系,如ul与li,则输入ul>li然后按下tab键自动生成嵌套的标签。 如果希望生成多个li...原创 2019-01-18 22:32:35 · 1278 阅读 · 0 评论 -
z-index
z-index 当使用定位时,会发现可能会有交叠的情况,一般是"后来居上",写在后面的会覆盖前面的,假设下面有两个盒子<div class="top"></div><div class="bottom"></div>div { width: 200px; height: 200px; position:原创 2019-01-24 09:52:36 · 127 阅读 · 0 评论 -
文本样式
文本样式颜色 color属性用以设置文本的颜色,其取值有三种方法:red,green,blue…等内置的颜色使用十六进制,比如#FF0000,其中十六进制的前两位代表三基色中的红色,中间两位代表绿色,后两位代表蓝色。所以#FF0000代表的就是红色。使用RGB代码,比如红色为rgb(255,0,0)。其中第二种方法使用的最多,如果十六进制的三对每两位是相同的,则可以缩写为一个,比...原创 2019-01-18 20:00:43 · 400 阅读 · 0 评论 -
字体样式
字体样式字体大小 font-size属性是用来设置字体大小的,字体大小的单位有很多,其中最常用的就是px,代表的是像素,1px代表的就是一个像素的大小。比如font-size: 20px; 在网页中普遍使用14px+,并且尽量用偶数大小,因为奇数可能在低版本的浏览器中出现莫名的问题。字体 font-family属性是用来设置字体的,比如font-family: "楷体";...原创 2019-01-18 18:55:02 · 1156 阅读 · 0 评论 -
定位
定位 定位应该说在CSS中占据着举足轻重的位置,学好定位很重要,定位可以让盒子想去哪就去哪。 定位分为四种,使用position设置定位模式,使用top,bottom,left,right设置定位的位置。 第一种叫做static,也是系统默认的定位,这个没什么讲的,平时接触的都是这个。相对定位 第二个叫做相对定位,当设置position: relative;时,就是相对定位,为了...原创 2019-01-23 21:44:48 · 206 阅读 · 0 评论 -
CSS入门
CSS入门 之前我们学习过HTML的基本知识,对于网页来说,HTML搭建的只是框架,而对于网页的美容,则需要用到CSS,CSS就可以看做是网页的美容师。 CSS的全称叫做Cascading Style Sheets,中文名字叫层叠样式表。我们可以用CSS设置字体的颜色,字体的大小以及图片外形,排版布局等等"美颜"的工作。CSS的书写位置行内式 CSS的书写位置有三个,第一个是行内,...原创 2019-01-18 15:46:48 · 643 阅读 · 0 评论 -
用户界面样式
用户界面样式鼠标样式 当我们把鼠标放到盒子上去,可以有不同的样式,设置的属性为cursor,其取值如下值效果default默认pointer小手move移动(表示可拖动的十字架)text文本(一根竖线)<ul> <li style= "cursor: default">我是默认</li> ...原创 2019-01-24 13:23:47 · 186 阅读 · 0 评论