汇报人:阿伟
一、本周学习内容:
1、ps的安装,学习背景,背景练习。
2、学习雪碧图,线性渐变,径向渐变,电影卡片练习。
3、学习表格的简介,长表格,表格的样式。
4、表单简介,表单补充。
5、项目搭建,导航条结构的搭建。
6、导航条基本样式。
二、本周知识点总结:
1、上网下载安装ps:
- 背景:
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;
- 设置背景的范围:
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的前边。
- 背景练习;
- .box1{
Width:100px;
Height:37px;
Margin:0 auto;
Background:url(路径);
Background-repeat:repeat-x;
}
- 图片属于网页的外部资源,外部资源都需要浏览器单独发送请求加载。浏览器加载外部资源时时按需加载的,用则加载,不用则不加载,像我们上边的练习link会首先加载,而hover和active会在指定状态触发时才会加载。
- 解决图片闪烁的问题:
可以将多个小图片统一保存到一个大图片中,然后通过background-position来显示图片的,这样图片会同时加载到网页中,就可以有效的避免出现图片闪烁的问题。这个技术在网页中应用十分广泛,被称为:css-sprite,这种图我们称为雪碧图。
雪碧图的使用步骤:
- 先确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量以显示正确的图片
雪碧图的特点:
一次性将多个图片加载进页面,降低请求的次数,加快访问的速度,提升用户的体验。
- 线性渐变:
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果。
渐变是图片,需要通过backfround-image来设置,线性渐变,颜色沿着一条直线发生变化:
Linear-gradient()
Liner-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域:线性渐变的开头,我们可以指定一个渐变的方向;
To left,to right,to bottom,to top.
Xxxdeg deg表示度数,turn表示圈
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况,
Repeating-linear-gradient()可以平铺的线性渐变。
- 径向渐变:
Radial-gradient()径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形--<圆形
长方形--<椭圆形
我们也可以手动指定径向渐变的大小
Circle, ellipse,也可以指定渐变的位置;
语法;
Radial-gradient(大小 at位置,颜色位置,颜色位置,颜色位置,)
大小:circle 圆形
Ellipse 椭圆
closest-side 近边
Closet-corner 近角
Farthest-side 远边
Farthest-corner 远角
位置:
Top right left center bottom
- 表格的简介:
在现实生活中,我们经常需要使用表格来表示一些格式化数据:课程表,人名单,成绩单...
同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格。<table>
在table中使用tr表示表格中的一行,有几个tr就有几行。<tr>
在tr中使用td表示一个单元格,有几个td就有几个单元格:
<td>a1</td>
<td>b1</td>
.......
Rowspan 纵向的合并单元格
Colspan 横向的合并单元格
- 长表格:
可以将一个表格分成三个部分:
头部 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
- 表单简介:
表单:
在现实生活中表单用于提交数据,在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器。
使用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>
三、下周学习计划:
- 二维码的下拉,添加过渡效果。
- 头部logo,头部导航条,头部导航下拉层。
- 右侧的搜索框,左侧的导航条,完成banner.
- 右侧工具条,中间的广告框。
- 项目补充,过渡,米兔练习。
- 动画,奔跑的少年。
web前端工作室
2021年11月19日