HTML5+CSS3

汇报人：阿伟

一、本周学习内容：

1、ps的安装，学习背景，背景练习。

2、学习雪碧图，线性渐变，径向渐变，电影卡片练习。

3、学习表格的简介，长表格，表格的样式。

4、表单简介，表单补充。

5、项目搭建，导航条结构的搭建。

6、导航条基本样式。

二、本周知识点总结：

1、上网下载安装ps:

1. 背景：

Background-image  设置背景图片

Background-image：url(“.limg/1.png”)

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色。

如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满。

如果背景的图片大于元素，将会一部分背景无法完全显示。

如果背景图片和元素一样大，则会直接正常显示。

Background-repeat:url(“./image/1.jpg”)

用来设置背景的重置方式：

可选值：

Repeat：默认值，背景会沿着x轴和y轴双方向重复。

Repeat-x:沿着x轴方向重复

Repeat-y:沿着y轴方向重复

no-repeat：背景图片不重复

Background-position  用来设置背景图片的位置

设置方式：

• 通过 top left right bottom center 几个表示方向的词来设置。

例如：background-position：left top;

使用方位词必须要同时指定两个值，如果只写一个，第二值为center.

• 通过偏移量来指定背景图片的位置：

水平方向偏移量

垂直方向偏移量

例如：background-position：50px 100px；

1. 设置背景的范围：

Background-clip

可选值：

Border-box 默认值，背景会出现在边框的下边

Padding-box 背景不会出现在边框，只会出现在，内容区和内边距

Conter-box 背景只会出现在内容区

Background-origin 背景图片的偏移量计算的原点

Padding-box 默认值，

Background-position 从内边距处开始计算

Centent-box 背景图片的偏移量从内容区处计算

Border-box 背景图片的变量从边框处开始计算。

Background-size 设置背景图片的大小；

第一个值表示宽度，第二个值表示高度；

例如：background-size：200px;

如果只写一个，则第二个值默认是auto，

Cover 图片的比例不变，将元素铺满。

例如:background-size:cover;

Contain 图片比例不变，将图片在元素中完整显示：

background-attachment；

背景图片是否跟随元素移动

可选值：

Scroll 默认值，背景图片会跟随元素移动，

Fixed 背景会固定在页面中，不会随元素移动。

总结：

Background-color,background-image,

background-repeat,background-position

Background-size,background-origin.

Background-clip,background-attachment.

Background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性是必须要写的。

注意：background-size必须须写在background-position的后面，并且使用/隔开，background-position/background-size.

Background-right,background-clip 两个样式，orgin 要在clip的前边。

1. 背景练习;

• .box1{

          Width:100px;

          Height:37px;

          Margin:0 auto;

          Background:url(路径)；

          Background-repeat:repeat-x;

}

• 图片属于网页的外部资源，外部资源都需要浏览器单独发送请求加载。浏览器加载外部资源时时按需加载的，用则加载，不用则不加载，像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载。

1. 解决图片闪烁的问题：

  可以将多个小图片统一保存到一个大图片中，然后通过background-position来显示图片的，这样图片会同时加载到网页中，就可以有效的避免出现图片闪烁的问题。这个技术在网页中应用十分广泛，被称为：css-sprite,这种图我们称为雪碧图。

雪碧图的使用步骤：

• 先确定要使用的图标
• 测量图标的大小
• 根据测量结果创建一个元素
• 将雪碧图设置为元素的背景图片
• 设置一个偏移量以显示正确的图片

雪碧图的特点：

   一次性将多个图片加载进页面，降低请求的次数，加快访问的速度，提升用户的体验。

1. 线性渐变：

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。

渐变是图片，需要通过backfround-image来设置，线性渐变，颜色沿着一条直线发生变化：

Linear-gradient()

Liner-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域：线性渐变的开头，我们可以指定一个渐变的方向;

To left,to right,to bottom,to top.

Xxxdeg  deg表示度数，turn表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况，

Repeating-linear-gradient()可以平铺的线性渐变。

1. 径向渐变：

  Radial-gradient()径向渐变（放射性的效果）

默认情况下径向渐变的形状根据元素的形状来计算的

正方形--<圆形

长方形--<椭圆形

我们也可以手动指定径向渐变的大小

Circle, ellipse,也可以指定渐变的位置；

语法;

Radial-gradient(大小 at位置,颜色位置，颜色位置，颜色位置，)

大小：circle 圆形

      Ellipse 椭圆

      closest-side 近边

Closet-corner 近角

Farthest-side 远边

Farthest-corner 远角

位置：

 Top right left center bottom

1. 表格的简介：

在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表，人名单，成绩单...

  同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格。<table>

在table中使用tr表示表格中的一行，有几个tr就有几行。<tr>

  在tr中使用td表示一个单元格，有几个td就有几个单元格：

<td>a1</td>

<td>b1</td>

.......

Rowspan  纵向的合并单元格

Colspan  横向的合并单元格

1. 长表格：

      可以将一个表格分成三个部分：

          头部  thead

       主体   tbody

       底部   tfoot

th表示头部的单元格

<table border=”1” width=”50%”align=”center”>

表格的样式;

Border-spacing:指定边框之间的距离

Border-collapse:collapse;设置边框的合并，

Even:偶数        odd:奇数

如果表格中没有使用table而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全部都放到tr不是table的子元素。

默认情况下元素在td中是垂直居中的，可以通过vertical

1. 表单简介：

表单：

在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器。

使用form标签来创建一个表单，

Form的属性：

Action 表单要提交服务器的地址，

例如：<form action=”target.html”>

文本框（注：数据要提交到服务器中，必须指定name）

<input type=”text”name=”hello”>

提交按钮

<input type=”submit”value=”注册”>

密码框

<input type=”password”name=”password”>

<br><br>   换行

单选按钮：（像这种选择框，必须要指定一个）

<input type=”radio”name=”hello”value=”a”>

<input type=”radio”name=”hello”value=”a”>

<br><br>

value属性，value属性最终会作为用户的填写的值，

Checked 可以将单选按钮设置为默认选中。

多选框：

      <input type=”checkbox”name=”test”value=”1”>

<input type=”checkbox”name=”test”value=”2”>

<input type=”checkbox”name=”test”value=”3”checkde>

<br><br>

下拉列表：

   <select name=”haha”>

         <option value=”i”>选项一</option>

<option value=”ii”>选项二</option>

<option value=”iii”>选项三</option>

</select>

三、下周学习计划：

1. 二维码的下拉，添加过渡效果。
2. 头部logo,头部导航条，头部导航下拉层。
3. 右侧的搜索框，左侧的导航条，完成banner.
4. 右侧工具条，中间的广告框。
5. 项目补充，过渡，米兔练习。
6. 动画，奔跑的少年。

                              web前端工作室

                               2021年11月19日