700字范文 > 第三阶段：Web前端：01Web(HTML CSS JavaScript Vue ElementUI)

第三阶段：Web前端：01Web(HTML CSS JavaScript Vue ElementUI)

时间：2023-10-14 19:40:54

转载自：国彬老师：https://shimo.im/docs/47kgJm9bMdiLO5qV/read

课程介绍：一、二、三

一、Web前端：学习如何搭建页面，如何美化页面，如何给页面添加动态效果

二、MySQL数据库：学习如何对数据进行增删改查

三、SpringBoot: 学习如何接收客户端请求，以及如何响应请求，并将页面展示，业务逻辑，数据存储三大部分整合

一、Web前端： HTML/CSS/JavaScript

————>学习如何搭建页面，如何美化页面，如何给页面添加动态效果

————>学习web前端需要掌握：HTML css JavaScript语言。

下面我们就来了解下这三门技术都是用来实现什么的：

HTML：是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS：样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。JavaScript：用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1、Web前端之——Html：盖房子

HTML教程：/w3/html/index.html

01.什么是HTML?

超文本标记语言（英语：HyperText Markup Language，简称：HTML）：是一种用于创建网页的标准标记语言。：超文本：指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）：标记语言：<开始标签属性=“xxx”>标签体</结束标签>：(1)作用：负责搭建页面结构和内容（盖房子毛坯房）：(2)主要学习标签！——————>HTML的关键是标签，其作用是指示将出现的内容。HTML中表格的用法————>table表示表格, tr表示行 td表示列(单元格) 什么是HTML?(1)①超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。②您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。(2) HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面(3)总结：①HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。②HTML 的关键是标签，其作用是指示将出现的内容。

(1)常见的文本、列表标签：

00.快捷键：(1)复制整行快捷键 ctrl+D(2)注释快捷键 ctrl+shift+/(3)快速进入下一行 shift+回车01.常见的文本标签：(1)文本标题：h1-h6特点：独占一行, 自带上下间距, 字体加粗(2)水平分割线：hr(3)段落标签：p特点：独占一行,自带上下间距(4)换行： br(5)加粗：b(6)斜体：i(7)下划线：u(8)删除线：s02.常见的列表标签：(1)无序列表: ul和li 组合 unordered list list item(列表项)(2)有序列表: ol和li 组合 ordered list(3)列表嵌套：有序列表和无序列表可以任意无限嵌套例：(1)无序列表： ul和li<ul><li>...</li><li>...</li></ur>(2)有序列表： ol和li<ol><li>...</li><li>...</li></or>(3)列表嵌套：有序列表和无序列表可以任意无限嵌套有序列表嵌套：<ol><li>凉菜<ol><li>拍黄瓜</li><li>东北大拉皮</li></ol></li><li>热菜<ol><li>宫保鸡丁</li><li>木须肉</li></ol></li></ol>————————————————————————————————————————————————————————————————上述练习题1：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01文本相关标签</title></head><body><h1 align="center">内容标题1</h1><h2 align="right">内容标题2</h2><h3>内容标题3</h3><h4>内容标题4</h4><h5>内容标题5</h5><hr><p>段落1</p><p>段落2</p><p>段落3</p><b>加粗标签</b><i>斜体标签</i><u>下划线标签</u><s>删除线标签</s><hr><h3>列表标签</h3><h4>无序列表</h4><ul><li>刘备</li><li>诸葛亮</li><li>张飞</li></ul><h4>有序列表</h4><ol><li>克晶老师</li><li>传奇老师</li><li>国斌老师</li></ol><h4>有序列表嵌套</h4><ol><li>凉菜<ol><li>拍黄瓜</li><li>东北大拉皮</li></ol></li><li>热菜<ol><li>宫保鸡丁</li><li>木须肉</li></ol></li></ol></body></html>————————————————————————————————————————————————————————————————简历练习题2：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02简历练习</title></head><body><h1 align="center">个人简历</h1><hr><h4>基本信息</h4><p>姓名：<b>苍老师</b></p><p>性别：<i>男</i></p><p>爱好：<s>摄影</s></p><h4>个人经历</h4><ul><li>小学9年</li><li>中学6年</li><li>高中</li></ul><h4>获得荣誉</h4><ol><li>知名度最高奖</li><li>达内体重达人</li></ol></body></html>

(2)图片img标签：

src资源路径：1.相对路径：一般访问站内资源时使用-(1)图片和页面在同一目录：直接写图片名例:【<img src="a.png" alt="">】-(2)图片在页面的上级目录：../图片名注:若是上上级目录，则是(../../图片名)例:【<img src="../b.png" alt="">】-(3)图片在页面的下级目录：文件夹名/图片名例:【<img src="picture/c.png" alt="">】-(4)alt:当图片不能正常显示(或图片不存在时)时显示的文本例:【<img src="aa.png" alt="这是个美女图片">】-(5)title: 鼠标在页面的该图片上悬停时显示的文本例:【<img src="../b.png" title="这是标题" alt="">】-(6)width/height:设置图片的宽高, 两种赋值方式: <1>像素 <2>百分比——>如果只设置宽度高度会等比例缩放例:【<img src="a.png" width="50" alt="">】【<img src="d.png" width="50%" alt="">】2.绝对路径：访问站外资源,称为:图片盗链(有找不到图片的风险)- 例:【<img src="/bsfile//courseImg///e2b2f64d02e14b6aaeba283722d5892a.jpg" alt="">】<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03图片标签</title></head><body><img src="a.png" alt=""><img src="../b.png" alt=""><img src="picture/c.png" alt=""><img src="aa.png" alt="这是个美女图片"><img src="../b.png" title="这是标题" alt=""><img src="a.png" width="50" alt=""><img src="d.png" width="50%" alt=""><img src="/bsfile//courseImg///e2b2f64d02e14b6aaeba283722d5892a.jpg" alt=""></body></html>

(3)超链接: < a >

01.href: 资源路径作用类似图片标签的src02.a标签：包裹文本为文本超链接 ; 包裹图片为图片超链接03.页面内部跳转：在目的地元素(点完后要跳转到的位置)里面:添加"id=xxx",然后在a标签包裹的超链接(href)里面:href="#xxx"的方式来跳转到目的地元素的位置<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04超链接</title></head><body><a id="top" href="">超链接1</a><a href="">超链接1</a><a href="02简历练习.html">超链接2</a><a href="a.png">超链接3</a><a href=""><img src="a.png" width="100"></a><img src="a.png" aly=""><img src="a.png" aly=""><img src="a.png" aly=""><img src="a.png" aly=""><img src="a.png" aly=""><a href="#top">回到顶部</a></body></html>

(4)表格相关标签：

01.相关标签: table表格tr：表示行td：表示列写在tr中th：叫做表头。写在tr中 ————>与td不同就是，加粗并居中了 caption：表格上边的标题02.相关属性: border边框(加在table后：<table border="xx">)column：表示列的单词colspan：跨几列写在table中row：表示行的单词rowspan：跨几行写在table中<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05表格</title></head><body><table border="1"><tr><td colspan="2">1-1</td><td>1-3</td><td rowspan="2">1-4</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td colspan="4" align="center">3-1</td></tr></table><table border="1"><tr><td colspan="2">1-1</td><td rowspan="2">1-3</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td></tr><tr><td colspan="2" align="center">3-2</td></tr></table><table border="1"><caption>购物车</caption><tr><th>编号</th><th>商品名</th><th>价格</th></tr><tr><td>1</td><td>小米12 pro</td><td>5000元</td></tr><tr><td>2</td><td>苹果12 pro</td><td>9000元</td></tr><tr><td>总价</td><td colspan="2">14000元</td></tr></table></body></html>

(5)表单form：< inpit >

作用：获取用户输入的各种信息并且把这些信息提交给服务器注意:只有被包含在form里面的输入框才会被提交!01.为什么网页上一点击注册就把信息提交了？页面如何将用户输入的信息提交给服务端表单form的使用:form是提交表单的方式(只有在form中的才会被提交)：1)<form action="/myweb/reg" method="get"><table></table><form><form>:表单：用于将用户在页面上输入的信息提交给服务端使用注意:只有被包含在form里面的输入框才会被提交!form上有两个重要的属性:①action:用于指定表单提交的位置，该位置需要服务端配合②method:提交方式，有两个值:get,postget:地址栏形式提交，数据会被包含在URL的抽象路径部分post:打包提交，数据会被包含在请求的消息正文中，表单含有用户隐私信息或附件上传是应当使用post提交。——————————————————————————————————————————————————————————————————————————02.form表单中所有输入框都要使用name属性指定名字，否则提交表单时会被表单忽略。(1)submit：提交按钮,这个按钮的作用是将包含它的form表单进行提交。例:【<input type="submit">:】(2)maxlength：表示限制最大字符长度value：设置默认值。就是直接定死用户名readonly：只读模式例:【<input type="text" name="username" maxlength="5" value="abc" readonly><br>】(3)单选框中：value：是单选框必须添加的属性否则提交onchecked：在页面上默认选中某个单选框label for="xx" ： label后边for指定的值必须与前边在<input .... id="xx">中id指定的值相同！此时点击单选框时，可以只用鼠标放在想选择的单选框后的文字即可点击(不用必须点击单选框前的“按钮”了)例:【<input type="radio" name="gender" value="m" id="222"><label for="222">男</label>】(4)type="date"：在页面中显示日期标签例:【<input type="date" name="birthday"><br>】(5)type="file"：在页面中可以选择电脑的本地文件例:【<input type="file" name="pic"><br>】(6)下拉选框中：格式：<select name="xx" selected><option> xxx </option></select>selected：下拉选中默认选中的值，跟在value后例：【<option value="gz" selected>广州</option>】例题：————> 下拉选是select标签不是input标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06表单</title></head><body><form action="">用户名:<input type="text" name="username" maxlength="5" value="abc" readonly><br>密码: <input type="password" name="password"><br>性别: <input type="radio" name="gender" value="m" id="222"><label for="222">男</label><input type="radio" name="gender" checked value="w">女<br>兴趣爱好: <input type="checkbox" name="hobby" checked value="cy">抽烟<input type="checkbox" name="hobby" checked value="hj">喝酒<input type="checkbox" name="hobby" checked value="tt">烫头<br>生日:<input type="date" name="birthday"><br>照片:<input type="file" name="pic"><br>所在地：<select name="city"><option value="bj">北京</option><option value="sh">上海</option><option value="gz" selected>广州</option></select><br><input type="submit" value="注册"></form></body></html>

*(6)块级(div) / 行内(span)_分区标签

(1)作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理 (2)常见的两种分区标签:块级分区标签div: 特点是独占一行行内分区标签span: 特点是共占一行 (4)页面区域如何划分? 一个页面至少分为3大区(头/体/脚), 每一个大区域再划分n个区域(5)HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 包括: header头、footer脚、main主体、section区域、article文章/正文, nav导航这几个标签的作用和div一样都是块级分区标签:header头<header></header>footer脚<footer></footer>main主体 <main></main>section区域<section></seciont>article文章/正文 <article></article>nav 导航 <nav></nav>——————————————————————————————————————————————————————————————————————————01.块级分区标签：div(1)div设置居中后：所有子元素都会继承下去也居中：但是块级元素是独占一行,元素的文本内容会受继承的居中影响(元素内容居中了,元素自身没居中)行内元素内容受继承的居中影响,并且元素自身受上级元素居中影响后元素本身会居中(元素内容居中了,元素自身也居中了)*/(2)div的————>宽度默认是上级元素的宽度高度默认为内容的高度(3)让DIV设置块级元素水平居中的css样式是 margin:0 auto02.行内元素(1)行内块元素受上级元素居中影响，元素自身会居中内容也继承了居中(2)设置行内元素的垂直对齐方式vertical-align： top上对齐middle中间对齐bottom下对齐baseline基线对齐(默认的)————>例：vertical-align: middle;

