转载自：国彬老师：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教程：
http://doc.canglaoshi.org/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 Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (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)删除线：s
02.常见的列表标签：
(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>
<!--
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)删除线：s
02.常见的列表标签：
(1)无序列表: ul和li 组合 unordered list list item(列表项)
(2)有序列表: ol和li 组合 ordered list
(3)列表嵌套：有序列表和无序列表可以任意无限嵌套
-->
<!--特点：字体加粗 独占一行 自带上下间距-->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<hr>
<!-- 段落标签p 特点:独占一行 自带上下间距 -->
<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>高中12年</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="https://cdn.tmooc.cn/bsfile//courseImg///e2b2f64d02e14b6aaeba283722d5892a.jpg" alt="">】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03图片标签</title>
</head>
<body>
<!--
图片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="https://cdn.tmooc.cn/bsfile//courseImg///e2b2f64d02e14b6aaeba283722d5892a.jpg" alt="">】
-->
<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="https://cdn.tmooc.cn/bsfile//courseImg///e2b2f64d02e14b6aaeba283722d5892a.jpg" alt="">
</body>
</html>
(3)超链接: < a >
01.href: 资源路径 作用类似图片标签的src
02.a标签：包裹文本为文本超链接 ; 包裹图片为图片超链接
03.页面内部跳转
：在目的地元素(点完后要跳转到的位置)里面:添加"id=xxx",
然后在a标签包裹的超链接(href)里面:href="#xxx"的方式来跳转到目的地元素的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04超链接</title>
</head>
<body>
<!--
超链接: < a >
01.href: 资源路径 作用类似图片标签的src
02.a标签：包裹文本为文本超链接 ; 包裹图片为图片超链接
03.页面内部跳转：在目的地元素(点完后要跳转到的位置)里面:添加"id=xxx",
然后在a标签包裹的超链接(href)里面:href="#xxx"的方式来跳转到目的地元素的位置
-->
<a id="top" href="http://www.baidu.com">超链接1</a>
<a href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.png">超链接3</a>
<a href="http://www.tmooc.cn"><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：
01.相关标签: table表格
tr：表示行
td：表示列 写在tr中
th：叫做表头。写在tr中 ————>与td不同就是，加粗并居中了
caption：表格上边的标题
02.相关属性: border边框(加在table后：<table border="xx">)
colspan：跨几列 写在table中
rowspan：跨几行 写在table中
-->
<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：< input >
作用：获取用户输入的各种信息并且把这些信息提交给服务器
注意:只有被包含在form里面的输入框才会被提交!
01.为什么网页上一点击注册就把信息提交了？
页面如何将用户输入的信息提交给服务端表单form的使用:
form是提交表单的方式(只有在form中的才会被提交)：
1)<form action="/myweb/reg" method="get"><table></table><form>
<form>:表单：用于将用户在页面上输入的信息提交给服务端使用
注意:只有被包含在form里面的输入框才会被提交!
form上有两个重要的属性:
①action:用于指定表单提交的位置，该位置需要服务端配合
②method:提交方式，有两个值:get,post
get:地址栏形式提交，数据会被包含在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：是单选框必须添加的属性 否则提交on
checked：在页面上默认选中某个单选框
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：
01.为什么网页上一点击注册就把信息提交了？
页面如何将用户输入的信息提交给服务端表单form的使用:
form是提交表单的方式(只有在form中的才会被提交)：
1)<form action="/myweb/reg" method="get"><table></table><form>
<form>:表单：用于将用户在页面上输入的信息提交给服务端使用
注意:只有被包含在form里面的输入框才会被提交!
form上有两个重要的属性:
①action:用于指定表单提交的位置，该位置需要服务端配合
②method:提交方式，有两个值:get,post
get:地址栏形式提交，数据会被包含在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：是单选框必须添加的属性 否则提交on
checked：在页面上默认选中某个单选框
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>】
-->
<form action="http://www.baidu.com">
用户名:<input type="text" name="username" maxlength="5" value="abc" readonly><br>
密码: <input type="password" name="password"><br>
<!--value是单选框必须添加的属性 否则提交on
checked:默认选中某个单选框
-->
性别: <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>
<!--value设置提交的内容 selected默认选中-->
所在地：
<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 auto
02.行内元素
(1)行内块元素受上级元素居中影响，元素自身会居中 内容也继承了居中
(2)设置行内元素的垂直对齐方式vertical-align：
top上对齐
middle中间对齐
bottom下对齐
baseline基线对齐(默认的)
————>例：vertical-align: middle;
2、Web前端之——CSS：装修房子
- css教程：
http://doc.canglaoshi.org/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>
<!--注意：需要在body标签上边的head标签里面：添加style标签, -->
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<!--注1：css样式文件的创建：选择页面鼠标右键new——>选择CSS图标的Stylesheet
注2：需要在单独的css样式文件(08.my.css)中写样式代码(写这句:【h3{color: green}】),
在html页面中的body标签上边通过link标签引入
-->
<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">
<!--
01.id选择器:——>当需要选择页面中【某一个】元素时使用
(1)前提：在head标签中添加一个style标签，再从该标签里写：id选择器
格式: #id{样式代码(color : 颜色的名字)}
(2)再从body中的[标签]内写：id="p1" 例:【<p id="p1">苹果</p>】
-->
<p id="p1">苹果</p>
<!--
02.类选择器:——>当需要选择页面中【多个】不相关元素时, 给多个元素添加相同的class属性值,然后通过类选择器进行选择即可
(1)前提：在head标签中添加一个style标签，再从该标签里写：类选择器
格式: .class{样式代码(color : 颜色的名字)}
(2)再从body中的[标签]内写：class="c1" 例:【<p class="c1">香蕉</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>
<!--要求：用08的内部样式调用选择器完成以下源代码的修改：
1.把张学友改成绿色——————————————>参照09的：id选择器
2.把刘德华和悟空改成蓝色—————————>参照09的：类选择器
3.修改取经3人和刘备的背景为黄色———>参照09的：分组选择器
4.修改密码框的背景为红色—————————>参照09的：属性选择器
5.给所有元素添加红色的边框.——————>参照09的：任意元素选择器
源代码：
<ul>
<li>张学友</li>
<li>刘德华</li>
<li>郭富城</li>
</ul>
<h1>悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
-->
<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="http://www.tedu.cn">超链接1</a>
<a href="http://doc.canglaoshi.org">超链接2</a>
<a href="http://www.qq.com">超链接3</a>
</body>
</html>
练习题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01选择器续练习题</title>
<!--
要求：用内部样式完成以下练习题：
1.关羽绿色————————————————————————————————>id选择器
2.张飞和苹果黄色———————————————————————————>类选择器
3.文本框和所有水果背景红色———————————————————>属性选择器 和 子元素选择器
4.p2字体粉色——————————————————————————————>子元素选择器
5.p2和p3背景黄色——————————————————————————>分组选择器的背景background 和 子孙后代选择器
6.超链接(优酷)未访问绿色,访问过红色悬停黄色,点击粉色————>伪装选择器:未访问、访问、悬停、点击
-->
<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="http://www.youku.com">优酷</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("http://doc.canglaoshi.org/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>
<!--
文本和字体相关练习:
要求：
1.刘德华 宽度100 高度30 绿色背景 红色字体 横向和纵向居中
2.苹果和香蕉 字体大小25px 斜体
3.冰箱去掉加粗 蓝色阴影 方向是左下 浓度3
4.洗衣机添加下划线
5.百度去掉下划线并字体加粗 ; 字体大小20px
-->
<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="http://www.baidu.com">百度</a>
</body>
</html>
06.元素的显示方式display
block: 块级元素的默认值 , 例: display: block
特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p
inline: 行内元素的默认值, 例: display: inline
特点: 共占一行, 不可以修改元素的宽高,
包括: span, b(加粗),i(斜体),s(删除线),u(下划线),a(超链接)
inline-block: 行内块元素的默认值,
特点: 共占一行, 可以修改宽高, 包括:img,input
none:隐藏元素
注意！行内元素不能直接修改宽高, 如必须修改 则需要先把默认的行内元素：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.盒子模型的组成：(内容+外边距+边框+内边距)
- 盒子模型教程：
http://doc.canglaoshi.org/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 左右20
padding: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>
<!--
根据下列代码完成该baoday02下的【09.盒子模型_练习题.png】图片样式
-->
<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>
<!--
要求：按照学子商城页面左侧的图片写出来！
http://doc.canglaoshi.org/tstore_v1/web/index.html
-->
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
width: 611px;
height: 376px;
background-color: #e8e8e8;
background-image: url("http://doc.canglaoshi.org/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("http://doc.canglaoshi.org/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="http://doc.canglaoshi.org/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)综合练习图：
- 按照该链接(http://doc.canglaoshi.org/tstore_v1/web/index.html)将【第三行左侧】页面展示出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06综合练习</title>
<!--
要求：
按照该链接(http://doc.canglaoshi.org/tstore_v1/web/index.html)
将【第三行左侧】页面展示出来
-->
<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="http://doc.canglaoshi.org/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>
<!--
学子商城页面首页布局：http://doc.canglaoshi.org/tstore_v1/web/index.html
-->
<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教程：http://doc.canglaoshi.org/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代码,当事件触发时执行.
注：——>事件: 系统给提供的特定时间点.
注：——>点击事件: 当点击元素时触发的时间点
例：<!--onclick:点击事件属性 alert('xxx'):弹出提示框-->
<input type="button" value="按钮" onclick="alt('点你妹啊')">
<2>内部：在html页面中任意位置(推荐写在</body>上面)添加script标签,在标签体内写JS代码
例：/body
<!--内部引入JS-->
<script>
//在浏览器的控制台输出
console.log("内部引入成功")
</script>
<3>外部：在单独的.js文件中写js代码, 在html页面中通过script标签的src属性引入
例：//1.单独的.js文件中：
console.log("外部引入成功");
//2.html页面中:
<!--
引入外部js文件;
如果script标签引入了外部的js文件则不能在标签体内写js代码
-->
<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/false
undefined: 未定义 ,当变量只声明不赋值时,变量的类型为未定义
获取变量类型的方式: 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 else
while
do while
for
switch 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">
<!--
(1)通过CSS中接触到的选择器获取元素对象————>let 元素对象 = document.querySelector(“选择器”);
(2)获取元素的文本内容——————>元素对象.innerText; //获取文本内容
在控制台输入以下语句：
> let d = document.querySelector("div");
< undefined
> d.innerText = "abc";
< 'abc'
> d.innerText
< 'abc'
-->
<input type="button" value="按钮" onclick="f()">
<script>
function f(){
//得到文本框和div
let i = document.querySelector("#i1");
let d = document.querySelector("div");
//取出文本框的值并赋值给div
d.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>
<!--
创建元素对象:
let 元素对象 = document.createElement("标签名");
添加元素对象到某个元素里面:
第一种方式：document.body.appendChild(元素对象);
第二种方式：document.body.append(h1,h2);
修改元素的文本内容:
元素对象.innerText=“xxx”;
给元素的属性赋值:
元素对象.src = “…/b.jpg”;
元素对象.属性=“值”;
-->
</head>
<body>
<script>
//创建标签
let d = document.createElement("div");
//给div设置显示文本
d.innerText = "我是div";
//把div添加到body里面
document.body.appendChild(d);
//创建h1 和 h2
let 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");
//判断输入的两个值是不是NaN
if (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++;
//判断输入的两个值是不是NaN
if(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>
<!--
页面中创建员工表格练习题：
通过CSS中接触到的选择器获取元素对象
【let 元素对象 = document.querySelector(“选择器”);】
创建元素对象
【let 元素对象 = document.createElement("标签名");】
获取和修改元素的文本内容:
【元素对象.innerText; //获取文本内容】
【元素对象.innerText=“xxx”; //修改文本内容】
获取和修改表单中的控件的值
【控件.value //获取】
【控件.value=“xxx” //修改】
添加元素对象到某个元素里面
(1)只有往body里添加元素才能写成: document.body.xxxxx
第一种方式：【document.body.appendChild(元素对象);】
第二种方式：【document.body.append(h1,h2);】
(2)若往其他(table)里添加tr这样写：
【table.append(tr);】
-->
</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 和 td
let 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装进tr
tr.append(nameTd,salaryTd,jobTd);
//把tr装进table
table.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)是否是NaN
parseInt()/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>
//定义一个空的Person
function 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装进table
table.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) {
//创建li
let 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接收数据并生成HTML
- 3）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>
<!--
引入Vue框架文件两种方式：
(1)引入网络版vue：
步骤：
苍老师网站——>配置文件
——>点击:[JavaScript 组件库 CDN]
——>点击:[引入vue]
——>复制代码:【<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>】
(2)引入本地的vue.js文件：将vue.js文件放到本包内：
步骤：
在浏览器打开：【https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js】
复制内容，在本包中新建【vue.js】文件，将复制的内容存到该文件中即可
-->
<!--(1)引入网络版vue：-->
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-->
<!--(2)引入本地的vue.js文件：-->
<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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>】
(2)引入本地的vue.js文件：将vue.js文件放到本包内：
步骤：
在浏览器打开：【https://cdn.jsdelivr.net/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>
<!--
在上一级目录新建包js：把vue.js文件存入上一级目录，便于以后写路径的时候方便！
-->
</head>
<body>
<div>
<!--{{变量}}:插值, 让此处的文本和data里面的变量进行绑定,不依赖某个标签-->
<h1>{{info}}</h1>
<!--v-text=变量, 让元素的文本内容和变量进行绑定-->
<p v-text="info"></p>
<!--v-html=变量, 让元素的标签内容和变量进行绑定-->
<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>
<!-- v-bind属性绑定: -->
<input type="text" v-bind:value="msg">
<!-- v-bind属性绑定:————>简写: -->
<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:"http://www.baidu.com",
imgUrl:"../b.png"
}
})
</script>
</body>
</html>
————————————————————————————————————————————————————————————————————————
上述(5)练习题：双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>096双向绑定</title>
<!--
v-model=“变量”: 让控件的value属性和某个变量进行双向绑定。
注：——>双向绑定:变量会影响页面显示的内容,页面元素的内容改变也会影响变量,
当需要从代码中获取控件的值时使用双向绑定
-->
</head>
<body>
<div>
<!--当需要获取input值的时候使用双向绑定-->
<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>
<!--v-on:事件名=“方法”, 绑定元素的事件。
方法需要声明在Vue对象里面的methods属性里面,
简写是@事件名=“方法-->
<input type="button" value="按钮1" v-on:click="f()">
<!--v-on:事件名=“方法” 下面是简写：-->
<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>
<!--双向绑定:【v-model=“变量”: 让控件的value属性和某个变量进行双向绑定。】-->
<input type="text" v-model="num" placeholder="请输入0-100之间的整数">
<!--添加事件的方式：以后都取代了【onclick=“”】-->
<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"><!--双向绑定:【v-model=“变量”: 让控件的value属性和某个变量进行双向绑定。】-->
<input type="text" v-model="n2">
<!--
事件绑定：v-on:事件名="方法"
可以简写成②:【@事件名="方法"】
@click:点击事件】
-->
<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="(变量,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>
(2)v-if=“变量”, 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)
(3)v-else和v-if指令结合使用, 显示状态和v-if的元素取反
(4)v-show=“变量”,元素显示状态和变量进行绑定, true显示,false不显示(通过样式隐藏元素), 需要元素需要频繁切换显示状态使用v-show的执行效率会高于v-if
————————————————————————————————————————————————————————————————————————
(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>
<!--
v-for="(变量,i) in 数组";————>遍历数组
:同时重复生成当前标签,数量和数组中对象的数量一致
-->
</head>
<body>
<div>
<table border="1">
<cation>国产优秀纯电汽车</cation>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>类型</th>
</tr>
<!--该遍历方式：——>与《04自定义对象》中的遍历相同！-->
<!-- 写下标【i】：v-for="(变量,i) in 包含该变量内容的数组名"; -->
<!--car:代表数组中的每一个对象 i:代表遍历的下标-->
<!--循环遍历:-->
<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>
<!-- 不写下标【i】：v-for="变量 in 包含该变量内容的数组名"; 在标签h1内直接写变量的属性也可以！ -->
<h1 v-for="car in arr">{{car.name}}---{{car.price}}---{{car.type}}</h1>
</div>
<!--(2)引入本地的vue.js文件：-->
<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"><!--双向绑定:v-model="变量"-->
<input type="text" placeholder="工资" v-model="salary">
<input type="text" placeholder="工作" v-model="job">
<!--事件绑定：简写——> @事件名="方法"：【添加点击事件:@click="方法"】-->
<input type="button" value="添加" @click="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
<th>操作</th>
</tr>
<!-- 循环遍历：写下标【i】：v-for="(变量,i) in 包含该变量内容的数组名"; -->
<tr v-for="(e,i) in arr">
<td>{{i + 1}}</td>
<td>{{e.name}}</td>
<td>{{e.salary}}</td>
<td>{{e.job}}</td>
<!--del(i):删除数组中的元素i-->
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
</div>
<!--引入本地的vue.js文件：-->
<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>
<!-- 循环遍历：写下标【i】：v-for="(变量,i) in 包含该变量内容的数组名"; -->
<ul>
<li v-for="name in person.friend">{{name}}</li>
</ul>
</td>
</tr>
</table>
<!--事件绑定：简写——> @事件名="方法"：【添加点击事件:@click="方法"】-->
<input type="button" value="请求数据" @click="f()">
</div>
<!--引入本地的vue.js文件：-->
<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>
<!--
v-if让元素是否显示和变量进行绑定，不显示时是把元素删除了
：在控制台查看源代码会发现:没有刘德华这一句的代码了
-->
<h1 v-if="isVisible">刘德华</h1>
<!--
v-else 和 v-if结合使用 和上面条件取反：即刘德华在页面源代码中存在，刘苍松被删除！
-->
<h1 v-else>刘苍松</h1>
<!--
v-show让元素是否显示和变量进行绑定，不显示时是把元素隐藏了(——>频繁切换显示状态时使用)
：在控制台查看源代码会发现:张学友这句代码还存在，不过deiplay后跟的是none:
【<h1 style="display: none;">张学友</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>
<!--
true登录 不显示
false未登录 显示
v-if = isLogin true显示 代表登录过
v-if = !isLogin false不显示 代表未登录
在页面的控制台输入：v.isLogin=true回车———>页面会显示文本框，右边有一个【登出】
在页面的控制台输入：v.isLogin=false回车——>页面会显示注册和登录两个超链接，下一行后一个点:.
-->
<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>
<!--
如果超链接点击时 不离开此页面需要添加javascript:void(0)
——>相当于:废掉跳转功能
-->
<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官网地址: https://element.eleme.cn
————>基于这个模板我们可以延伸出多个不同功能的模板
(1)登录：https://element.eleme.cn/#/zh-CN
(2)点击组件【Hello world】复制【Html代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/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>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/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] <!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<link rel="stylesheet" href="css/eui.css">
[2] <!-- import Vue before Element(在Element之前导入本地版Vue)：【vue.js文件】-->
<script src="js/vue.js"></script>
[3] <!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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-image
style="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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<script src="js/eui.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
})
</script>
</html>
04.Message 消息提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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><!-- disabled:失效的 -->
<el-dropdown-item divided>蚵仔煎</el-dropdown-item><!-- divided:把这句代码分隔到下面 -->
</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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
<!--
default-active：设置默认选中
mode：设置横向还是纵向
select：添加选择事件
-->
<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-menu
default-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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<script src="js/eui.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
tableData: [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'},
{date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
{date: '2016-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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<link rel="stylesheet" href="../eui/css/eui.css">
</head>
<body>
<div id="app">
<input type="text" placeholder="姓名" v-model="name"><!--双向绑定:v-model="变量"-->
<input type="text" placeholder="工资" v-model="salary">
<input type="text" placeholder="工作" v-model="job">
<!--事件绑定：简写——> @事件名="方法"：【添加点击事件:@click="方法"】-->
<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="操作">
<!--
scope代表每行对应的数据里面的index属性代表下标,
里面的row代表每行对应的数组中的对象
-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="../eui/js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!--gutter:设置间距-->
<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>标签内：加上属性style:【"width: 1200px;margin: 0 auto"】就可以居中了-->
<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">
<!--offset:设置偏移数量————>通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。-->
<el-col :span="20" offset="4"><div class="c1">占24</div></el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!--height属性直接修饰高度。elementUI文档里有定义-->
<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>
<!--练习1：-->
<h1>三部分框：上边头 下边的左边Aside 下边的右边Main</h1>
<!--Aside(在旁边)-->
<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>
<!--练习2：-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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="[]"><!--【:default-openeds="['1', '3']"】：默认打开页面中的导航1和导航3列表-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<script src="js/eui.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
const item = {
date: '2016-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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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><!--direction：方向 vertical：垂直 -->
<span>免费课</span>
<el-divider direction="vertical"></el-divider>
<span>直播课</span>
</div>
</template>
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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><!--24份分栏-->
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0"><!-- offset：偏移 -->
<el-card :body-style="{ padding: '10px' }">
<img src="https://shadow.elemecdn.com/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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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="密码"> <!--输入用户名和密码时，必须要和下面的return{}中进行双向绑定才能在页面输入-->
<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>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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"><!--header属性如果不写的话默认为60 必须改动后页面才不会重叠-->
<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>
<!-- 去掉边框:border: 0 rgba(0,0,0,0):前三个0是黑色，第四个0是完全透明 -->
<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"><!--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="商品名">
<!-- scope.row:代表topArr数组中遍历的对象 -->
<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"><!--每一个分栏的间距为20个像素-->
<el-col span="6" v-for="p in productArr"><!--v-for:遍历数组-->
<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">
<!--外边距底部:margin-bottom-->
<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备12003709号-3 京公网安备 11010802029572号</p>
<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
<p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
</div>
</el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<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:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
{title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
{title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
{title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
{title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
{title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",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:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套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%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",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)代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS(导入本地版的CSS文件) ：【eui.css文件】-->
<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"><!--header属性如果不写的话默认为60 必须改动后页面才不会重叠-->
<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>
<!-- 去掉边框:border: 0 rgba(0,0,0,0):前三个0是黑色，第四个0是完全透明 -->
<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="12">
<el-card>
<img :src="product.url" width="100%" alt="">
</el-card>
</el-col>
<el-col span="12">
<p style="font-size: 25px">{{product.title}}</p>
<el-divider></el-divider>
<p style="font-size: 15px;color: #999">
销量:{{product.saleCount}} 浏览量:{{product.viewCount}}
</p>
<p style="font-size: 25px;font-weight: bold">
￥{{product.price}}
<span style="font-size: 15px;color: #999">
原价:<s>{{product.oldPrice}}</s>
</span>
</p>
<!--二维码开始-->
<el-row gutter="20" style="text-align: center">
<el-col span="8">
<el-card>
<img src="imgs/ewm.jpg" width="100%" alt="">
</el-card>
<span>扫码购买商品</span>
</el-col>
<el-col span="8">
<el-card>
<img src="imgs/ewm.jpg" width="100%" alt="">
</el-card>
<span>扫码关注公众号</span>
</el-col>
<el-col span="8">
<el-card>
<img src="imgs/ewm.jpg" width="100%" alt="">
</el-card>
<span>扫码下载App</span>
</el-col>
</el-row>
<!--二维码结束-->
</el-col>
</el-row>
</el-main>
<el-footer style="padding: 0">
<!--外边距底部:margin-bottom-->
<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备12003709号-3 京公网安备 11010802029572号</p>
<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
<p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
</div>
</el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element(在 Element 之前导入本地版 Vue) ：【vue.js文件】-->
<script src="js/vue.js"></script>
<!-- import JavaScript(导入本地版的eui.jss文件)：【eui.js文件】 -->
<script src="js/eui.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
product: {
title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
price: 233, oldPrice: 598, url: "imgs/a.jpg", saleCount: 2342, viewCount: 999
},
}
}
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
