CSS 背景设置 高级元素使用 form表单
前端 CSS 学习目录导航
注意的是：我们实现书写前端代码的时候，我们的书写步骤:
1.先实现书写整体的 html 结构
2.重置 CSS 样式
3.先整体，在局部
4.去除我们的重复的代码，实现抽取相同的部分，不同的部分实现单独书写
到了后面的实现的时候，我们还需要进行的就是思考js的实现
要不然自己写的代码永远是`依托答辩` (博主以前感觉CSS不重要，但是通过一些项目洗礼后，发现了CSS的重要性)
CSS 设置背景
- 首先需要注意的就是我们在网页的实现设置的时候，为了我们的网页更加的好看美观，就需要设置我们的背景来实现美化网页，这个就是我们的背景出现的原因。
-
设置背景颜色（
background-color）- 这个属性的设置就是来实现设置的是我们的背景色的，相当于就是 color
background: red
-
设置背景图片（
background-image）- 这个属性的实现设置就是来设置我们的背景图片的，这个是会盖在（不是覆盖）我们设置的背景色的，就是优先显示背景图片
- 这个的设置的时候，需要的是我们的那个: 使用CSS中的
url函数来实现导入我们的图片的路径 - 这个背景颜色是会设置多张的，第一张会默认显示在我们的最上面，默认的层叠的显示图片
background-image: url("图片路径")
-
设置背景是否平铺（
background-repeat）-
当我们作为背景的盒子很大的时候，我们的图片背景就会导致平铺的特点
-
但是大部分的情况下都是不希望背景图片实现平铺的
-
可以设置的属性值有:
background-repeat: repeat这个是默认的设置，就是实现图片在背景盒子中的平铺background-repeat: repeat-x这个就是实现的是我们的图片只是在x轴上面实现平铺的效果background-repeat: repeat-y这个就是实现的是我们的图片只是在y轴上面实现平铺的效果background-repeat: npo-repeat这个就是实现的是我们的图片在背景中不实现平铺的效果
-
-
设置背景大小（
background-size）-
这个属性就是来实现的是我们的设置我们的背景的尺寸的，相当于就是直接设置盒子大小类似的设置方法
-
可以实现设置的值含有：
containcover- 或者说直接设置具体的
宽高值或者说百分比
-
-
设置背景位置（
background-position）-
这个的值的设置就是实现的是截取我们的一个图片中的某个部分的图片，来实现设置我们的背景的
-
这个就需要设计到我们的精灵图的部分的知识或者雪碧图了，设置的还是我们的像素值（
两个） -
或者说直接设置我们的关键字:
- 水平方向的关键字含有: left center right
- 垂直方向的关键字含有：top center bottom
- 但是我们需要注意的是，我们的背景图的实现的时候，只设置一个关键字的时候，那么另一个默认的就是:
center
-
-
设置背景是否跟随页面滚动（
background-attachment）-
这个属性的实现设置就是我们的背景图的设置是否随着浏览器视口固定还是随着区块实现滚动的一个属性
-
可以实现设置的属性值含有：
scroll就是说明的是我们的背景图相对元素是固定的，不会随着内容实现滚动local就是背景是相对内容实现的固定，如果一个元素具有一定的滚动的机制，那么这个也会实现随着元素的内容一起滚动fixed这个就是实现的是我们的背景图相对于我们的视口实现固定，不实现滚动，一直在视口的一个默认的位置
-
-
设置背景混合属性（
background）- 这个就是我们的一切的背景的一个缩写的属性
background: b-color b-image b-position/[b-size] b-repeat b-attachment
注意我们的居中问题的解决的方式:
text-align 的实现设置是将我们的父盒子中的内容实现居中，所以说，就是设置在我们的父元素中的
但是如果我们实现使用的是我们的 margin 来实现的我们的居中，这个属性的设置，是控制的我们的整个块级元素，那个需要实现居中就那个加
HTML 高级元素的使用
-
列表元素
-
在实际的开发一个网页的时候，我们经常实现的是使用我们的列表元素来实现我们的页面的展示
-
在实现开发的时候，我们实现的方式含有两种：
- 1.实现使用我们的div盒子来实现 （现在的常用模式开发列表）
- 2.使用标准的列表元素来实现
-
有序列表：
ol li[（ordered list）（list item）]- 默认的显示就是用数字来实现的一个列表的显示，
1, 2, 3 - 在实现一些属性的重置的时候，对于列表而言我们常实现的设置是我们的:
list-style: none -
<ol> <li></li> <li></li> </ol>
- 默认的显示就是用数字来实现的一个列表的显示，
-
无序列表：
ul li[（unordered list）（list item）]- 默认的显示模式就是我们的
小黑点 - 但是还是需要对列表的样式实现一定的重置，还是通过的我们的
list-style来实现的设置 -
<ul> <li></li> <li></li> </ul>
- 默认的显示模式就是我们的
-
自定义列表：
dl dt dd[（definition list）（definition term）（definition description）]term这个就是我们的自定义列表中的每一项，description这个就是实现的是我们的对每一项的描述-
<dl> <dt></dt> <dd></dd> <dd></dd> <dt></dt> <dd></dd> <dd></dd> </dl> - 没事可能开始书写CSS的时候，有点乱，但是只不过，只要不考虑优化的问题，坚决不优化（
玩笑话）
-
-
表格元素（
有很多元素还是为了体现我们的语义化的目的）-
表格常见的元素
table表格tr（table row） 表格行th（table head）表格头中的数据元素td（table data） 表格主体中的数据元素- 在调整我们的表格的样式的时候，我们不要使用我们的官网的属性值了，要使用我们的CSS来实现设置属性
-
thead表格的表头 -
tbody表格的主体 -
tfoot表格的脚注 -
caption表格的主题 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 开始实现各位i我们的单元格添加格子 */ table { text-align: center; border-collapse: collapse; /* 实现的是将我们的表格的边框实现合并 */ } td, th { border:1px solid black; padding: 5px; } </style> </head> <body> <!-- 还是元素的语义化的意思，知识这些标签默认的添加了对应的CSS样式而已 --> <!-- 股票的时候用的多，表格 --> <table> <caption>表格的初体验</caption> <!-- 表格的表格头 --> <thead> <tr> <th>第一部分</td> <th>第二部分</td> <th>第三部分</td> </tr> </thead> <!-- 表格的主体部分 --> <tbody> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </tbody> <!-- 表格的脚注 --> <tfoot> </tfoot> </table> </body> </html> -
表格的常需要解决的问题
-
实现边框的单元格边框的合并的方式
border-collapse: collapse;
-
实现表格单元格的合并为一个单元格
-
跨列合并，使用
colspan- 在需要开始合并的
列书写我们的这个属性，并且去掉需要实现合并的td元素 - 但是需要注意的是，我们的那个最终还是需要书写跨
几个的
- 在需要开始合并的
-
跨行实现合并，使用
rowspaan- 在需要开始合并的
行书写我们的这个属性，并且去掉需要实现合并的tr中对应的td元素
- 在需要开始合并的
-
-
表格是可以用来实现开发我们的课表的，但是为了好看，所以说还是可以添加一些CSS样式的
-
-
HTML 中的表单元素
-
HTML中的表单元素是我们和用户实现交互的重要方式，也是前端（
front-end） 和 后端 （back-end）的交互方式之一 -
使用的场景含有:
- 前端搜素功能的实现
- 前端注册功能的实现
- 前端登录功能的实现
- 修改编辑功能的实现
-
常见的表单元素含有:
form其他的表单元素一般都是这个元素的后代input普通文本、单选框、复选框、按钮等元素textarea文本域的实现，可以用来实现我们的发表评论的地方常见，以及富文本编辑器的时候可以常见select option这个就是实现的是我们的下拉框的实现button就是实现的是我们的按钮的功能的实现label这个就是来实现的是我们的提高用户体验的一个常用的元素
-
input元素-
前后端很常用的一个元素，但是后面的话，常用的还是使用我们的 ajax 来实现前后端的交互，大部分的地方的话
-
这个元素就是来实现的是完成一些特定的功能的一个表单元素，但是功能是通过属性
type的值来实现的text这个就是普通的文本框（明文输入）password这个就是我们的密码框（密文输入）radio单选框checkout多选框button可以实现的是我们的最终的取代按钮的另一种形式reset就是重置的功能的实现submit用来实现的功能是象后端提交数据的功能file实现的是上传文件的功能通过给 input 元素实现设置不同的属性值，那么最终的实现的功能的效果就会有很多的不同
-
同时这个元素还具备一个十分重要的一个属性
name-
通过设置这个属性，就可以来实现决定我们给后端传递的数据是通过什么字段来实现的传送的
-
比如说，我们的这个
name属性的实现设置的时候，单选框和多选框的这个属性的设置绑定要一致 -
这个属性的实现还和我们的 input 的一个属性有关
- 每一个input框中的属性值，都是一个
value属性来存储的，可以通过这个属性来实现我们的显示默认值的效果 - 前后端交互的时候，就是把这个 name 的属性值 和 value的值实现提交给我们的前端
- 每一个input框中的属性值，都是一个
-
-
同时我们还是可以实现设置的属性为我们的 :
id属性值- 通过这个属性值可以方便我们的
jsCSSlabel标签来实现我们的绑定input label元素和input的实现绑定的方式: 就是将我们label的for和input的id值进行设置相同即可
- 通过这个属性值可以方便我们的
-
-
textarea-
常用来实现设置的值含有我们的 行和列 的实现设置，行:
row列：col这个就可以实现设置我们的文本域的列数和行数 -
但是我们的文本域默认是可以拖动的，但是我们是可以设置值来实现我们的禁止文本域的拖动
-
控制我们的文本域的拖动方式：
resize: none禁止缩放resize: horizontal水平缩放resize: vertical垂直缩放resize: both就是默认值
-
-
select option- 这个的实现效果就是我们的下拉框的选择用于对这个的选择
- 默认只可以实现选择的是一个，但是当我们实现的时候，可以添加一个属性来实现我们的选择多个
multiple实现的就是我们的可以选择多个- 通过添加属性:
selected就可以实现我们的直接被选中
-
form 元素-
form 元素实现的就是我们的将整个表单元素全部包括起来，其他的表单元素全部都是这个元素的子元素
-
然后 form 元素具有的两个属性就是：
methodsaction-
methods这个属性就是来实现的是我们的向后端发送请求的方式，一般分为我们的get请求和post请求- 一般的话，表单元素的实现设置都是设置为我们的 post 请求，因为一般都是需要传递数据给服务端的
-
action这个属性就是实现的是我们的向那个服务器地址实现传送数据，然后后端人员在对这些数据进行一定的处理即可- 但是我们这种方式默认的是我们的那个
get请求，在我们的服务器记录的关于用户的信息一定要是密文的 - 一定要保护我们的用户的信息，这个必须注意一哈的
- 但是我们这种方式默认的是我们的那个
-
-
注意我们的，我们现在的实现的前后端交互大部分还是使用的是我们的 ajax 请求了，但是这个还是需要了解一哈的
注意一哈的是，现在到这里了，我们需要注意一点的是：我们平时书写前端项目的时候，数据的来源都是来自于我们自己的伪造的
但是后面前后端交互的时候，数据都是从我们的服务器端获取的，服务器端从数据库中获取数据
然后返回数据给前端，前端再利用ui给的图和一些前端知识，将数据展示到客户端页面
说这些，就是因为，有很多的小伙伴只是前端或者纯后端的人员，对这个过程还不了解，所以说我希望从接触form表单这个前后端交互的形式
开始就可以知道前端数据的来源于那里
开发岗开发工程师:
前端: 就是实现的是我们的对客户端交互页面编码
后端: 就是实现的是我们的对数据库的操作，以及前端传过来的数据进行处理