2、Web前端之——CSS：装修房子

css教程：/w3/css/index.html

01.什么是CSS？

CSS(Cascading Style Sheet ) 层叠样式表：样式是表现。：就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。(1)作用: 美化页面(装修)

02.如何在HTML页面中添加CSS样式代码?

(0)有三种引入方式：内联 / 内部 / 外部样式

内联样式：在body标签中的标签内用style属性中添加样式代码, 弊端:不能复用内部样式：在body标签上边的head标签里面：添加style标签, --在标签体内通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, --可以多页面复用,可以将样式代码和html代码分离开.注1：css样式文件的创建：选择页面鼠标右键new——>选择CSS图标的Stylesheet工作中外部样式使用的最多, 学习过程中内部样式用的多<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>08CSS引入方式</title><style>h2{color: blue}</style><link rel="stylesheet" href="08my.css"></head><body><h1 style="color: red">内联样式1</h1><h1 style="color: red">内联样式2</h1><h2>内部样式1</h2><h2>内部样式2</h2><h3>外部样式1</h3><h3>外部样式2</h3></body></html>

03.选择器

(1)常用6种选择器

00.标签名选择器: 选取页面中所有同名标签格式: 标签名{样式代码}01.id选择器:——>当需要选择页面中【某一个】元素时使用(1)前提：在head标签中添加一个style标签，再从该标签里写：id选择器格式: #id{样式代码(color : 颜色的名字)}(2)再从body中的[标签]内写：id="p1" 例:【<p id="p1">苹果</p>】02.类选择器:——>当需要选择页面中【多个】不相关元素时, 给多个元素添加相同的class属性值,然后通过类选择器进行选择即可(1)前提：在head标签中添加一个style标签，再从该标签里写：类选择器格式: .class{样式代码(color : 颜色的名字)}(2)再从body中的[标签]内写：class="c1" 例:【<p class="c1">香蕉</p>】03.分组选择器: 分组选择器可以将多个选择器合并成一个格式: h4,#id,.class{样式代码(color : 颜色的名字)}04.属性选择器: 通过元素的属性选择元素格式: 标签名[属性名="属性值"]{样式代码(color : 颜色的名字)}05.任意元素选择器: 选择页面中所有标签格式: *{样式代码(边框: 粗细样式颜色)}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>09选择器</title><style>/*01.id选择器 */#p1{color: red}/*02.类选择器*/.c1{color: yellow}/*03.分组选择器————>分组选择器可以将多个选择器合并成一个*/h4,#p1,.c1{background-color: blue}/*04.属性选择器————>通过元素的属性选择元素*/input[type="text"]{color: red}/*05.任意元素选择器*{边框: 粗细样式颜色}*/*{border: 2px solid green}</style></head><body><input type="text"><input type="password"><p id="p1">苹果</p><p class="c1">香蕉</p><p>橘子</p><h3>冰箱</h3><h3 class="c1">洗衣机</h3><h3>电视机</h3><h4>张三</h4></body></html>————————————————————————————————————————————————————————————————————选择器练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>09选择器练习</title><style>#l1{color: green}.c1{color: blue}h1,h2{background-color: yellow}input[type="password"]{background-color: red}*{border: 3px solid red}</style></head><body><ul><li id="l1">张学友</li><li class="c1">刘德华</li><li>郭富城</li></ul><h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1><h2>刘备</h2><input type="text"><input type="password"></body></html>

(2)选择器续：再加另外三种选择器

(1)子孙后代选择器：通过通过元素之间的层级关系选择元素格式: body div div p{样式代码}上面格式匹配的是body里面的div里面的div里面的所有p(包括子元素和后代元素)(2)子元素选择器：通过元素之间的层级关系选择元素格式: body>div>div>p{样式代码}上面格式匹配的是body里面的div里面的div里面的所有子元素p(不包含后代元素)(3)伪类选择器: 选择的是元素的状态,包括以下四种状态：包括四种状态：未访问/ 访问过/ 悬停 /点击状态对应格式: a: link/visited/hover/active<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01选择器续</title><style>/*子孙后代选择器*//* body div div p{color: red;}*//* 子元素选择器 */body>div>p{color: red;}/*伪装选择器*/a:link{color: red}/*未访问的超链接会显示该指定的颜色*/a:visited{color: pink}/*访问过的超链接会显示该指定的颜色*/a:hover{color: green}/*悬停在页面众的超链接时显示该指定的颜色*/a:active{color: yellow}/*点击的时候显示该指定颜色*/</style></head><body><p>p1</p><div><p>p2</p><div><p>p3</p></div><div><p>p4</p><div><p>p5</p></div></div></div><a href="">超链接1</a><a href="">超链接2</a><a href="">超链接3</a></body></html>练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01选择器续练习题</title><style>/*1.关羽绿色*/#p{color: green}/*2.张飞和苹果黄色*/.y{color: yellow}/*3.文本框和所有水果背景红色*/input[type="text"],body>p{background-color: red}/*4.p2字体粉色*/body>div>div>p{color: pink}/*5.p2和p3背景黄色*/body div div p{background-color: yellow}/*6.优酷：未访问绿色,访问过红色，悬停黄色,点击粉色*/a:link{color: green}a:visited{color: red}a:hover{color: yellow}a:active{color: pink}</style></head><body><ul><li>刘备</li><li id="p">关羽</li><li class="y">张飞</li></ul><p>香蕉</p><p class="y">苹果</p><input type="text"><input type="password"><div><p>p1</p><div><p>p2</p></div><div><div>p3</div></div></div><a href="">优酷</a></body></html>

(3)一共9种选择器:

标签名选择器 div{}id选择器 #id{}类选择器 .class{}分组选择器 div,#id,.class{}属性选择器 input[属性名=‘值’]{}任意元素 *{}子孙后代 div div p{}子元素选择器 div>div>p{}伪类选择器 a:link/visited/hover/active

04.颜色和背景

颜色:三原色: 红绿蓝:red green blue rgb:每个颜色的取值范围0-255 颜色赋值的几种方式:(1)6位16进制赋值: #ff0000(2)3位16进制赋值: #f00(3)3位10进制赋值: rgb(255,0,0)(4)4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度值越小越透明背景图片:width: 图片的宽height: 图片的高background-image: url(“路径”); 设置背景图片background-repeat: no-repeat; 禁止重复background-size: 100px 200px; 设置背景图片尺寸宽高background-position:横向纵向; 控制位置——>有【像素偏移值和百分比】两种方式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03颜色和背景</title><style>h1{/*color: #ff0000 *//*color: 3f00 *//*color: rgb(255,0,0); */color: rgba(255,0,0,0.3);}#d1{width: 200px;height: 200px;background-color: pink;/*设置背景图片*/background-image: url("../b.png");/*设置背景图片尺寸*/background-size: 200px 200px;/*禁止重复*/background-repeat: no-repeat;/* 控制图片位置的移动:横向纵向------方式1数字 */background-position: 50px 100px;/* 控制图片位置的移动:横向纵向------方式2百分比 */background-position: 50% 50%;}#d2{width: 611px;height: 376px;background-color: #e8e8e8;background-image: url("/tstore_v1/images/itemCat/study_computer_img1.png");background-repeat: no-repeat;background-position: 80% 90%;background-size: 318px 319px;}</style></head><body><h1>颜色测试</h1><div id="d1"></div><div id="d2"></div></body></html>

05.文本和字体相关样式

(1)文本和字体：

text-align:left/right/center; 文本水平对齐方式line-height:20px; 设置行高多行文本时可以控制行间距, 单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)text-decoration: overline上划线/underline下划线/line-through删除线/none去掉文本修饰text-shadow: 颜色 x偏移值 y偏移值浓度; 阴影font-size: 20px; 设置字体大小font-weight: bold加粗/normal去掉加粗font-style: italic; 设置斜体font-family: xxx,xxx,xxx; 设置字体font: 20px xxx,xxx,xxx; 设置字体大小+字体<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04文本和字体相关</title><style>div{width: 200px;height: 50px;/*边框: 粗度实线颜色 */border: 1px solid red;/*水平对齐方式：left/right/center*/text-align: center;/*行高：多行文本可以控制行间距, 单行文本可以实现垂直居中*/line-height: 50px;/*文本修饰:overline上划线、underline下划线、line-through删除线(中间线)、none去掉文本修饰(见下面:a{})*/text-decoration: line-through;/*文本阴影：颜色 x偏移值 y偏移值浓度*/text-shadow: red -15px -15px 0px;/*字体大小*/font-size: 20px;/*字体加粗：bold加粗、去掉自带加粗(见下面:h3{})*/font-weight: bold;}a{/*文本修饰:去掉自带下划线*/text-decoration: none;}h3{/*字体加粗：去掉自带加粗*/font-weight: normal;/*设置斜体*/font-style: italic;/*设置字体：xxx/xxx/xxx/.....*/font-family: cursive;}h4{/*还可以把字体和大小一起使用*/font: 80px cursive;}</style></head><body><div>文本和字体测试</div><a href="">超链接</a><h3>这是个h3</h3><h4>这是个h4</h4></body></html>

(2)上述练习题：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04文本字体练习题</title><style>#a1{width: 100px;height: 30px;background-color: green;color: red;text-align: center;line-height: 30px;}span{font-size: 25px;font-style: italic;}#a2{font-weight: normal;text-shadow: blue -15px 15px 3px;}#a3{text-decoration: underline;}a{text-decoration: none;font-weight: bold;font-size: 20px;}</style></head><body><div id="a1">刘德华</div><div>张学友</div><span>香蕉</span><span>苹果</span><h1 id="a2">冰箱</h1><h1 id="a3">洗衣机</h1><a href="">百度</a></body></html>

06.元素的显示方式display

