css学习6

1.对于定义背景图片 background:url(images/p3.jpg) no-repeat;
可以设置图片显示的区域。
使用background-origin设置显示的起始区域
属性值
border-box：表示从边框处就开始显示。
padding-box:表示从边框里面开始显示。
content-box:表示从content区域开始显示。

对于背景图片位置的显示也可以用
background-position:20px 20px;
但是这只是以左上角作为起点进行显示。

2.定义背景图片的剪裁区域
background-clip和上面同样有三个属性,表示剪裁的起始位置。
border-box:
padding-box:
content-box:

3.使用backgound-size进行控制背景图像的显示大小。
cover:保持宽高比例，将图片缩放到正好完全覆盖所定义的背景区域。
contain:保持宽高比例，使宽或者高能正好适应所定义的背景区域。
还可以使用%或者数值进行设置背景的大小。

4.定义背景的时候可以使背景叠加，他们显示并不会平铺，而是上下重合叠加。
background: url(“check_selected_green.png”),url(“bg0.jpg”);

5.定义渐变
线性渐变，第一个参数是角度，也可以写成to left ,to right,to top, to bottom，to bottom right等。
如果是使用deg的角度，当为0deg的时候，是表示的从下向上的渐变。
background:linear-gradient(30deg,#f0f,#0f0);
其中%表示颜色的开始的位置，并不包括渐变的部分。但是
background:linear-gradient(to bottom ,#f00 20%,#333 50%)

从第一种颜色到第二种颜色的距离为5%
background: repeating-linear-gradient(60deg, #cd6600,#0067cd 5%, #cd6600 10%);

这种效果，并没有中间的渐变色，这表示第一种颜色是从0%-5% 第二个颜色从5%-10%
background: repeating-linear-gradient(60deg, #cd6600, #cd6600 5%, #0067cd 5%, #0067cd 10%);

径向渐变
background: radial-gradient(farthest-side at left bottom, #f00, #f99 60px, #005);

6.这是设置了两个背景色，首先是黄色，然后设置背景图片显示在下面，并重复。
background: yellow url(“check_selected_green.png”) repeat-x bottom left;

7.连接有三种
内部连接 正常情况下设置a标签都会在当前界面跳转 ，但是如果设置target就能改变这种情况。

<a href="https://www.baidu.com/" target="_blank">点击</a>

外部连接
锚点连接：就是指向同一个页面或其他页面中特定位置的连接。比如在页面的标题上设置锚点，就能很快的到达这个锚点。
方法：
①任何被定义了id的元素都可以作为锚点标记。通过a标签的href属性，属性值为#xxx，

<a href="#divid">点击</a>  这样点击，就能到达设置id的位置。

使用a标签创建E-mail标签

<a href="mailto:xxxx@xxx.com?subject=主题名字">

例如：

<a href="mailto:1301002716@qq.com?subject=啦啦啦">点击</a>

8.定义热点区域使用

<img src="images/china.jpg" width="618" height="499" border="0" usemap="#Map">
<map name="Map">
  <area shape="circle" coords="221,261,40" href="show.php?name=青海">
 <area shape="poly" coords="411,251,394,267,375,280,395,295,407,299,431,307,436,303,429,284,431,271,426,255" href="show.php?name=河南">
   <area shape="poly" coords="385,336,371,346,370,375,376,385,394,395,403,403,410,397,419,393,426,385,425,359,418,343,399,337" href="show.php?name=湖南">
</map>

9、可以使用iframe标签在页面中嵌入其他页面

<iframe src="https://www.baidu.com/" frameborder="1"></iframe>