web前端开发
中国大学MOOC——北京林业大学——web前端开发——笔记
易de
日积月累
展开
-
2020-07-22---js运算符
undefined == null,结果是true;== 判断左右两边的值是否相等,undefined和null都表示没有值,所以是相等的。parseInt,parseFloat,Number的区别:三者都是强制转换为数字的函数,但是在具体的某些场景下有区别。如果转的是布尔值、undefined、null以及纯整数的字符串,它们是相同的;如果转的带小数点的纯数字的字符串,parseInt的结果只有整数,parseFloat和Number是小数;如果转的前面数字,后面有其它字符,parseInt,pa.原创 2020-07-22 22:10:20 · 160 阅读 · 0 评论 -
2020-07-22---js基础语法
JavaScript官方概念:这是一个跨平台的脚本语言平台:就是运行环境,这里一般指操作系统。跨平台就是在各种环境下都可以运行。脚本语言:特点就是不能独立运行,要依赖于网页。HTML网页的运行离不开浏览器,js程序的运行离不开HTML网页。JavaScript组成1.ECMAscript;2.DOM 文档 HTML文件部分;3.BOM 浏览器 每打开的一个网页就是一个bom。【注】所有的js代码在一个script标签中编写。属性:(1)type=‘text/JavaScript’ 声原创 2020-07-22 13:17:37 · 389 阅读 · 0 评论 -
2020-07-20---css
span标签span,一个容器标签,不具备任何特殊功能,仅当容器来使用。用于包裹一段文本,便于给文本增加样式。div标签div,一个通用容器标签,不具备任何特殊功能,仅当作容器来使用。可以包裹任何内容,也可以容器直接相互包裹。一个空的div,宽度默认是100%,高度是0。css选择器ID选择器 #boxid表示身份,在页面中元素的id不允许重复,因此id选择器只能选择单个元素。类别选择器 .nav选择拥有该类别的多个属性。标签选择器 div根据标签名,选择对应的所有标签通用选择器 *原创 2020-07-20 20:32:11 · 145 阅读 · 0 评论 -
2020-07-17-----背景相关的属性
背景相关的属性背景颜色:background-color;背景图片:background-image:url();特点:(1)背景图片默认是平铺的;(2)背景图片默认是不占位置的;(3)背景图片的显示范围由容器大小决定:容器的大小>背景图片的大小,那么会看到很多平铺的背景图容器的大小<背景图片的大小,那么会看到部分背景图容器的大小=背景图片的大小,那么会看到一张完整的背景图背景图的位置:background-position:水平方向的值 垂直方向的值;水平方向的取值:l原创 2020-07-17 14:16:54 · 82 阅读 · 0 评论 -
2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
web前端开发中用到的PS基础操作PS的几个区域(1)菜单栏(2)工具栏(3)内容区(4)面板,调出信息面板的快捷键是F8或者FN+F8;PS的几个工具(1)移动工具(2)矩形选框,用来测量容器大小,文字大小,如果不是矩形工具,右击可以选择矩形;(3)切片工具,用来切去页面中的相关图片素材,如果不是切片工具,右击可以选择切片工具;(4)色板,用来吸取颜色值的。一、PS取色用【色板】。打开一张图片,点【色板】,就会出来拾色器,然后光标变成一个小吸管,在要取色的地方点一下,拾色器的原创 2020-07-16 13:05:33 · 815 阅读 · 0 评论 -
HTML&CSS案例---咖啡店
HTML&CSS案例—咖啡店最终页面效果页面结构为:最上面header是一个头部,主要是一张图片;下面的nav是一个导航栏,包含五个链接;下面是主体部分,左侧的上面是一个表格,下面是四张图片,当鼠标放到图片上会有一个放大的效果,右侧有4个div是四种咖啡的详细介绍;最下面有一个脚本。具体代码如下;HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2020-07-13 16:03:05 · 5567 阅读 · 4 评论 -
3D变换案例
案例正面是图片,当鼠标悬停到图片上,背面出现文字。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转</title> <style> *{ margin: 0; padding: 0; } body{ background-color:#0D3462; } /* 舞台 */ .co原创 2020-07-13 12:42:35 · 208 阅读 · 0 评论 -
2020-07-13-----5.5CSS3 3D变换
3D变换3D transform-style属性,把transform-style属性的值设置为preserve-3d,这就意味着要做3D变换;transform-style:preserve-3d。旋转 transform属性,主要旋转变换,旋转分为空间上的3个维度,将transform属性的取值分别设为这三种:rotateX()、rotateY()、rotateZ(),这样就可以分别沿着这三个轴来做3D的变换,取值为角度deg。透视 perspective属性,将它的值设置为一个像素值,近大远小原创 2020-07-13 11:29:44 · 147 阅读 · 0 评论 -
2020-07-11-----5.4 CSS3 过渡与动画(transition属性 @keyframs规则 animation属性)
CSS3过渡与动画过渡效果 :transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态,发生两个状态之间的一个变化。动画效果:让一个元素通过animation属性来完成若干个状态之间的一个转换,利用@keyframes规则和animation属性。过渡 transition属性transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态,发生两个状态之间的一个变化。transition 将元素的某个属性或者某几个属性或者所有属性从“一个值”在指定的时间内过渡原创 2020-07-11 23:19:48 · 390 阅读 · 0 评论 -
2020-07-11-----5.2CSS3文字与文本
CSS3文字与文本文本阴影text-shadowtext-shadow属性的参数有:水平偏移(正数向右偏移,负数相反方向)、垂直偏移(正数向下偏移,负数相反方向)、阴影大小(阴影的模糊范围,可以省略,省略的时候和文字的大小一样)、颜色text-shadow属性常用的两个文字效果(1)文字描边的效果把字体的偏移位移设置为零,也就是在原位置,没有偏移;然后模糊的范围是3px(这个值是根据经验来设置的,不同的字体字号它的值取值不同)。(2)文字凸起浮雕效果文字设置为白颜色的,设置阴影的时候,向右下原创 2020-07-11 22:03:55 · 154 阅读 · 0 评论 -
2020-07-11-----5.3 CSS3 2D转换
CSS3 2D转换2D转换方法:对元素进行旋转、缩放、移动、拉伸主要使用transform属性,它的不同的取值采用不同的函数,就可以完成不同的效果。rotate(deg);函数,旋转效果。transform:rotate(deg);transform:rotate(deg);将 rotate()函数设置为transform属性的取值,rotate(deg)中带有的参数deg是旋转的角度,单位是degree,需要设置的酵素的值可以是正值,也可以是负值,如果是正值就是顺时针地进行旋转,如果是负值就是逆原创 2020-07-11 18:57:27 · 160 阅读 · 0 评论 -
2020-07-10-----5.1 CSS3圆角边框与阴影
CSS3圆角边框与阴影圆角边框border-radius四个子属性(1)border-top-left-radius左上角的形状(2)border-top-right-radius右上角的形状(3)border-bottom-left-radius左下角的形状(4)border-tbottom-rightt-radius右下角的形状每个属性的取值是这样的:如果是两个值的情况,就表示一个是水平方向的值,一个是垂直方向的值;如果是一个值的情况,就表示水平方向和垂直方向的值相等。border-r原创 2020-07-10 22:33:07 · 154 阅读 · 0 评论 -
2020-07-08-----4.4-4.7 CSS定位
CSS定位机制概述1.定位机制:把各个盒子(也就是页面元素)放在具体的位置。2.定位机制的分类:(1)文档流flow:默认的一种情况,不需要额外的设置,每种元素在当前的页面上呈现出来的状态。页面元素从左到右,从上到下显示,只是有的元素单独占一行,有的元素排在别的元素的右边。(2)浮动定位float:改变默认的文档流的情况。脱离文档流,让元素浮动起来。浮动定位采用float属性,属性值为right,向右浮动,属性值为left,向左浮动。(3)层定位layer:当前的网页的元素像图层一样前后层叠在一起原创 2020-07-08 19:24:07 · 157 阅读 · 0 评论 -
2020-07-07-----4.2、4.3盒子模型
盒子模型首先要清楚盒子可以是页面中的任意元素1.盒子模型:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。盒子模型的组成:content(内容),内容占据着一定的空间,用height(高度)和width(宽度)来表示;在内容和边框可以有空白距离,我们把这个空白距离叫做内边距,用padding来表示;我们可以用border来设定一个边框;在边框之外的距离称为外边距,用margin来表示;当页面上有多个盒子的时候,我们可以通过外边距margin来设定盒子之间的距离。即盒子模型由con原创 2020-07-07 23:22:27 · 474 阅读 · 0 评论 -
2020-07-07-----4.1CSS布局与定位概述
CSS布局与定位概述web前端开发会拿过来一个如下图所示类似的效果图,然后对里面的样式进行设计,但是最开始考虑的并不是像字体颜色,标题大小等的细节内容,要最先考虑的是整个效果图里面体现出来的一个页面结构,通常会逐级划分,要决定每个部分分别在什么位置,大小是多少,占据页面多大的空间等。把这种大的结构的划分称为布局。我们可以把上面的效果图划分为下面的页面结构上面的结构就像一个大盒子里放了大小形状不同的物品,每个物品都放在自己的位置,我们可以用盒子模型来描述网页,外面最大的盒子相当于整张网页,盒子里面原创 2020-07-07 17:00:45 · 131 阅读 · 0 评论 -
2020-07-05-----3.4-3.6CSS样式
CSS样式一、文字样式1.单位与颜色属性css样式的常用单位单位描述px像素,1个字符—12pxem1em—1个字符;2em—2个字符;自动使用用户所使用的字体 ;文本类型经常使用%百分比,相对父级颜色颜色描述red,blue,green颜色名 css 合法颜色值rgb(x,x,x)RGB值,每个颜色分量取值0-255,红色:rgb(255,0,0)rgb(x%,x%,x%)RGB百分值,0%-100%,红色:rg原创 2020-07-05 19:24:10 · 210 阅读 · 0 评论 -
2020-07-05-----3.3CSS选择器
CSS选择器选择器的类型1.标签选择器选择器的名字就是标签的名字。样式作用于对应的标签里的内容。语法结构就是选择器名字(即标签名),后面跟上花括号{},在花括号里面写上对应的属性以及属性值。p{ font-size: 12px;}2.类别选择器在HTML代码部分,在对应的要作用的标签之内,采用它的class属性来进行类别样式的引用,设置的class属性的取值就是类别样式的名称。然后在CSS代码部分,选择器的名字是我们在HTML里面设置的类别样式的名称,即class属性的取值,然后再原创 2020-07-05 12:57:28 · 619 阅读 · 0 评论 -
2020-07-04-----3.2CSS添加方法
CSS添加方法我们要实现下面的样式,即让字体变为红色,可以有下面三种方法。1.行内样式将属性和属性的取值直接添加到当前需要添加样式的元素的标签内部。现在我们要将段落添加样式,我们就将段落的标签p标签,在它的内部加一个style属性,然后style属性设置的值直接写上color这个属性的名字,冒号后面是属性的取值。2.内嵌样式将CSS代码内嵌到当前页面的head标签部分。当前的样式只对当前页面的标签有用。body部分不再包含样式,只包含段落内容,要将样式用一对style标签表示出来,并且st原创 2020-07-04 20:38:32 · 151 阅读 · 0 评论 -
2020-07-04-----3.1CSS概述
CSS概述1.CSS样式早期的时候,用HTML标签来规定网页的内容和它的基本结构,用标签的一些属性来规定样式。但是这样内容和样式混合在一起,当其中一个发生变化,另外一个不得不改变。随着web技术的发展,我们将HTML和CSS拆分开,也就是将内容与样式拆分开,所有关于网页结构的部分,用HTML语言规范,关于样式的部分,用CSS语言来规范。CSS(Cascading Style Sheets),层叠样式表,内容和样式相分离,一个内容可以有多个样式,这些样式都是叠加的效果,便于修改样式,也不会影响内容的部原创 2020-07-04 18:57:13 · 208 阅读 · 0 评论 -
2020-06-30至07-04-----2.3-2.8HTML标签
HTML标签1.标题h1~h6< h1 >标题内容< /h1 >一个页面建议只有一个一级标签2.段落p< p > 段落内容< /p>这是段落标签,每使用一个p标签,就会自动换行,即另起为一个段落,并且段落之间自动添加段落间距。对于HTML的源文件是自动去掉空格的 ,段落内部连续的空格只会生成一个空格,换行也会显示为一个空格, 注意:不会显示空格,也不会显示换行3.段内换行 br< br /> 单标签,直接结束4.空原创 2020-07-04 18:01:53 · 368 阅读 · 0 评论 -
2020-06-30-----2.2HTML文件结构
HTML文件结构 字符 编码<!DOCTYPE html>//表示文档类型:符合HTML5的标准,不是一个标签。<html lang="en">//lang属性:搜索引擎 提示搜索引擎当前是中文网页来表示还是英文网页来表示。en表示英文,zh表示中文 <head> <meta charset="utf-8" />//meta 表示元数据,,包含这个网页的一些很基础的信息,比如网页的作者等。搜索引擎是按照关键字来搜索网页的。charset属性,指原创 2020-06-30 18:22:59 · 122 阅读 · 0 评论 -
2020-06-30-----2.1HTML概述(HTML 标签 元素 属性)
HTML概述1.HTMLHTML(HyperText MarkUp Language)“超文本标记语言”,是制作网页的标准语言。超文本:通过超链接的形式,将文本有机地组织在一起就是超文本。标记:即标签2.标签由尖括号括起来的部分,比如<>...原创 2020-06-30 11:28:37 · 181 阅读 · 0 评论 -
2020-06-29-----1.3web前端开发技术
web前端开发技术1.技术构成结构:HTML语言构成,从语义的角度,描述页面的结构。例如页面包括标题,段落,图片等。样式:CSS语言构成,从审美的角度,美化页面。例如页面的布局,字体的大小样式等。行为:JavaScript语言构成,从交互的角度,提审用户的体验。例如,一辆车首先HTML构造出其基本结构,然后想做什么样式的汽车由CSS决定,最后要让汽车跑起来通过JavaScript来决定。2.技术标准W3C(World Wide Web Consortium)万维网联盟组织。W3C标准原创 2020-06-29 18:04:01 · 86 阅读 · 0 评论 -
2020-06-29-----1.2网站与网页
网站与网页1.概念(1)网站(web site):互联网上用户展示特定内容的相关网页的集合。(2)网页(web page):网站中的一页,一个网站中的网页通过“超链接”的方式被组织在一起。(3)主页(homepage):进入网站看到的第一个网页,主页的文件名通常是index。思考:网站的风格受什么影响?网站的主题影响网站的风格;由于手机端的用户比较多,所以很多网页都做成扁平化的,篇幅比较长的网页风格。现在主流的网站大都是什么风格?2.网页元素每个网页都由几个网页元素构成(1)站标(Lo原创 2020-06-29 17:28:56 · 196 阅读 · 0 评论 -
2020-06-29-----1.1web前端开发概述
web前端开发概述1.引言web web系统(以网站形式呈现,通过浏览器访问,完成一定功能的系统)前端 网页上为用户呈现的部分开发 编写代码2.web系统(以网站形式呈现,通过浏览器访问,完成一定功能的系统):电商网站:淘宝综合门户网站:新浪管理系统:教务系统3.web系统从开发人员的角度可以分为前端后后端两个部分前端:网页上为用户呈现的部分,用户接触的部分后端:与是数据库进行交互,完成数据存取,用户触摸不到例如:用户要浏览自己的订单信息,当他登录之后,就有页面的后端来进行数据原创 2020-06-29 16:44:49 · 208 阅读 · 0 评论