block: 块级元素的默认值 ,例: display: block特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,pinline: 行内元素的默认值,例: display: inline特点: 共占一行, 不可以修改元素的宽高,包括: span, b(加粗),i(斜体),s(删除线),u(下划线),a(超链接)inline-block: 行内块元素的默认值, 特点: 共占一行, 可以修改宽高, 包括:img,inputnone:隐藏元素注意！行内元素不能直接修改宽高, 如必须修改则需要先把默认的行内元素：display: inline 改成：块级元素： display: block 或行内块元素： display: inline-block<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06元素显示方式</title><style>div{width: 50px;height: 50px;border: 1px solid red;}span{border: 1px solid blue;/*行内元素不能修改宽高*/width: 50px;height: 50px;/*把行内元素(inline)改为块级元素(block)或行内块元素(inline-block)都可以修改宽高*/display: block;}img{width: 50px;height: 50px;/*隐藏元素(none)*/display: none;}a{width: 132px;height: 40px;background-color: #0aa1ed;/*行内元素(inline)不能修改宽高*/display: block;text-align: center;line-height: 40px;color: white;text-decoration: none;font-size: 20px;/*圆角(border-radius),值越大边框越圆*/border-radius: 100px;}</style></head><body><div>div1</div><div>div2</div><div>div3</div><br><span>span1</span><span>span2</span><span>span3</span><br><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><br><a href="">查看详情</a></body></html>

07.盒子模型的组成：(内容+外边距+边框+内边距)

盒子模型教程：/w3/css/css_boxmodel.html在一个页面中——>鼠标右键页面:点击检查——>滑到最下面可以看到有一个盒子模型：

作用: 控制元素的显示效果包括: 元素内容content + 外边距margin + 边框border + 内边距padding元素内容content：控制元素的显示尺寸外边距margin：控制元素的显示位置边框border：控制边框效果内边距padding：控制元素内容的位置——————————————————————————————————————————————————————————————(1)盒子模型之---内容Content包括：width/height两种赋值方式:【像素: 200px 和上级元素的百分比: 50%】注意：行内元素不能直接修改宽高——————————————————————————————————————————————————————————————(2)盒子模型之---外边距margin外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距作用: 控制元素的显示位置赋值方式： margin-left/right/top/bottom:10px; 单独(某个方向)赋值margin:10px; 四个方向赋值margin:10px 20px; 上下10 左右20 例：块级元素居中: 上下0 左右自动(auto)————>margin: 0 auto;margin:10px 20px 30px 40px; 上右下左顺时针赋值上下相邻彼此添加外边距取最大值行内元素上下外边距无效行内元素左右相邻彼此添加外边距两者相加粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加【overflow: hidden】解决部分标签会自带外边距,比如: body ,h1-h6,p,列表标签——————————————————————————————————————————————————————————————(3)盒子模型之---边框border赋值方式:border-left/right/top/bottom: 1px solid red; 单独给某个方向添加边框border: 1px solid red; 给四个方向添加边框border-radios: 10px; 值越大越圆当值超过宽高的一半时为正圆(前提是正方形)——————————————————————————————————————————————————————————————外边距+边框练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>07盒子模型外边距+边框</title><style>/*(1)盒子模型之---内容Content*/#d1{width: 100px;height: 100px;border:1px solid red;/*单独(某个方向)赋值例:margin-left: 10px;*//* 四个方向赋值：例:margin-top: 10px; *//* 上下10 左右20 例:margin:10px 20px; *//*上右下左顺时针赋值：例:*/margin:10px 20px 30px 40px}#d2{width: 100px;height: 100px;border: 1px solid red;/*上下相邻彼此添加外边距取最大值*/margin-top: 100px;}/* (2)盒子模型之---外边距margin*/#s1{/* 行内元素：上下外边距无效例:margin-top: 100px; */margin-top: 100px;}#s2{/* 行内元素：左右相邻彼此添加外边距两者相加 */margin-left: 20px;}#big{width: 200px;height: 200px;background-color: green;/*解决下边的粘连问题：*/overflow: hidden;}#big>div{width: 50px;height: 50px;background-color: red;margin-left: 50px;/*当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题：*/margin-top: 50px;}/*(3)盒子模型之---边框border*/#border_div{width: 200px;height: 200px;/*单独给某个方向添加边框例：border-left: 1px solid red;*//*给四个方向添加边框————定义实线(solid) 例：border: 1px solid blue;*/border: 1px solid blue;/*定义无边框(none) 例：border: 1px none blue;*//*定义虚线(dashed)边框例：border: 1px dashed blue;*//*设置圆角(radius) 值越大越圆，当值超过宽高的一半时为正圆(前提是正方形:即上边设置的宽高相等时)*/border-radius: 200px;}</style></head><body><div id="d1">外边距测试</div><div id="d2">div2</div><span id="s1">span1</span><span id="s2">span2</span><div id="big"><div></div></div><div id="border_div"></div></body></html>————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————(4)盒子模型之---内边距padding内边距: 元素边缘距内容的距离为内边距赋值方式: 和外边距类似padding-left/right/top/bottom:10px; 单独某个方向赋值padding:10px; 四个方向赋值padding:10px 20px; 上下10 左右20padding:10px 20px 30px 40px; 上右下左顺时针赋值给元素添加内边距会影响元素的宽高例：padding-top: 50px;内边距练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>08盒子模型内边距</title><style>div{width: 150px;height: 150px;border: 1px solid red;/*单独某个方向赋值*/padding-left: 50px;/*四个方向赋值例：padding:10px;*//*上下10 左右20 例：padding:10px 20px;*//*上右下左顺时针赋值例：padding:10px 20px 30px 40px;*//*给元素添加内边距会影响元素的显示宽高*/padding-top: 50px;}</style></head><body><div>内边距</div></body></html>

(1)盒子模型练习题：

要求：根据给图片完成以下页面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>9盒子模型练习题</title><style>#d1{width: 100px;height: 100px;background-color: red;/*上右下左顺时针赋值：*/margin:25px 0 0 25px;/*解决下边的粘连问题：*/overflow: hidden;}#d1>div{width: 50px;height: 50px;background-color: blue;/*外边距：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题：*/margin: 25px 0 0 25px;}#d2{width: 50px;height: 50px;/*设置圆角(radius) 值越大越圆，当值超过宽高的一半时为正圆(前提是正方形:即上边设置的宽高相等时)*/border-radius: 5px;/*边框: 粗度实线颜色*/border: 4px solid green;/*外边距：行内元素：左右相邻彼此添加外边距两者相加*/margin-left: 125px;/*内边距：四个方向赋值*/padding:50px 0 0 50px;}</style></head><body><div id="d1"><div></div></div><div id="d2">哈喽</div></body></html>

08.CSS的三大特性：继承/层叠/优先级

01.继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响,如: 超链接的字体颜色<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>10.CSS三大特性</title><style>/*这里给body设计一个全局样式*/body{}#d1{color: red;}</style></head><body><div id="d1"><p>这是个p标签</p><span>这是div里面的span</span><a href="">超链接</a></div><span>这是div外面的span</span></body></html>——————————————————————————————————————————————————————————————————02.层叠:多个选择器可能选择到同一个元素,若添加的样式不同则全部层叠有效,如果作用的样式相同，则由优先级决定哪个生效。——————————————————————————————————————————————————————————————————03.优先级: 指CSS中的选择器具有优先级,作用范围越小优先级越高。!import > id选择器 > class类选择器 > 标签名 > 继承性(属于间接选中)注: 要想提升优先级，可以加【!import】<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>10.CSS三大特性</title><style>/* id选择器优先级 > 标签名例：此处id选择器定义了红色，标签名中定义的蓝色就不会生效了 */#d1{color: red;}div{/* [!import]作用:提升优先级若写了这个，则不会显示id选择器定义的颜色 */color: blue !important;}</style></head><body><div id="d1"><p>这是个p标签</p><span>这是div里面的span</span><a href="">超链接</a></div><span>这是div外面的span</span></body></html>

09.学子商城页面练习题(1)(2)：

(1)左侧页面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>11学子商城页面_综合练习</title><style>body{font: 12px "simhei", Arial, Helvetica, sans-serif;color: #666;}body>div{width: 611px;height: 376px;background-color: #e8e8e8;background-image: url("/tstore_v1/images/itemCat/study_computer_img1.png");background-size: 318px 319px;/* 背景图片：禁止重复 */background-repeat: no-repeat;/* background-position:横向纵向; 控制位置——>有【像素偏移值和百分比】两种方式 */background-position: 90% 90%;/*解决下边的粘连问题：*/overflow: hidden;}div>div{margin: 68px 0 0 36px;width: 245px;height: 232px;}.title_p{font-size: 32px;color: #333;/*底部外边距*/margin-bottom: 12px;}.price_p{font-size: 24px;color: #0aa1ed;font-weight: bold;margin-bottom: 12px;;}a{width: 132px;height: 40px;/*背景颜色*/background-color: #0aa1ed;/*元素的显示方式display————>block: 块级元素的默认值*/display: block;text-align: center;line-height: 40px;color: white;/*设置圆角(radius) 值越大越圆，当值超过宽高的一半时为正圆(前提是正方形:即上边设置的宽高相等时)*/border-radius: 3px;/*文本和字体：设置字体大小*/font-size: 20px;/*文本和字体：none去掉文本修饰*/text-decoration: none;}</style></head><body><div><div><p class="title_p">灵越燃7000系列</p><p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p><p class="price_p">￥4999.00</p><a href="">查看详情</a></div></div></body></html>

(2)右侧页面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>12学子商城页面右侧</title><style>body{font: 12px "simhei", Arial, Helvetica, sans-serif;color: #666;}body>div{width: 375px;height: 376px;background-color: #e8e8e8;background-image: url("/tstore_v1/images/itemCat/study_computer_img2.png");background-size: 292px 232px;/* 背景图片：禁止重复 */background-repeat: no-repeat;/* background-position:横向纵向; 控制位置——>有【像素偏移值和百分比】两种方式 */background-position: 90% 90%;/*解决下边的粘连问题：*/overflow: hidden;}div>div{margin: 39px 0 0 25px;width: 253px;height: 232px;}.title_p{font-size: 32px;color: #333;/*底部外边距*/margin-bottom: 12px;}.price_p{font-size: 24px;color: #0aa1ed;font-weight: bold;margin-bottom: 12px;;}a{width: 132px;height: 40px;/*背景颜色*/background-color: #0aa1ed;/*元素的显示方式display————>block: 块级元素的默认值*/display: block;text-align: center;line-height: 40px;color: white;/*设置圆角(radius) 值越大越圆，当值超过宽高的一半时为正圆(前提是正方形:即上边设置的宽高相等时)*/border-radius: 2px;/*文本和字体：设置字体大小*/font-size: 20px;/*文本和字体：none去掉文本修饰*/text-decoration: none;}</style></head><body><div><div><p class="title_p">颜值框不住</p><p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p><p class="price_p">￥6888.00</p><a href="">查看详情</a></div></div></body></html>

10.元素的5种定位：

静态定位：position:static;相对定位：position:relative;绝对定位：position:absolute;固定定位：position: fixed;浮动定位：float:left/right

(1)静态定位：position:static;

格式: position:static; (默认的定位方式) 特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下无法实现元素的层叠效果。如何控制元素的位置?————>通过外边距控制元素的位置

(2)相对定位：position:relative;

格式: position:relative;特点: 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置) ,可以实现层叠效果。如何控制元素的位置?————>通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置应用场景: 当希望移动某一个元素其它元素不受影响时(元素位置微调)使用相对定位, 相对定位可以实现元素的层叠。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01元素定位之_相对定位</title><style>div{width: 100px;height: 100px;border: 1px solid red;}/*hover:可以在页面中用鼠标移动该块级元素*/div:hover{/*margin: 20px 0 0 20px;*//*修改为相对(relative)定位格式：【位置: xxx】*/position: relative;top:20px;left: 20px;}</style></head><body><div>div1</div><div>div2</div><div>div3</div></body></html>

(3)绝对定位：position:absolute;

格式: position:absolute;特点: 元素脱离文档流(不管元素显示到什么位置仍然占着原来的位置)如何控制元素的位置?——>通过left/right/top/bottom控制位置,参照物为窗口(默认)或某一个上级元素(需要在上级元素中添加position:relative作为参照物)应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02元素定位之_绝对定位</title><style>#big{width: 200px;height: 200px;margin: 100px 0 0 100px;background-color: green;}#big>div{width: 100px;height: 100px;background-color: blue;margin: 50px 0 0 50px;position: relative;/*做参照物*/}#big>div>div{width: 50px;height: 50px;background-color: red;/*修改为绝对定位*/position: absolute;left: 0;top: 0px;}div{width: 100px;height: 100px;border: 1px solid red;}#d1{/*设置绝对(absolute)定位格式:【位置: xxx】*/position: absolute;right: 0;bottom: 0;}</style></head><body><div id="big"><div><div></div></div></div><div id="d1">div1</div><div>div2</div><div>div3</div></body></html>—————————————————————————————————————————————————————————————————练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03绝对定位_练习</title><style>div{width: 270px;/*rgba(255,0,0,0-1) a=alpha透明度值越小越透明*/background-color: rgba(0,0,0,0.3);/*四个方向的内边距赋值*/padding: 10px;/*参照物*/position: relative;}input{/*300-20*2=260*/width: 260px;/*内边距: 上下xx 左右xx*/padding: 10px 5px;/*去掉边框：【border: none;】或【border: 0;】*/border: none;}img{/*修改为绝对定位*/position: absolute;top: 14px;right: 20px;}p{/*四个方向的外边距都为0*/margin: 10px;/*字体大小*/font-size: 12px;color: red;}</style></head><body><div><input type="text" placeholder="请输入用户名"><img src="/tstore_v1/images/login/yhm.png" alt=""><p>用户名不能为空</p></div></body></html>

(4)固定定位：position: fixed;

格式: position:fixed;特点: 脱离文档流((不管元素显示到什么位置仍然占着原来的位置))如何控制元素的位置?————>通过left/right/top/bottom相对于窗口做偏移应用场景: 当需要将元素固定在窗口的某个位置时使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04元素定位之_固定定位</title><style>body{padding-top: 100px;}#d1{width: 1000px;height: 100px;background-color: red;/*固定(fixed)定位：格式:[位置: xx]*/position: fixed;top: 0;}#d2{width: 50px;height: 200px;background-color: blue;position: fixed;right: 20px;top: 30%;}</style></head><body><div id="d1"></div><div id="d2"></div><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""><img src="../b.png" alt=""></body></html>

(5)浮动定位：float:left/right

格式: float:left/right;特点: 脱离文档流(不管元素显示到什么位置仍然占着原来的位置), 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止。浮动元素一行装不下会自动换行, 换行时有可能被卡住当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给上级元素添加overflow:hidden可以解决此问题应用场景: 当需要将纵向排列的元素改成横向排列时使用.<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05元素定位之_浮动定位</title><style>body>div{width: 200px;border: 1px solid red;/*当元素的所有子元素全部浮动时，自动识别的高度为0；后面的元素会顶上来导致显示异常，添加【overflow: hidden;】解决此异常*/overflow: hidden;}#d1{width: 50px;height: 50px;background-color: red;/*浮动定位格式:[float: xx]*/float: left;}#d2{width: 50px;height: 50px;background-color: green;float: left;}#d3{width: 50px;height: 50px;background-color: blue;float: left;}</style></head><body><div><div id="d1">div1</div><div id="d2">div2</div><div id="d3">div3</div></div></body></html>————————————————————————————————————————————————————————————————练习题：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05浮动定位_练习</title><style>/**：去掉页面中全部(*)元素自带的内外边距——————>执行效率低p,ul：去掉某些(p,ul)元素自带的内外边距————————>执行效率高*/p,ul{margin: 0;padding: 0;}ul{/*去掉无序列表中前边的点:“.”*/list-style-type: none;}li{float: left;margin-right: 20px;}</style></head><body><ul><li>首页</li><li>免费课</li><li>直播课</li><li>精品课</li><li>线上班</li><li>线下班</li></ul></body></html>

(6)综合练习图：

按照该链接(/tstore_v1/web/index.html)将【第三行左侧】页面展示出来：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06综合练习</title><style>body{font: 12px "simhei", Arial, Helvetica, sans-serif;color: #666;}/* p,ul：去掉某些(p,ul)元素自带的内外边距————————>执行效率高*/p,ul{margin: 0;padding: 0;}body>div{width: 366px;height: 233px;background-color: #e8e8e8;}#top_div{height: 35px;background-color: #0aa1ed;/*设置圆角(radius) 值越大越圆，当值超过宽高的一半时为正圆(前提是正方形:即上边设置的宽高相等时)*/border-radius: 2px;}#top_div>img{/*外边距margin 图片向右下移动：*/margin: 10px 0 0 10px;}#top_div>span{font-size: 16px;color: white;/*对某个元素位置进行微调使用相对定位*/position: relative;bottom: 4px;}.c_div{/*把文字往右缩进10个像素*/padding-left: 10px;}.c_div>p{color: #62b5ec;margin: 17px 0 9px 0;}ul{/*去掉无序列表中前边的点:“.”*/list-style-type: none;/*解决高度识别为0 导致的显示异常*/overflow: hidden;}li{/*当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给上级元素添加overflow:hidden可以解决此问题*/float: left;margin-right: 10px;}a{/*文本和字体相关样式:none(去掉文本修饰)*/text-decoration: none;color: #0aa1ed;}/*hover：它通常在用户使用光标（鼠标指针）悬停在元素上时触发。“悬停”时选择任何 <a> 元素 a:hover { color: orange; }鼠标右键检查——>右侧源HTML代码中——>点击文字的一行，下面有个小页面会显示【color】——>此时点击【color】所在方框内右上角的【index.css201】——>跳转到一个新的右侧小页面:【index.html】——>此时在右侧找到【a:hover】并将其中的悬停时显示的颜色复制下来即可！*/a:hover{color: #c66a7a;}</style></head><body><div><div id="top_div"><img src="/tstore_v1/images/itemCat/computer_icon1.png" alt=""><span>电脑,办公/1F</span></div><div class="c_div"><p>电脑整机</p><ul><li><a href="">笔记本</a></li><li><a href="">游戏机</a></li><li><a href="">台式机</a></li><li><a href="">一体机</a></li><li><a href="">服务器</a></li><li><a href="">联想</a></li></ul></div><div class="c_div"><p>电脑配件</p><ul><li><a href="">CPU</a></li><li><a href="">SSD硬盘</a></li><li><a href="">显示器</a></li><li><a href="">显卡</a></li><li><a href="">组装电脑</a></li><li><a href="">机箱</a></li></ul></div><div class="c_div"><p>外设/游戏</p><ul><li><a href="">键盘</a></li><li><a href="">鼠标</a></li><li><a href="">U盘</a></li><li><a href="">移动硬盘</a></li><li><a href="">游戏设备</a></li><li><a href="">智能单车</a></li></ul></div></div></body></html>

11.元素的溢出设置(overflow: xx)

visible(默认): 超出部分显示hidden: 超出部分隐藏scroll: 超出部分滚动显示例：DIV默认样式下是不带滚动条的，若要使<div>标签出现滚动条，需要为该标签定义（ overflow:scroll;）样式。设置行内元素的垂直对齐方式vertical-align：top上对齐middle中间对齐bottom下对齐baseline基线对齐(默认的)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>07溢出设置</title><style>img{width: 100px;/*设置行内元素的垂直对齐方式：top上对齐middle中间对齐bottom下对齐baseline基线对齐(默认的)*/vertical-align: middle;}/*溢出设置Overflow：visible(默认): 超出部分显示hidden: 超出部分隐藏scroll: 超出部分滚动显示*/div{width: 200px;height: 200px;border: 1px solid red;/*设置超出部分的显示方式(不让超出上面定义的边框外图片显示了)*/overflow: scroll;/*scroll：滚动*/}</style></head><body><input type="text"><img src="../b.png" alt=""><div><img src="../b.png" alt=""></div></body></html>

12.元素显示层级(z-index: xx)

当两个元素非静态定位(在元素修改定位方式时)时可能会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面;谁显示在下面z-index只对非静态定位的元素有效(必须改了定位方式之后z-index样式才会生效)z-index值越大显示层级越靠前

13.页面布局练习题：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>09乬练习_学子商城首页</title><style>body{font: 12px "simhei", Arial, Helvetica, sans-serif;color: #666;}body>div{width: 1000px;background-color: pink;/*块级元素居中: 上下0 左右自动(auto)*/margin: 0 auto;}#t_div{/*解决高度为0的问题*/overflow: hidden;margin-bottom: 10px;}#t_l_div{width: 611px;height: 376px;/*当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给上级元素添加overflow:hidden可以解决此问题*/float: left;}#t_r_div{width: 375px;height: 376px;float: right;}#t_div>div,#b_l_div,#b_r_div>div{background-color: #e8e8e8;}#b_l_div{width: 366px;height: 233px;float: left;}#b_r_div{float: right;}#b_div{overflow: hidden;/*解决高度为0的异常*/}#b_r_div>div{width: 198px;height: 233px;float: left;margin-left: 10px;}</style></head><body><div><div id="t_div"><div id="t_l_div"></div><div id="t_r_div"></div></div><div id="b_div"><div id="b_l_div"></div><div id="b_r_div"><div></div><div></div><div></div></div></div></div></body></html>

3、Web前端之——JavaScript：给页面添加动态效果

js教程：/w3/js/index.html

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

(1)作用: 负责给页面添加动态效果.(2)语言特点:<1>属于脚本语言,不需要编译直接解析执行.<2>属于弱类型语言:java: String name = “tom”; int age=18; name=30; 报错javascript: let name=“tom”; let age=18; name=30; 不会报错 <3>基于面向对象<4>安全性强: JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁盘中的数据禁止访问.<5>交互性强: 因为JS语言是嵌入在html页面中的语言, 随着页面一起传递到客户端,运行在客户端的语言,离用户更近一些,java语言是运行在服务器的语言, 所以JS语言交互性更强

01.如何在html页面中添加JS语言

(1)有三种引入方式：内联 / 内部 / 外部样式

<1>内联: 在标签的【事件】属性中添加js代码,当事件触发时执行.注：——>事件: 系统给提供的特定时间点.注：——>点击事件: 当点击元素时触发的时间点例：<input type="button" value="按钮" onclick="alt('点你妹啊')"><2>内部：在html页面中任意位置(推荐写在</body>上面)添加script标签,在标签体内写JS代码例：/body<script>//在浏览器的控制台输出console.log("内部引入成功")</script><3>外部：在单独的.js文件中写js代码, 在html页面中通过script标签的src属性引入例：//1.单独的.js文件中：console.log("外部引入成功"); //2.html页面中:<script src="01的外部引入测试.js"></script>

02.变量, 数据类型,运算符,各种语句,方法,面向对象

(1)变量

JS属于弱类型语言java: String name="tom"; int age = 18; int x; x="abc";报错JS:let name="tom"; let age = 18; let x; x="abc"; age="xyz" let和var关键字的区别：作用域(1)使用let声明的变量,作用域和Java语言的作用域类似(2)使用var声明的变量,不管在什么位置声明都相当于是一个全局变量例：java:for(int i=0;i<10;i++){int y = i+1;}int z = i+y; 报错 i和y超出了自身的作用域JS:for(let i=0;i<10;i++){let y = i+1;}let z = i+y; 不报错,但是访问不到i和y 因为超出了作用域for(var i=0;i<10;i++){var y = i+1;}var z = i+y; 不仅不报错还能够访问到i和y的值

(2)数据类型

JavaScript中只有引用类型(对象类型)常见的对象类型:number: 数值类型, 相当于java中所有数值类型的总和string: 字符串 , 可以用单引号或双引号修饰 ‘tom’ “tom”boolean: 布尔值 , true/falseundefined: 未定义 ,当变量只声明不赋值时,变量的类型为未定义获取变量类型的方式: typeof 变量

图示：

获取变量类型的方式: typeof 变量返回undefined说明变量的类型为未定义

(3)运算符

算术运算符: ±*/%, JS除法会自动根据结果转换整数还是小数java: int x=5; int y = 2; x/y = 2;js: let x = 5; let y = 2; x/y = 2.5;关系运算符: > < >= <= != = = 和=====: 先统一等号两边变量的类型,再比较值 “666”==666 true===: 先比较类型,类型相同之后再比较值 “666”===666 false赋值运算符：= += -= *= /= %= ++ --逻辑运算符: 【&&(短路与) ||(短路或)!】三目运算符: 条件?值1:值2

(3)各种分支语句

if elsewhiledo whileforswitch case

(4)方法

Java: public 返回值类型方法名(参数列表){方法体}JS: function 方法名(参数列表){方法体}常见的四种方法:无参无返回值无参有返回值有参无返回值有参有返回值声明方法的三种方式:function 方法名(参数列表){方法体}let 方法名 = function(参数列表){方法体}let 方法名 = new Function(“参数1”,“参数2”,“方法体”);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02方法</title></head><body><script>/*第一种声明方法的形式：function 方法名(参数列表){方法体}*///(1)无参无返回值function f1(){console.log("f1");}//调用方法f1();//(2)有参无返回值function f2(name,age){console.log(name+":"+age)}f2("孙尚香",50);//(3)无参有返回值function f3(){return "我是返回值"}let info = f3();console.log(info);//(4)有参有返回值function f4(x,y){return x*y;}let result = f4(8,9);console.log(result)/*第二种声明方法的形式：let 方法名 = function(参数列表){方法体}*/let f5= function (name,age){console.log(name+":"+age);}f5("刘备",29);/*第三种声明方法的形式：let 方法名 = new Function(“参数1”,“参数2”,“方法体”);*/let f6 = new Function("name","age","console.log(name+':'+age)");f6("吕布",66);</script></body></html>

图示：上述例题控制台

03.DOM 文档对象模型----页面相关的方法

(0)页面相关的方法:

通过元素的id获取元素对象【let 元素对象 = document.getElementById(“元素id”);】通过CSS中接触到的选择器获取元素对象【let 元素对象 = document.querySelector(“选择器”);】获取和修改元素的文本内容:【元素对象.innerText; //获取文本内容】【元素对象.innerText=“xxx”; //修改文本内容】获取和修改表单中的控件的值【控件.value //获取】【控件.value=“xxx” //修改】创建元素对象【let 元素对象 = document.createElement("标签名");】添加元素对象到某个元素里面(1)只有往body里添加元素才能写成: document.body.xxxxx第一种方式：【document.body.appendChild(元素对象);】———>只能添加一个元素对象第二种方式：【document.body.append(h1,h2);】——————————>可以添加多个元素对象父元素.appendChild(元素对象);父元素.append(元素对象,元素对象,元素对象);(2)若往其他(table)里添加tr这样写：【table.append(tr);】给元素的属性赋值【元素对象.src = “…/b.jpg”;】【元素对象.属性=“值”;】————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————例1：通过CSS中接触到的选择器获取元素对象：【let 元素对象 = document.querySelector(“选择器”);】获取和修改元素的文本内容:【元素对象.innerText; //获取文本内容】【元素对象.innerText=“xxx”; //修改文本内容】获取和修改表单中的控件的值【控件.value //获取】【控件.value=“xxx” //修改】<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03页面相关方法</title></head><body><div>这是div</div><input type="text" id="i1"><input type="button" value="按钮" onclick="f()"><script>function f(){//得到文本框和divlet i = document.querySelector("#i1");let d = document.querySelector("div");//取出文本框的值并赋值给divd.innerText = i.value;}</script></body></html>————————————————————————————————————————————————————————————————————例2：创建元素对象【let 元素对象 = document.createElement("标签名");】添加元素对象到某个元素里面第一种方式：【document.body.appendChild(元素对象);】第二种方式：【document.body.append(h1,h2);】给元素的属性赋值【元素对象.src = “…/b.jpg”;】【元素对象.属性=“值”;】<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01Dom相关</title></head><body><script>//创建标签let d = document.createElement("div");//给div设置显示文本d.innerText = "我是div";//把div添加到body里面document.body.appendChild(d);//创建h1 和 h2let h1 = document.createElement("h1");let h2 = document.createElement("h2");h1.innerText = "这是h1";h2.innerText = "这是h2";document.body.append(h1, h2);//创建图片并添加let i = document.createElement("img");//给元素添加属性i.src = "../b.png";//添加到页面中document.body.append(i);</script></body></html>————————————————————————————————————————————————————————————————————

(0.1)练习题：页面点击添加按钮生成图片

例3：综合练习题：网页中添加帅哥美女图片<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02帅哥美女练习</title></head><body><input type="text" id="i1"><input type="button" value="添加帅哥" onclick="f(1)"><input type="button" value="添加美女" onclick="f(2)"><script>//得到文本框let input = document.querySelector("#i1");function f(x){//得到图片名let imgName = x==1 ?"a.png" :"b.png";for(let i=0;i<input.value;i++){let img = document.createElement("img");img.src = imgName;document.body.append(img);}}</script></body></html>

(1)NaN

Not a Number: 不是一个数isNaN(变量) 判断变量是否是NaN , true代表是NaN false代表不是NaN例：若用户输入数字5时，会正常运算,打印结果：25;若输入的是一个字母“a“时，会打印结果：NaN;由于用户不知道“NaN”是什么，因此我们要避免这种情况：解决办法：————>isNaN():判断变量是否是“NaN”

(2)练习题：计算器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05计算器练习</title></head><body><input type="text" id="i1"><input type="text" id="i2"><input type="button" value="加" onclick="f(1)"><input type="button" value="减" onclick="f(2)"><input type="button" value="乘" onclick="f(3)"><input type="button" value="除" onclick="f(4)"><div>结果:<span></span></div><script>function f(x) {//得到页面中相关的元素对象let i1 = document.querySelector("#i1");let i2 = document.querySelector("#i2");let s = document.querySelector("span");//判断输入的两个值是不是NaNif (isNaN(i1.value)||isNaN(i2.value)){s.innerText="输入错误!";return;}switch (x) {case 1: //加s.innerText = i1.value*1+i2.value*1;break;case 2: //减s.innerText = i1.value-i2.value;break;case 3: //乘s.innerText = i1.value*i2.value;break;case 4: //除s.innerText = i1.value/i2.value;break;}}</script></body></html>

(3)练习题：猜数字

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06猜数字练习题</title></head><body><input type="text" placeholder="请输入0-100之间的整数" id="i1" ><input type="button" value="猜一猜" onclick="f()"><div>结果:<span></span></div><script>//得到0-100随机整数let x = parseInt(Math.random()*101);let count = 0;//得到页面中相关的元素对象let i1 = document.querySelector("#i1");let s = document.querySelector("span");function f() {count++;//判断输入的两个值是不是NaNif(isNaN(i1.value)){s.innerText = "输入错误";return;}if (i1.value>x){s.innerText = "猜大了!";}else if(i1.value<x){s.innerText = "猜小了";}else {s.innerText = "恭喜你猜对了!共猜了"+count+"次！请重新猜数进入下一局";//次数清0;生成新的随机数count = 0;x = parseInt(Math.random()*101);}}</script></body></html>

(5)员工列表练习：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03员工列表练习</title></head><body><input type="text" id="i1" placeholder="姓名"><input type="text" id="i2" placeholder="工资"><input type="text" id="i3" placeholder="工作"><input type="button" value="添加" onclick="f()"><table border="1"><tr><th>姓名</th><th>工资</th><th>工作</th></tr></table><script>//获取三个文本框// let i1 = document.querySelector("i1");// let i2 = document.querySelector("i2");// let i3 = document.querySelector("i3");//通过标签名获取table:let table = document.querySelector("table");function f() {//创建tr 和 tdlet tr = document.createElement("tr");let nameTd = document.createElement("td");let salaryTd = document.createElement("td");let jobTd = document.createElement("td");//把用户输入的内容添加到td中：nameTd.innerText = i1.value;salaryTd.innerText = i2.value;jobTd.innerText = i3.value;//把td装进trtr.append(nameTd,salaryTd,jobTd);//把tr装进tabletable.append(tr);}</script></body></html>

04.JavaScript中的对象分类

内置对象: number, string, boolean等BOM: Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容DOM: Document Object Model 文档对象模型, 文档指html标签, 包含和页面相关内容——————————————————————————————————————————————————————————————————————

(0)JS对象分类之—BOM浏览器对象模型:(1)-(2)

1.BOM浏览器对象模型：window对象: 此对象里面的属性和方法称为全局的属性和方法,【访问时可以省略掉window 】

(1)window对象中常见的方法:

window中常见的方法:isNaN(x) 判断变量(x)是否是NaNparseInt()/parseFloat() 将字符串转成整数/小数alert("xxx")弹出提示框confirm(“xxxx”) 弹出确认框prompt(“xxx”) 弹出文本框console.log() 浏览器控制台输出setInterval(方法、时间间隔)：匿名方法————>开启定时器let timer = setInterval(方法,时间间隔) 开启定时器clearInterval(timer) 停止定时器setTimeout(方法,时间间隔) 匿名方法————>开启只执行一次的定时器

(1.1)定时器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>07定时器</title></head><body><h1>0</h1><h2>0</h2><script>let count = 0;//1.开启定时器每隔一秒调用一次方法//方法作为参数进行传递时不写括号:【()】setInterval(f,1000);function f(){count++;let h = document.querySelector("h1");h.innerText = count;}//2.匿名方法————>开启定时器let num = 0;let timer = setInterval(function (){num++;let h = document.querySelector("h2");h.innerText = num;//停止定时器if(num==50){clearInterval(timer);}},200)//3.匿名方法————>开启只执行一次的定时器setTimeout(function (){alert("时间到!")},3000)</script></body></html>

(2)window对象中常见的属性：

location位置:location.href————————>获取和修改浏览器的请求地址location.reload()————>刷新页面 location.search —————>获取浏览器地址栏中的参数history历史(指当前浏览器页卡的历史, 关闭后则清除)：history.length 获取历史页面数量history.back() 返回上一页面history.forward() 前往下一页面history.go(n) n为正值前进 n为负值后退 n=0代表刷新

05.JavaScript中自定义对象:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04自定义对象</title></head><body><table border="1"><caption>商品列表</caption><tr><th>商品名</th><th>价格</th><th>库存</th></tr></table><script>//定义一个空的Personfunction Person() {}//实例化Person对象let p1 = new Person();//动态添加属性:p1.name = "刘德华"p1.age = 50;//动态添加方法:定义一个方法能当对象来用p1.run = function () {console.log(this.name+":"+this.age);}//调用对象的方法p1.run();//定义一个自带属性和方法的对象function Car(){this.name = "宾利";this.price = 500;this.run = function (){console.log(this.name+":"+this.price);}}let c1 = new Car();c1.run();//直接实例化空对象的方式let p2 = {};p2.name = "貂蝉";p2.age = 66;p2.run = function () {console.log(this.name+":"+this.age);}p2.run();//直接实例化带属性和方法的对象let p3 = {name:"吕布",age:18,run:function () {console.log(this.name+":"+this.age);}}p3.run();// 将商品信息封装到一个对象中, 在数组里面装多个表示商品信息的对象let arr = [{title:"小米手机", price:5000, num:500},{title:"华为电视", price:3000, num:100},{title:"vivo手机", price:4000, num:200},{title:"一加手机", price:2000, num:300}]//得到table对象let table = document.querySelector("table");//遍历数组for (let item of arr) {let tr = document.createElement("tr");let titleTd = document.createElement("td");let priceTd = document.createElement("td");let numTd = document.createElement("td");//给td添加显示的商品信息titleTd.innerText = item.title;priceTd.innerText = item.price;numTd.innerText = item.num;tr.append(titleTd,priceTd,numTd);//把tr装进tabletable.append(tr);}</script></body></html>

(1)个人信息_综合案例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05综合案例</title></head><body><table border="1"><caption>个人信息</caption><tr><td>照片:</td><td><img id="head_img" src="head.jpg" width="50px" alt=""></td></tr><tr><td>名字:</td><td id="name_td">xxx</td></tr><tr><td>年龄:</td><td id="age_td">xxx</td></tr><tr><td>好友:</td><td><ul id="friend_ul"></ul></td></tr></table><input type="button" value="请求数据" onclick="f()"><script>function f() {//模拟从服务器获取的数据let person = {name: "苍老师", age: 50, url: "a.png",friend: ["克晶", "传奇", "成恒"]};//获取页面中的元素对象let head_img = document.querySelector("#head_img");let name_td = document.querySelector("#name_td");let age_td = document.querySelector("#age_td");let friend_ul = document.querySelector("#friend_ul");//把对象中的数据取出并赋值给页面中的元素对象head_img.src = person.url;name_td.innerText = person.name;age_td.innerText = person.age;//遍历好友数组for (let friendName of person.friend) {//创建lilet li = document.createElement("li");li.innerText = friendName;//把li添加到ul里面friend_ul.append(li);}}</script></body></html>

4、Web前端之——MVC模型

——>在JS中：MVC模型就是将数据、逻辑处理、用户界面分离的一种方法。 1）M(Model，模型)：用于数据处理、逻辑处理2）V(View，视图)：用于显示用户界面3）C(Controller，控制器)：根据客户端的请求控制逻辑走向和画面 ——>而在Java中：MVC这三个部分则分别对应于 JavaBeans、JSP和Servlet 1）M = JavaBeans：用于传递数据，拥有与数据相关的逻辑处理2）V = JSP：从Model接收数据并生成HTML3）C = Servlet：接收HTTP请求并控制Model和View

01.前端MVC设计模式

MVC设计模式：实际上就是把前端实现一个业务功能的代码划分为3部分Model : 模型,指数据模型,这个数据一般来自于服务器View: 视图,【指页面标签内容】Controller: 控制器, 指将数据展示到视图中的过程代码前端MVC设计模式的弊端: 需要在Controller(控制器)部分频繁进行DOM(遍历查找元素的代码)操作，——————>会影响执行效率！！！

02.M,V,VM设计模式

Model: 模型, 指数据模型,这个数据一般来自于服务器View: 视图, 指页面标签内容ViewModel: 视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

03.VUE框架

VUE框架是基于MVVM设计模式的<————>目前最流行的前端框架工作原理：Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.————————————————————————————————————————————————————————————————————————注：找到元素绑定的变量，变量一变，页面就会改变！<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06HelloVue</title></head><body><div id="app"><h1>{{info}}</h1></div><script src="vue.js"></script><script>let v = new Vue({el:"#app", /*告诉Vue对象管理哪个元素*/data:{info:"Hello Vue!"}})/*定时器：*/setTimeout(function () {v.info = "值改变了!";},3000);</script></body></html>

(前提)引入Vue框架文件两种方式：

(1)引入网络版vue：步骤：苍老师网站——>配置文件——>点击:[JavaScript 组件库 CDN]——>点击:[引入vue]——>复制代码:【<script src="/npm/vue@2/dist/vue.js"></script>】(2)引入本地的vue.js文件：将vue.js文件放到本包内：步骤：在浏览器打开：【/npm/vue@2/dist/vue.js】复制内容，在本包中新建【vue.js】文件，将复制的内容存到该文件中即可————————————————————————————————————————————————————————————————————————在Idea中安装Vue插件：File->Settings->Plugins 搜索Vue

04.《Vue相关指令》和对应练习题：

(0)相关指令：

相关指令:(1){{变量}}：插值 —————————>让此处的文本内容和变量进行绑定，不依赖某个标签(2)v-text="变量" —————————>让元素的文本内容和变量进行绑定(3)v-html="变量" —————————>让元素的html内容和变量进行绑定(4)v-bind:属性名="变量"————>属性绑定【简写——> :属性名="变量"】让元素的xxx属性和变量进行绑定可以省略掉v-bind (5)v-model="变量" ————————>双向绑定, .当变量的值发生改变时页面会跟着改变;页面的内容改变时变量也会跟着改变。只有使用form表单中的控件时才会涉及到双向绑定！(6)v-on:事件名="方法"——————>事件绑定【简写——> @事件名="方法"】调用的方法必需声明在【Vue】的【{}】内的【methods】里！@click 点击事件@change 值改变事件@blur 失去焦点事件————————————————————————————————————————————————————————————————————————上述(1)(2)(3)练习题：文本相关指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>07文本相关指令</title></head><body><div><h1>{{info}}</h1><p v-text="info"></p><p v-html="info" ></p></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{info:"文本相关练习<b>加粗</b>"}})</script></body></html>————————————————————————————————————————————————————————————————————————上述(4)练习题：属性绑定<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>08属性绑定</title></head><body><div><input type="text" v-bind:value="msg"><input type="text" :value="msg"><a :href="url">超链接</a><img :src="imgUrl" alt=""></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{msg:"属性绑定测试",url:"",imgUrl:"../b.png"}})</script></body></html>————————————————————————————————————————————————————————————————————————上述(5)练习题：双向绑定<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>096双向绑定</title></head><body><div><input type="text" v-model="msg"><h1>{{msg}}</h1>a          b<hr><input type="radio" v-model="gender" value="男">男<input type="radio" v-model="gender" value="女">女<h2>{{gender}}</h2></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{msg:"双向绑定测试",gender:"男"}});</script></body></html>————————————————————————————————————————————————————————————————————————上述(6)练习题：事件绑定<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>10事件绑定</title></head><body><div><input type="button" value="按钮1" v-on:click="f()"><input type="button" value="按钮2" @click="ff()">{{info}}</div><script src="../js/vue.js"></script><script>let v = new Vue({el: "div",data: {info: "事件绑定"},methods: {f: function () {v.info = "按钮1点击了";},ff() {v.info = "按钮2点击了";}}});</script></body></html>

