day6-李大人part1

day6

一：鼠标样式curson：

• pointer：手型
• wait：等待
• help：帮助
• text：文本
• crosshair：十字状

二：边框属性

margin：auto可以使得一块内容在一个区域内居中

border属性影响盒子的可见区域

2·1边框宽度：

​ border-width：数值+px

2·2边框样式：

border-style：

• —solid 实线
• —dashed 虚线
• —dotted 点线
• —double 双线

2·3 边框颜色：

​ border-color：

• —颜色；默认情况下颜色和字体颜色保持一致
• —transparent（表示边框颜色为透明色）

2·4 复合写法：

border：宽度 样式  颜色；

2·5 单方向的边框

• border-top（bottom,left,right）：宽度 样式 颜色；

• border-top（bottom,left,right）：none；（去掉某一边框）

三：列表属性

3·1： 列表符号类型

​ list-style-type：

• —disc 实心圆
• —circle 空心圆
• —square 实心方形
• —none 去掉列表符号

3·2：列表符号位置

​ list-style-position

• —inside 列表里面
• —outside 列表外边

3·3：列表符号图片

​ list-style-image：url（）

​ {不常用，无法控制图片的大小和位置，一般使用背景图片设置}

3·4复合写法

​ list-style：none（去掉项目符号）

四：背景属性

4·1：背景色

​ background-color：颜色（默认是透明色）

4·2：背景图片

​ background-image：url（路径）;

• 背景图一般情况不占位
• 默认情况下重复

4·3：背景图片重复

​ background-repeat

• —repeat 重复
• —repeat-x 在x轴重复
• —repeat-y 在y中重复
• —no-repeat 都不重复

4·4：背景图片的位置

​ background-position：水平，垂直 ；

• 数值+px

• 关键字：水平（left、center，right）

  ​ 垂直（top，center，bottom）

• 只设置一个值的时候，第二个值默认是居中的

4·5：背景图的复合写法：

​ background：背景色，背景图，重复，背景位置（背景色默认为透明色）

4·6：img标签和背景图之间的区别

• img标签引入的图片占位/ 背景图一般不占位（设置缩进可以绕开背景图）
• img引入的图片一般作为网页的内容/ 背景图一般用来修饰的
• img属于网页的内容/背景图属于网页的结构，背景图上可以显示文字、插入图片、表格等

4·7：背景图片的固定

​ background-attachment：

• scroll：背景图像随着对象的内容滚动
• fixed：背景图像固定

五：浮动

5·1：浮动属性float：

• —none 默认值

• —left左浮动

• —right右浮动

• 应用场景：使纵向排列的元素横向浮动（一般设置在兄弟元素身上）

• 特性：1·浮动元素会从父元素的边缘按个排列

  ​ 2·添加浮动的元素会脱离文档流，后边的元素会占据浮动元素的位置（也就是浮动元素会遮挡后面的元素，但是不会遮挡文字，因此可以实现文字环绕图片）

  ​ 3·当父元素的宽度不足以容纳浮动元素的时候，浮动元素会换行显示（依据浮动的方向进行换行）

  ​ 4，浮动元素会影响后面的兄弟，但是不会影响前面的兄弟

六：网站样式的书写步骤

• 1·清除样式

• 2·从外部开始写样式

• 3·特殊的地方添加选择器进行特殊标记
  当父元素的宽度不足以容纳浮动元素的时候，浮动元素会换行显示（依据浮动的方向进行换行）

  ​ 4，浮动元素会影响后面的兄弟，但是不会影响前面的兄弟

六：网站样式的书写步骤

• 1·清除样式
• 2·从外部开始写样式
• 3·特殊的地方添加选择器进行特殊标记
• 4·必要时添加边框区分不同的区域