【课程一 PC+移动开发】05.选择器初级+背景详解

2017.04.22

今天是第一次在系统班上课。因为是插班生，第一次上课老师已经讲到第五课了。

好在之前有听过其他公开课，能够跟得上进度。

课堂笔记

一、选择器用法

*{}-通配符选择器    tagName-标签选择器    className-class选择器

parent child-后代选择器   选择器 选择器-群组选择器  #idName-i选择器

二、HTML命名规范

A。小写字母

B。以英文开头，可以包含（英文字母 - _ 数字）不能用中文

C。做到见名之意

三、命名的两种方式

<span class='box'></span>

<div class='box'></div>

*class可在页面中出现无数次，并且可以有多个名称（多个名称之间用空格分开）

<div class='box ul'></div>

四、margin赋值

margin-left 正值，向左

负值，向右

margin-top 正值，向上

负值，向下

margin赋值方法类似平面直角坐标系。

五、背景详解

1。背景色

background:green; 背景

background-color:green; 背景颜色

background:url(../XX文件夹/XX图片名.jpg/png);背景图片

2。背景图片平铺

默认是repeat

no-repeat 禁止平铺

repeat-x 水平平铺

repeat-y 垂直平铺

3。背景定位

<方位值定位>

X轴：background-position:left; 水平居左（默认值）

 background-position:center; 水平居中

 background-position:right; 水平居右

Y轴：background-position:top; 垂直居上（默认值）

 background-position:center; 垂直居中

 background-position:bottom; 垂直居下

*background-position方位值定位类似九宫格

*如果只给一个值，则默认第二个值是center

*当赋值为方位值时，前后值可以交换。background-positon:left top=background-position:top left;

<百分比定位>

background-position:10% 50%;（以图片中心来计算）

<像素定位>

background-position:10px 50px;

<背景图片大小设置>

background-size:1000px 800px;（背景图大小）

background-size:100px (auto);（只写一个值，默认auto,即等比例缩放）

background-size:cover;（等比例缩放至铺满x,y轴）

background-size:contain;（等比例缩放至一轴铺满就不再平铺）

<复合样式>

background:green url() no-repeat left top/cover

*cover或contain必须放到position值后面