(1)vue相关指令小练习——猜数字

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>11猜数字练习</title></head><body><div><input type="text" v-model="num" placeholder="请输入0-100之间的整数"><input type="button" value="猜一猜" @click="f()"><h1>结果:{{info}}</h1></div><script src="../js/vue.js"></script><script>let x = parseInt(Math.random()*101);/*0-100的随机整数*/let v = new Vue({el: "div",data: {info:"",num:""},methods:{f(){if(v.num>x){v.info = "猜大了";}else if(v.num<x){v.info = "猜小了";}else{v.info = "恭喜你猜对了";}}}});</script></body></html>

(2)vue相关指令小练习——计算器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>12计算器练习</title></head><body><div><input type="text" v-model="n1"><input type="text" v-model="n2"><input type="button" value="加" @click="f('+')"><input type="button" value="减" @click="f('-')"><input type="button" value="乘" @click="f('*')"><input type="button" value="除" @click="f('/')"><h1>结果:{{result}}</h1></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{n1:"",n2:"",result:""},methods:{f(x){/* eval():可以将字符串以代码的形式执行 */v.result = eval(v.n1+x+v.n2);}}});</script></body></html>

05.《Vue相关指令------续！》

(0)相关指令：

(1)v-for————>遍历数组

左侧使用【v-for】与右侧for循环遍历相同：

