温馨提示：被【】包裹的是专有名词，详细介绍见下文的恋爱宝典，你可以在目录中快速找到它们，有任何问题/建议，欢迎随时微信我，我是朝阳 13908056224！
经过第3天的补充完善，约会邀请函的内容已经很丰富了。
零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
但依然有点拿不出手，下面让我们一起来把它打扮漂亮，
恭迎前端化妆神器——【CSS】 ，闪亮登场！
最终效果
因鄙人非专业美工，配色或布局有不合理的地方，欢迎留言指正！
话不多说，直接开始吧！
div 盒子
先用一个盒子把所有内容装起来，以便将约会邀请函定位到整个页面正中间，并添加背景图片和背景色，此时便需要用到 html 中的 div 标签。
div 标签本身并不会在页面上渲染任何内容，只是一个矩形容器，用于将页面上的元素包裹起来，以便将包裹起来的元素作为一个整体来进行【定位】或添加【样式】。（类似PPT中选中多个元素，创建一个组合）。
在div盒子中可以放裸奔的文字，如：
<div> 我是div盒子中裸奔的文字 </div>
也可以在div盒子中放其他div盒子，如：
<div> 我是最外面的大盒子 <div>我是大盒子里放的第1个小盒子</div> <div>我是大盒子里放的第2个小盒子</div> </div>
默认情况下，div盒子是完全透明不可见的，宽度占满整行，高度具有弹性（就像紧身衣一样），如果没有给div指定宽度或高度，div盒子的高度将由div盒子中元素的高度决定（如果div内仅有文字，则高度由【行高】决定，而不是文字大小！）。
对于 div盒子，最重要的便是要理解 “”盒模型”，详见我的博客 《CSS 盒模型 VS IE 盒模型》
背景图片 vs 背景色
使用div盒子将整个页面的内容包裹好后，便可以通过给div盒子添加背景图片，来给页面添加背景图片。
因控制背景图片的样式较多，推荐通过class属性来添加样式，具体代码如下：
<div class="page"> …… 此处省略了其他代码 </div>
给包裹整个页面的div盒子添加了class属性，属性值为 page
- html标签的class属性用于给html标签添加样式，class的属性值可以是多个样式名，用空格隔开，如
class = "page red"
<style> .page { box-sizing: border-box; width: 750px; padding: 200px 80px 30px 80px; margin: 0 auto; line-height: 32px; background-color: rgb(244, 238, 232); background-image: url(./images/背景.png); background-position: center top; background-repeat: no-repeat; } </style>
html中的style标签内用于写页面相关的样式信息，使用的语言是【CSS】
.page是CSS中类选择器的写法，表示给页面中class的属性值包含page的元素添加样式
大括号中为具体的样式描述，格式为：样式名:样式值;
样式 box-sizing 用于描述采用哪种盒模型，详见 《CSS 盒模型 VS IE 盒模型》，样式值 border-box表示使用 IE 盒模型：宽度 = 内容宽度+padding内边距+border边框
-
- 样式
width用于描述div盒子的宽度，样式值为750px即 750像素
样式 padding 用于描述div盒子的内边距，样式值为 200px 80px 30px 80px 表示
—— 上内边距为 200px
—— 右内边距为 80px
—— 下内边距为 30px
—— 左内边距为 80px
样式 margin 用于描述div盒子的外边距，样式值为 0 auto 表示
—— 上外边距为 0px
—— 下外边距为 0px
—— 左外边距为 auto （自动分配）
—— 右外边距为 auto （自动分配）
重要技巧提示： 当div盒子的左外边距和右外边距都是 auto 即自动分配时，div盒子会在整个页面/父div盒子中水平居中！
样式 line-height用于描述div盒子中内容的【行高】，样式值为 32px 即两倍【行高】（浏览器中文本的默认大小为16px）
样式 background-color 用于描述div盒子的背景色，样式值为 rgb(244, 238, 232) 即浅棕色，采用的RGB颜色表示法（详见下文的 颜色 color ）
样式 background-image 用于描述div盒子的背景图片，样式值为 url(./images/背景.png) ，其中 url() 是 【CSS函数】，用于解析文件的地址，./images/背景.png 为背景图片的相对于当前页面的存储地址。
样式 background-position 用于描述背景图片的位置，样式值为center top即水平方向居中，垂直方向置顶。更多详情见 《background-position详解》
样式 background-repeat 用于描述背景图片是否重复，样式值为no-repeat即不重复。另一个样式值为 repeat 即重复，当整个背景（通常是div盒子）比背景图片大时，会像贴瓷砖一样，不断重复背景图片来铺满整个背景。
综上，请记住下方的核心代码：
背景图片 background-image
background-image: url(./images/背景.png); background-position: center top; background-repeat: no-repeat;
背景色 background-color
background-color: rgb(244, 238, 232);
至此，约会邀请函的效果如下：
下一步，让标题水平居中，并换个颜色，给标题 h1 标签添加属性值为 title的 class 属性，继续在 style 标签（还是上文中的那个 style 标签，所有使用css描述的 class 样式都写在一个style 标签中即可）中添加相关的样式：
<h1 class="title">一份诚挚的约会邀请</h1>
.title { text-align: center; color: #ca716a; }
水平对齐 text-align
样式 text-align 用于描述文本在水平方向上的对齐方式，有以下样式值：
- left 【默认值】——水平靠左对齐
- center ——水平居中对齐
- right ——水平靠右对齐
颜色 color
样式 color 用于描述文本的颜色，有以下样式值：
代表颜色的英文单词 —— 如 red 红色、green 绿色、blue 蓝色、orange 橙色、gray 灰色等，不区分大小写 。
transparent —— 表示透明 。
currentColor —— 表示与【父元素】的color 的样式值相同。
16进制的颜色值 —— 如 #FF0000、#0000FF、#00FF00等，所有#aabbcc的形式，都能简化为#abc
rgb() 颜色表示法 —— 用红red、绿green、蓝blue 这三种颜色根据不同的配比混合得到想要的颜色（三原色原理），每种原色有256级(0-255)亮度，支持百分比值，如红色就是 rgb(255,0,0)，绿色为rgb(0,255,0)，蓝色为rgb(0,0,255)，黑色为rgb(0,0,0)，白色为rgb(255,255,255)。
rgba() 颜色表示法 —— 在rgb的基础上，增加了A（Alpha通道，即透明度，取值为0-1），如 rgba(0, 0, 255, 0.5) 表示半透明的蓝色。
拾色器 FSCapture
使用拾色器（如 FSCapture.exe）可以轻松获取到以上各种颜色值
百度网盘下载链接：https://pan.baidu.com/s/1C1NiNGxWOnxHX5Q-911Ulg
提取码：epe8
小标题
页面中经常会有用于区分信息模块的小标题，比如约会邀请函中的
和
小标题的样式通常是加粗，并与主题色相同，所以给它们的class属性添加上样式 subTitle
<p class="subTitle">详细时间地点信息如下：</p>
<p class="subTitle">温馨提示：</p>
.subTitle { font-weight: bold; color: #ca716a; }
文本加粗 font-weight
对于需要强调，或希望更显眼的文字，通常需要加粗一下，这时便要用到样式 font-weight ，它有以下样式值：
- normal 【默认值】正常粗细，无加粗效果
- bold 【常用值】加粗
具体数值：100 200 300 400（等同于normal） 500 600 700（等同于bold） 800 900
相对值（相对于父级元素）：lighter 比父元素的文本细一点 bolder 比父元素的文本粗一点
因为加粗的样式使用频率非常高，通常会在公共样式里定义一个样式名为 b 的样式类
.b { font-weight: bold; }
然后在需要加粗的文字上，添加上这个样式即可，如：
<li><span class="b">时间：</span> 2022年12月28日19:00-21:00</li> <li><span class="b">地点：</span>太平洋电影院（春熙路店）</li> <li><span class="b">电影：</span>《爱情神话》</li>
行内文本 span
诶，这里出现了一个新的 html 标签 span ,它通常用于包裹在一行中的部分文本。
<li><span class="b">交通：</span>2号地铁春熙路站D口</li> <li><span class="b">碰头：</span>18:45在电影院正门口</li>
span 标签不会在页面上渲染任何效果，也不会像 p或div那样撑满整行，仅用于对文本进行简单的打包，以便给指定文本添加样式。
style 属性
基于之前的打扮，我们会发现还存在下图中的三个问题
首先来解决问题 1. 间距太小
解决方案很简单，增加图片的上外边距即可。
这里介绍一种新的添加样式的方式——使用 html 标签的 style 属性
<img style="margin-top: 10px" height="240" src="./images/电影海报《爱情神话》.jpg" alt="《爱情神话》的电影海报" />
在 img 标签上添加 style 属性，属性值为要添加的样式 margin-top: 10px
撑满整行 width=“100%”
接着解决问题 2. 宽度不同没对齐。
自从将整个页面的宽度 width 设置为 750px 后，因图片和视频的宽度之和大于 750 px ，视频便因页面宽度不够，自动换到了下一行。
之前因图片和视频在同一行，所以将它们设置为相同的高度 height="240" ，现在变成了两行，为了美观，应该改为相同的宽度。
具体宽度值设置为多少好呢？如果页面宽度改变了，是否需要重新修改宽度呢？有没有一劳永逸的方法呢？
当然有，那就是使用百分比值！
让图片和视频的宽度永远和父元素（本案例中为class值为page的div）的宽度保持固定的比例，这样无论页面宽度如何变化，图片和视频的宽度都能自适应改变。
经测试，本案例中将宽度值设置为 100% （撑满整行）效果最佳，所以修改后代码如下：
<img style="margin-top: 10px" width="100%" src="./images/电影海报《爱情神话》.jpg" alt="《爱情神话》的电影海报" /> <video width="100%" controls> <source src="./videos/《爱情神话》宣传片.mp4" /> </video>
最后一个问题 3. 豆瓣影评超链接的样式太low，和图片视频不匹配。
可以对超链接的样式进行优化，不过考虑到点击超链接后，会跳转到豆瓣影评页，这种交互体验不太友好，我打算将超链接改造成内嵌网页。
内嵌网页 iframe
<iframe class="win" src="https://movie.douban.com/subject/35376457/" frameborder="0" ></iframe>
iframe标签用于在当前网页中内嵌另一个网页，有点像在当前网页中开了一个小l浏览器窗口，可以通过这个窗口访问其他网页。- src 属性用于指定要显示的目标网页的网址
- frameborder 属性用于指定窗口的边框效果，默认值为1，显示1px宽度的边框，此处为了美观，设置为 0，隐藏了边框。
配套样式为
.win { width: 100%; height: 1000px; }
至此，整个化妆已经完工，却意外发现，好像没有留自己的联系方式……
赶紧加上！
拨打电话 tel
<li> 若迷失方向随时联系我 <a href="tel:13908056224">13908056224</a> ，我来接你！ </li>
仍然是使用 a 标签，不过 href 的属性值改成了拨打电话所特有的格式
tel:电话号码
学会了吗？
完整代码
<div class="page"> <h1 class="title">一份诚挚的约会邀请</h1> <p>你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？</p> <p class="subTitle">详细时间地点信息如下：</p> <ul> <li><span class="b">时间：</span> 2022年12月28日19:00-21:00</li> <li><span class="b">地点：</span> 太平洋电影院（春熙路店）</li> <li><span class="b">电影：</span>《爱情神话》</li> <img style="margin-top: 10px" width="100%" src="./images/电影海报《爱情神话》.jpg" alt="《爱情神话》的电影海报" /> <video width="100%" controls> <source src="./videos/《爱情神话》宣传片.mp4" /> </video> <iframe class="win" src="https://movie.douban.com/subject/35376457/" frameborder="0" ></iframe> <li><span class="b">交通：</span>2号地铁春熙路站D口</li> <li><span class="b">碰头：</span>18:45在电影院正门口</li> </ul> <p class="subTitle">温馨提示：</p> <ol> <li>晚上天气微凉，多穿点衣服注意保暖；</li> <li>年关将近，春熙路人多，留意提防小偷；</li> <li> 若迷失方向随时联系我 <a href="tel:13908056224">13908056224</a> ，我来接你！ </li> </ol> </div> <style> .page { box-sizing: border-box; width: 750px; padding: 200px 80px 30px 80px; margin: 0 auto; line-height: 32px; background-color: rgb(244, 238, 232); background-image: url(./images/背景.png); background-position: center top; background-repeat: no-repeat; } .title { text-align: center; color: #ca716a; } .b { font-weight: bold; } .subTitle { font-weight: bold; color: #ca716a; } .win { width: 100%; height: 1000px; } </style>
恋爱宝典
CSS
CSS的全称为层叠样式表，是Cascading Style Sheets的首字母缩写，主要用途就是修改页面的样式，给 html 化妆的。
如果把 html 比作一个房子（你的家），div盒子标签就是隔断房间的墙壁，img图片标签是挂在墙上的画，video视频标签是客厅里的电视机，audio音频标签是音乐播放器，h标题标签是大门上的门牌号，p段落标签是你在每间房中设置的不同功能的区域（比如书桌那片是学习区，铺着瑜伽垫的那块是健身区、摆着沙发那块是休息区……），span行内文本标签是拼接成每个房间地面的一块块地板，大部分a超链接标签是把你传送到不同朋友房子的超时空传送器，也有少数a超链接标签被改造成了你家里的电话机，ul无序列表标签是你写在备忘录里的待办清单，ol有序列表标签是你贴在冰箱上的常用菜谱，iframe内嵌网页标签是你家里的魔镜，通过它你可以足不出户看到任何一个朋友家里的实时情况，甚至隔空在朋友家的留言板上贴上你的留言！
那么css 是什么呢？ css 就是你花大价钱请来的装修公司，她最擅长的就是帮你把家里设计布置成任意你想要的模样！
定位
定位即固定位置，我们可以将网页看做一个标准的四四方方的矩形房间，每一个html标签都是放在房间里的物品，默认情况下，所有物品都是从上向下、从左到右依次排列的，如果当前行放不下了，就会自动换到下一行。
为了更精准的控制元素的位置，可以使用【相对定位】或【绝对定位】，另外还有固定定位和黏性定位（更为复杂些，以后再学！）
相对定位
相对定位即相对于自己原来的位置，进行位置调整。
通过给标签添加样式 position: relative;可对元素进行相对定位，然后修改以下四个样式值，来确定具体位置：
- left：右移
- right：左移
- top：下移
- bottom：上移
如下范例，原本蓝盒子就在红盒子正下方
给蓝色盒子添加相对定位的样式后，效果如下：
position: relative; top:40px; left: 50px;
绝对定位
绝对定位通常是相对于整个网页进行定位，但当父/祖元素外存在相对定位的元素时，将相对于最近的相对定位的元素计算距离
通过给标签添加样式 position: absolute;即可对该元素进行绝对定位，然后修改以下四个样式值，来确定具体位置：
（如果不设置以下四个样式值，元素会保留在原位置不动！）
top —— 元素距离顶部的距离
bottom—— 元素距离底部的距离
left —— 元素距离左侧的距离
right —— 元素距离右侧的距离
通常指定水平和垂直方向，各一个样式即可确定最终位置，范例如下：
<div class="box"></div>
.box { position: absolute; top:40px; left: 40px; }
样式
在计算机的专业术语中，样式表示元素的模样和格式，不同的html标签元素有着各自不同的特有样式，比如最常见的文本样式如下：
文本样式
对于文字而言，常用的样式有：
- 文本大小 font-size，如 font-size:20px;
- 文本粗细 font-weight，如 font-weight: bold;
- 文本字体 font-family，如 font-family: “微软雅黑”
- 文本颜色 color，如 color:red
- 文本装饰线
/* 没有装饰线 */ text-decoration-line: none; /* 上划线装饰 */ text-decoration-line: overline; /* 贯穿线装饰 */ text-decoration-line: line-through; /* 下划线装饰 */ text-decoration-line: underline; /* 支持同时设置多个属性——如上划线装饰和下划线装饰同时出现 */ text-decoration-line: underline overline;
- 文本装饰线的风格（类型）
/* 实线 */ text-decoration-style: solid; /* 双实线 */ text-decoration-style: double; /* 点线 */ text-decoration-style: dotted; /* 虚线 */ text-decoration-style: dashed; /* 波浪线 */ text-decoration-style: wavy;
行高 line-height
行高，是两行文字“基线”之间的垂直距离
CSS函数
在计算机术语中，函数是指一段可以被引用的具有特定功能的代码。
作为主要功能是负责样式的CSS，有存在一些很实用的函数，比如上文提到的url()图片地址函数，通过传入图片地址，就能让css获取到该图片。
background-image:url( "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
父元素
html标签相互包裹嵌套后，便会产生各种不同的关系，比如：
<div class="father"> <div class="child1"></div> <div class="child2"></div> </div>
最外面的div盒子是里面两个div盒子的父元素；
里面两个div盒子是外面div盒子的子元素。
默认值
默认值，即当没有通过代码修改或指定设置时，系统默认给属性或样式设置的值。
常用值
常用值，即该属性/样式经常被设置的值。
说不完的情话
- 你娉婷婉约的风姿，娇艳俏丽的容貌，妩媚得体的举止，优雅大方的谈吐，一开始就令我刮目相看。
- 在风吹散你的头发时，我简直着魔了：在闪闪发光的披肩柔发中，在淡淡入鬓的蛾眉问，在碧水漓漓的眼睛里，你竟是如此美丽可人!
- 在人流中，我一眼就发现了你。我不敢说你是她们中最漂亮的一个，可是我敢说，你是她们中最出色的一个。那健美的身材，优雅迷人的风度，尤其是那一头乌亮的秀发，有一种说不出的魅力。
- 女人之所以美丽，是因为有好心情;之所以潇洒，是因为有自信;之所以有气质，是因为有极佳的涵养;之所以告诉你，是因为你占全了！