(1)v-for="(变量,i) in 包含该变量内容的数组名"; ————>遍历数组：让元素的显示数量和数组进行绑定, 同时遍历数组中的每一个对象并重复生成当前标签。变量——>代表的是数组中的每一个对象, i————>代表的是当前遍历的下标例1：写下标【i】：v-for="(变量,i) in 数组名"; <tr v-for="(car,i) in arr"><td>{{i+1}}</td><td>{{car.name}}</td><td>{{car.price}}</td><td>{{car.type}}</td></tr>例2：不写下标【i】：v-for="变量 in 数组名"; 在标签h1内直接写变量的属性也可以！<h1 v-for="car in arr">{{car.name}}---{{car.price}}---{{car.type}}</h1>————————————————————————————————————————————————————————————————————————<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01循环遍历</title></head><body><div><table border="1"><cation>国产优秀纯电汽车</cation><tr><th>编号</th><th>名字</th><th>价格</th><th>类型</th></tr><tr v-for="(car,i) in arr"><td>{{i+1}}</td><td>{{car.name}}</td><td>{{car.price}}</td><td>{{car.type}}</td></tr></table><h1 v-for="car in arr">{{car.name}}---{{car.price}}---{{car.type}}</h1></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{arr:[{name:"比亚迪汉",price:2000,type:"电车"},{name:"极氪001",price:10000,type:"电车"},{name:"特斯拉Model3",price:5000,type:"电车"},]}});</script></body></html>

(2)员工列表练习：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02员工列表练习</title></head><body><div><input type="text" placeholder="姓名" v-model="name"><input type="text" placeholder="工资" v-model="salary"><input type="text" placeholder="工作" v-model="job"><input type="button" value="添加" @click="f()"><table border="1"><caption>员工列表</caption><tr><th>编号</th><th>姓名</th><th>工资</th><th>工作</th><th>操作</th></tr><tr v-for="(e,i) in arr"><td>{{i + 1}}</td><td>{{e.name}}</td><td>{{e.salary}}</td><td>{{e.job}}</td><td><input type="button" value="删除" @click="del(i)"></td></tr></table></div><script src="../js/vue.js"></script><script>let v = new Vue({el: "div",data: {name: "",salary: "",job: "",arr: [{name: "张三", salary: 500, job: "销售"},{name: "李四", salary: 300, job: "人事"},]},methods: {/*添加元素*/f() {//往arr数组中添加一个对象v.arr.push({name: v.name,salary: v.salary,job: v.job});/*往文本框中输入元素点击添加按钮后，自动清空文本框的内容*/v.name="";v.salary="";v.job="";},/*删除元素*/del(i){//splice(i,1):删除arr数组中i下标的位置v.arr.splice(i,1);}}});</script></body></html>

(3)个人信息练习:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03个人信息练习</title></head><body><div><table border="1"><caption>个人信息</caption><tr><td>照片:</td><td><img :src="person.imgUrl" width="50px" alt=""></td></tr><tr><td>名字:</td><td>{{person.name}}</td></tr><tr><td>年龄:</td><td>{{person.age}}</td></tr><tr><td>好友:</td><td><ul><li v-for="name in person.friend">{{name}}</li></ul></td></tr></table><input type="button" value="请求数据" @click="f()"></div><script src="../js/vue.js"></script><script>let v = new Vue({el: "div",data: {person: {name: "xxx", age: "xxx", imgUrl: "../day05/head.jpg", friend: ["xxx", "xxx"]}},methods:{f() {//模拟从服务器获取的数据let person = {name: "苍老师", age: 50, imgUrl: "../day05/a.png",friend: ["克晶", "传奇", "成恒"]};v.person = person;}}});</script></body></html>

(4)v-if/else/show—>显示相关隐藏

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04显示相关隐藏</title></head><body><div><h1 v-if="isVisible">刘德华</h1><h1 v-else>刘苍松</h1><h1 v-show="isVisible">张学友</h1></div><script src="../js/vue.js"></script><script>let v = new Vue({el: "div",data: {/* isVisible:true<————>是否显示吗？对的 */isVisible: true}});</script></body></html>

(5)登录登出_综合练习

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05登录登出_综合练习</title></head><body><div><div v-if="isLogin"><input type="text" v-model="newName"><input type="button" value="添加" @click="arr.push(newName)"><a href="javascript:void(0)" @click="isLogin=false">登出</a></div><div v-else><a href="javascript:void(0)">注册</a><a href="javascript:void(0)" @click="isLogin=true">登录</a></div><div><ul><li v-for="name in arr">{{name}}</li></ul></div></div><script src="../js/vue.js"></script><script>let v = new Vue({el:"div",data:{arr:["刘备","关羽"],/* isLogin:false:是否登陆过？不是 */isLogin:false,newName:""}});</script></body></html>

5、ElementUI：

————>ElementUI官网地址:

————>基于这个模板我们可以延伸出多个不同功能的模板

(1)登录：/#/zh-CN(2)点击组件【Hello world】复制【Html代码】：<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div></body><script src="/vue/dist/vue.js"></script><script src="/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {return {visible: false }}})</script></html>————————————————————————————————————————————————————————————————————(3)IDEA中创建包【eui】在【Web】目录下，和day06平级.在eui包里：新建【HelloEUI.html】文件，清空内容，把上边复制的内容粘过来———————————————————————————————————————————————————————————————————— (4)因为网络引入文件可能会有延迟，那我们在【eui】下新建包【css】和【js】：根据上面(2)中的【三个引入文件提供的提供的网站】：分别在浏览器点击进入将内容复制下来并创建三个文件，并把【eui.css文件存入cssb包】；【eui.js和vue.js文件存入js包】注：将下面完整代码模板延伸其他功能版本的代码时可能会有这样的一个报错：【css路径下应该有一个fonts目录，并存放着一个：element-icons.woff的文件】为了解决上面这个报错，有两种方法：<1> 直接在网站下载后,我们在IDEA的上面步骤中新建包【css】下【新建font目录】，并将这个【element-icons.woff 文件】放在font包下即可！网站：http://localhost:63342/2202CGB/Web/day06/eui/css/fonts/element-icons.woff<2>我们在之前正常的自己写的功能页面在IDEA中点击浏览器访问页面时，点击F12在会发现出现一个框，点击框上的【Network】，再点击浏览器刷新按钮，会发现有一个【element-icons.woff的文件】，双击就会下载到自己的电脑上，我们在IDEA的上面步骤中新建包【css】下【新建 font 目录】，并将这个【element-icons.woff 文件】放在font包下即可！———————————————————————————————————————————————————————————————————— (4.1)更换上面代码中【三个引入文件的路径】：————>注意上面(4)中文件创建后的存放路径!!![1] <link rel="stylesheet" href="css/eui.css">[2] <script src="js/vue.js"></script> [3] <script src="js/eui.js"></script>————————————————————————————————————————————————————————————————————(5)此时该代码页面会显示：左上角有一个【Button】的按钮(6)删掉【<div id="app">...<div>】中的代码(7)在最下边的:【<script>...</script>】中把添加：【let v =】(8)删除最下边【<script>...</script>】中：【return {visible: false }】return的内容作为模板(9)此时该代码页面会显示：一个空页面！————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————(10)完整模板：《HelloEUI.html》<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}/*是上边的简写，但是复用性差！data:{visible:false}*/})</script></html>

00.《HelloEUI.html》模板：

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}/*是上边的简写，但是复用性差！data:{visible:false}*/})</script></html>

01.Button 按钮

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row><hr><el-button type="success">成功按钮</el-button><el-button type="success" size="medium">成功按钮</el-button><el-button type="success" size="small">成功按钮</el-button><el-button type="success" size="mini">成功按钮</el-button></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function() {return{}}})</script></html>

02.icon 图标——字体图标

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><i class="el-icon-delete">删除</i><i style="color:red;font-size:30px" class="el-icon-eleme">饿了么</i><i class="el-icon-setting">设置图标</i></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}})</script></html>

03.image 图片

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>img{background-color: red;}</style></head><body><div id="app"><div class="demo-image"><div class="block" v-for="fit in fits" :key="fit"><span class="demonstration">{{fit }}</span><el-imagestyle="width: 100px; height: 100px":src="url":fit="fit"></el-image></div><h1>1.保证图片完整显示并且不能变形</h1><el-image style="width:200px;height:200px" :src="url" fit="contain"></el-image><h1>2.保证图片完整显示</h1><el-image style="width:200px;height:200px" :src="url" fit="fill"></el-image><h1>3.保证图片宽高比并且占满200*200</h1><el-image style="width:200px;height:200px" :src="url" fit="cover"></el-image></div></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: '/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}}})</script></html>

04.Message 消息提示

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><el-button :plain="true" @click="open2">成功</el-button><el-button :plain="true" @click="open3">警告</el-button><el-button :plain="true" @click="open1">消息</el-button><el-button :plain="true" @click="open4">错误</el-button><el-button :plain="true" @click="open5">成功提示</el-button><el-button :plain="true" @click="open6">错误提示</el-button></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}},methods: {open1() {this.$message('这是一条消息提示');},open2() {this.$message({message: '恭喜你，这是一条成功消息',type: 'success'});},open3() {this.$message({message: '警告哦，这是一条警告消息',type: 'warning'});},open4() {this.$message.error('错了哦，这是一条错误消息');},open5(){v.$message.success('成功了!');/* v 和 this相同用法 */},open6(){this.$message.error('失败了!');}}})</script></html>

05.Dropdown 下拉菜单

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown @command="handleCommand"><span class="el-dropdown-link">选择你的英雄<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="name in arr" :command="name">{{name}}</el-dropdown-item></el-dropdown-menu></el-dropdown><h1>{{info}}</h1></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {arr:["刘备","关羽","张飞"],info:""}},methods:{handleCommand(command) {/* 把传递过来的值弹出 */v.$message.success(command);v.info = command;}}})</script></html>

06.NavMenu 导航菜单

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu><h1>自定义导航菜单</h1><el-menudefault-active="1"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">直播课</el-menu-item><el-menu-item index="3">免费课</el-menu-item><el-menu-item index="4">线上课</el-menu-item><el-menu-item index="5">关于我们</el-menu-item></el-menu></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}},methods:{handleSelect(key, keyPath) {console.log(key, keyPath);}}})</script></html>

07.Table 表格

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></template><h1>员工列表</h1><template><el-table :data="arr" style="width: 100%"><el-table-column prop="name" label="名字" width="180"></el-table-column><el-table-column prop="salary" label="工资" width="180"></el-table-column><el-table-column prop="job" label="工作"></el-table-column></el-table></template></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {tableData: [{date: '-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},{date: '-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'},{date: '-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},{date: '-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄'}],arr:[{name:"孙悟空",salary:"5000",job:"演员"},{name:"唐僧",salary:"1000",job:"和尚"},{name:"猪八戒",salary:"4000",job:"吃货"},]}}})</script></html>

(1)员工列表练习EUI—表格、Popconfirm气泡确认框

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="../eui/css/eui.css"></head><body><div id="app"><input type="text" placeholder="姓名" v-model="name"><input type="text" placeholder="工资" v-model="salary"><input type="text" placeholder="工作" v-model="job"><input type="button" value="添加" @click="add()"><h1>员工列表</h1><template><el-table :data="arr" style="width: 100%"><el-table-column type="index" label="编号" width="180"></el-table-column><el-table-column prop="name" label="名字" width="180"></el-table-column><el-table-column prop="salary" label="工资" width="180"></el-table-column><el-table-column prop="job" label="工作"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-popconfirm @confirm="handleDelete(scope.$index, scope.row)" title="这是一段内容确定删除吗？"><el-button size="mini" type="danger" slot="reference">删除</el-button></el-popconfirm></template></el-table-column></el-table></template></div></body><script src="../eui/js/vue.js"></script><script src="../eui/js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {arr:[],name:"",salary:"",job:""}},methods: {add(){if(v.name.trim()==""||v.salary.trim()==""||v.job.trim()==""){v.$message.error("输入错误");return;};v.arr.push({name:v.name,salary:v.salary,job:v.job})},handleDelete(index, row) {console.log(index+"==="+row.name);v.arr.splice(index,1);}}})</script></html>

08.Layout 布局

(1)gutter:设置间距(2)在<el-row>标签内：加上属性style:【"width: 1200px;margin: 0 auto"】就可以居中了(3)offset:设置偏移数量————>通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>.c1{border: 1px solid red;border-radius: 5px;}</style></head><body><div id="app"><el-row><el-col :span="24"><div class="c1">占24</div></el-col></el-row><el-row><el-col :span="12"><div class="c1">占12</div></el-col><el-col :span="12"><div class="c1">占12</div></el-col></el-row><h1>gutter:设置间距</h1><el-row gutter="50"><el-col :span="8"><div class="c1">占8</div></el-col><el-col :span="8"><div class="c1">占8</div></el-col><el-col :span="8"><div class="c1">占8</div></el-col></el-row><h1>练习：四等份</h1><el-row gutter="20"><el-col :span="6"><div class="c1">占4</div></el-col><el-col :span="6"><div class="c1">占4</div></el-col><el-col :span="6"><div class="c1">占4</div></el-col><el-col :span="6"><div class="c1">占4</div></el-col></el-row><h1>练习：份数3:1</h1><el-row gutter="20" style="width: 1200px;margin: 0 auto"><el-col :span="18"><div class="c1">占4</div></el-col><el-col :span="6"><div class="c1">占4</div></el-col></el-row><h1>分栏偏移</h1><el-row gutter="20" style="width: 1200px;margin: 0 auto"><el-col :span="20" offset="4"><div class="c1">占24</div></el-col></el-row></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}/*是上边的简写，但是复用性差！data:{visible:false}*/})</script></html>

09.Container 布局容器(常见页面布局)

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>header{background-color: red;line-height: 50px;text-align: center;/* elementUI框架会让header高度为0，通过【!important】提升优先级！！！ *//* height: 100px !important; */}main{background-color: green;line-height: 200px;text-align: center;}footer{background-color: blue;line-height: 50px;text-align: center;}</style></head><body><div id="app"><el-container><el-header height="100px">Header</el-header><el-main>Main</el-main></el-container><h1>头体脚:</h1><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container><h1>左右:</h1><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container><h1>三部分框：上边头下边的左边Aside 下边的右边Main</h1><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container></el-container><h1>复杂布局:</h1><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}})</script></html>

(1)设置页面的练习题—布局容器(实例)

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}</style></head><body><div id="app"><el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="[]"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {const item = {date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {/* 创建了一个20长度的数组 fill:填充把item填充到该数组中 */tableData: Array(20).fill(item)}}})</script></html>

10.Divider 分割线

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><template><div><span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span><el-divider content-position="left">少年包青天</el-divider><span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span></div><div><span>首页</span><el-divider direction="vertical"></el-divider><span>免费课</span><el-divider direction="vertical"></el-divider><span>直播课</span></div></template></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}})</script></html>

11.Card 卡片

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><el-card class="box-card"><div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div></el-card><h1>带图片的卡片</h1><el-row><el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0"><el-card :body-style="{ padding: '10px' }"><img src="/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"><div style="padding: 14px;"><span>好吃的汉堡</span><div class="bottom clearfix"><time class="time">{{new Date() }}</time><el-button type="text" class="button">操作按钮</el-button></div></div></el-card></el-col></el-row></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {}}})</script></html>

12.Carousel 走马灯

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"></head><body><div id="app"><template><div class="block" style="width: 300px"><span class="demonstration">默认 Hover 指示器触发</span><el-carousel height="150px"><el-carousel-item v-for="item in arr" :key="item"><img :src="item" style="width: 100%;height: 100%" alt=""></el-carousel-item></el-carousel></div><div class="block" style="width: 300px"><span class="demonstration">Click 指示器触发</span><el-carousel trigger="click" height="150px"><el-carousel-item v-for="item in arr2" :key="item"><img :src="item" style="width: 100%;height: 100%" alt=""></el-carousel-item></el-carousel></div></template></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {arr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg",],arr2:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg",]}}})</script></html>

13.酷鲨商城登录页面

(1)在idea中安装elementUI代码提示插件

写页面时会用到【elementUI代码】，但是没有提示，需要安装一个插件：【elementUI代码提示插件】：

先从老师工程中得到element.jar 文件,保存到磁盘中的某个位置(容易找到的位置)File->Settings->Plugins 如下图操作找到element.jar文件最后重启idea即可

(2)代码实现：

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>body{margin: 0;/*去掉图片自带的上下外边距*/background-image: url("imgs/bg.jpg");background-size: cover;/*cover：是专门用来设置全屏背景的*/text-align: center;}h1{font-size: 72px;color: rgb(0,150,215);margin-bottom: 0;/*底部边距:0 让【欢迎来到酷鲨商城】文字离着【鲨鱼图片】更近一些*/}img{width: 100px;}h2{font-size: 32px;color: #0095d7;margin: 0;/*去掉图片自带的上下外边距*/}</style></head><body><div id="app"><h1>欢迎来到酷鲨商城</h1><img src="imgs/shark.png" alt=""><h2>CoolSharkMall</h2><el-card style="width: 600px;height: 300px;margin: 0 auto;background-color: rgba(255,255,255,0.3)"><el-form style="width: 400px;margin: 30px auto;"label-width="60px"><el-form-item label="用户名"><el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"> <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button style="position: relative;right: 25px" type="primary">登录</el-button></el-form-item></el-form></el-card></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {user:{username:"",password:""}}}})</script></html>

14.酷鲨商城首页页面：

(1)代码实现：

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/eui.css"><style>body{font: 18px "Microsoft YaHei UI";margin: 0;}header a{text-decoration: none;color: #6c6c6c;}/* hover:鼠标悬停在文字上时显示的颜色 */header a:hover{color: #0aa1ed;}/*去掉自带的内边距:——————>如何去找这个选择器？(页面右键检查——>出现一个源代码框——>点击最左上角箭头——>鼠标点击页面中的商品出现绿色图标后——>源代码框内向下滑找到包含【padding:12px;0】这个选择器后复制即可!)*/.el-table .el-table__cell{padding: 0;}.p_img:hover{position: relative;bottom: 5px;/*元素阴影:x偏移值 y偏移值浓度(商品图片外侧虚化程度) 范围颜色*/box-shadow: 0 0 100px 10px #333;}</style></head><body><div id="app"><el-container><el-header style="padding:0;height: 150px"><div style="width: 1200px;margin: 0 auto"><img src="imgs/logo.png" style="width: 300px;vertical-align:middle" alt=""><span><a href="">首页</a><el-divider direction="vertical"></el-divider><a href="">热点资讯</a><el-divider direction="vertical"></el-divider><a href="">商家入驻</a><el-divider direction="vertical"></el-divider><a href="">社会招聘</a><el-divider direction="vertical"></el-divider><a href="">校园招聘</a><el-divider direction="vertical"></el-divider><a href="">帮助中心</a></span></div><div style="width: 100%;height: 60px;background-color: #82c8ec"><el-menu style="width: 1200px;margin: 0 auto"default-active="1"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#82c8ec"text-color="#fff"active-text-color="#fff"><el-menu-item index="1">精彩活动</el-menu-item><el-menu-item index="2">当季女装</el-menu-item><el-menu-item index="3">品牌男装</el-menu-item><el-menu-item index="4">环球美食</el-menu-item><el-menu-item index="5">医药健康</el-menu-item><el-menu-item index="6">美妆彩妆</el-menu-item><el-menu-item index="7">母婴产品</el-menu-item><div style="float:right;margin-top: 15px"><el-input size="mini" placeholder="请输入关键字搜索"></el-input><el-button style="position: absolute;background-color: rgba(0,0,0,0);border: 0;right: 0;top: 11px"icon="el-icon-search"></el-button></div></el-menu></div></el-header><el-main style="width: 1200px;margin: 0 auto"><el-row gutter="20"><el-col span="18"><el-carousel height="300px"><el-carousel-item v-for="b in bannerArr"><img :src="b.url" style="width: 100%;height: 100%" alt=""></el-carousel-item></el-carousel></el-col><el-col span="6"><el-card style="height: 299px"><h3><i style="font-weight: bold" class="el-icon-trophy"></i> 销量最高</h3><el-divider></el-divider><el-table :data="topArr" style="width: 500px"><el-table-column label="排名" type="index" width="50px"></el-table-column><el-table-column label="商品名"><template slot-scope="scope"><a href="" style="text-decoration: none;color: #333">{{scope.row.title}}</a></template></el-table-column><el-table-column label="销量" prop="saleCount"></el-table-column></el-table></el-card></el-col></el-row><el-row gutter="20"><el-col span="6" v-for="p in productArr"><el-card><div><img class="p_img" :src="p.url" width="100%" alt=""></div><div><p style="font-size: 15px;margin-top: 0;height: 38px">{{p.title}}</p><div style="color: #6c6c6c"><span>￥{{p.price}}</span><span style="font-size: 12px;text-decoration: line-through">{{p.oldPrice}}</span><span style="float: right">销量:{{p.saleCount}}件</span></div></div></el-card></el-col></el-row></el-main><el-footer style="padding: 0"><div style="background-image: url('imgs/wave.png');height: 95px;margin-bottom: -30px"></div><div style="background-color: #3f3f3f;height: 100px;font-size: 14px;color: #b1b1b1;text-align: center;padding: 30px"><p>Copyright © 北京达内金桥科技有限公司版权所有京ICP备1709号-3 京公网安备 11010802029572号</p><p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p><p>达内在线专注于IT职业技能培训</p></div></el-footer></el-container></div></body><script src="js/vue.js"></script><script src="js/eui.js"></script><script>let v = new Vue({el: '#app',data: function () {return {bannerArr:[{url:"imgs/b1.jpg"},{url:"imgs/b2.jpg"},{url:"imgs/b3.jpg"},],topArr:[{title:"小米手机",saleCount:5000},{title:"华为手表",saleCount:4000},{title:"特斯拉模型",saleCount:2000},{title:"苹果手机",saleCount:1000},{title:"诺基亚手机",saleCount:500},{title:"辣椒手机",saleCount:450},],productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},{title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},{title:"雪中飞墨绿色短袖t恤女夏新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},{title:"【佟丽娅同款】鸭鸭明星同款羽绒服冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},{title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},{title:"香影毛呢外套女中长款冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},{title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},{title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},{title:"imone秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},{title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},{title:"憨厚皇后100%绵羊皮秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},{title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}],}}})</script></html>

15.酷鲨商城详情页面：

(1)代码实现：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

第三阶段：Web前端：01Web(HTML CSS JavaScript Vue ElementUI)

课程介绍：一、二、三

一、Web前端： HTML/CSS/JavaScript

1、Web前端之——Html：盖房子

01.什么是HTML?

(1)常见的文本、列表标签：

(2)图片img标签：

(3)超链接: < a >

(4)表格相关标签：

(5)表单form：< inpit >

*(6)块级(div) / 行内(span)_分区标签

2、Web前端之——CSS：装修房子

01.什么是CSS？

02.如何在HTML页面中添加CSS样式代码?

(0)有三种引入方式：内联 / 内部 / 外部样式

03.选择器

(1)常用6种选择器

(2)选择器续：再加另外三种选择器

(3)一共9种选择器:

04.颜色和背景

05.文本和字体相关样式

(1)文本和字体：

(2)上述练习题：

06.元素的显示方式display

07.盒子模型的组成：(内容+外边距+边框+内边距)

(1)盒子模型练习题：

08.CSS的三大特性：继承/层叠/优先级

09.学子商城页面练习题(1)(2)：

10.元素的5种定位：

(1)静态定位：position:static;

(2)相对定位：position:relative;

(3)绝对定位：position:absolute;

(4)固定定位：position: fixed;

(5)浮动定位：float:left/right

(6)综合练习图：

11.元素的溢出设置(overflow: xx)

12.元素显示层级(z-index: xx)

13.页面布局练习题：

3、Web前端之——JavaScript：给页面添加动态效果

01.如何在html页面中添加JS语言

(1)有三种引入方式：内联 / 内部 / 外部样式

02.变量, 数据类型,运算符,各种语句,方法,面向对象

(1)变量

(2)数据类型

(3)运算符

(3)各种分支语句

(4)方法

03.DOM 文档对象模型----页面相关的方法

(0)页面相关的方法:

(0.1)练习题：页面点击添加按钮生成图片

(1)NaN

(2)练习题：计算器

(3)练习题：猜数字

(5)员工列表练习：

04.JavaScript中的对象分类

(0)JS对象分类之—BOM浏览器对象模型:(1)-(2)

(1)window对象中常见的方法:

(1.1)定时器

(2)window对象中常见的属性：

05.JavaScript中自定义对象:

(1)个人信息_综合案例:

4、Web前端之——MVC模型

01.前端MVC设计模式

02.M,V,VM设计模式

03.VUE框架

(前提)引入Vue框架文件两种方式：

04.《Vue相关指令》和 对应练习题：

(0)相关指令：

(1)vue相关指令小练习——猜数字

(2)vue相关指令小练习——计算器

05.《Vue相关指令------续！》

(0)相关指令：

(1)v-for————>遍历数组

(2)员工列表练习：

(3)个人信息练习:

(4)v-if/else/show—>显示相关隐藏

(5)登录登出_综合练习

5、ElementUI：

00.《HelloEUI.html》模板：

01.Button 按钮

04.《Vue相关指令》和对应练习题：