Skip to content

Files

Latest commit

author
AngelaMa
Dec 4, 2017
4f3617f · Dec 4, 2017

History

History

note1.读书笔记—精通css

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 30, 2017
Dec 4, 2017
Dec 4, 2017

###精通css读书笔记


#####第4章 背景图像效果 1、黑科技——标题旁边logo

.h_logo{  
  padding-left: 40px;
  background-image: url('../../img/1.jpg');
  background-repeat: no-repeat;
  background-position:top left; //设置图像位置
  background-size: contain; //把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
}

2、不透明度opacity继承问题

.opacity{
  background-color:rgb(2, 124, 156);
  border-radius: 4px;
  opacity: 0.4;
  padding: 10px;
  margin-bottom: 10px;
}
.rgba{
  background-color:rgba(2, 126, 154,0.4);
  border-radius: 4px;
  padding: 10px;
}

3、css视差效果 设置3层背景图,根据初始位置 background-position的不同,在改变浏览器大小的时候,造成有深度的感觉

.bodyground{
  width: 100%;
  height: 800px;
  /* overflow: auto; */
  background-image: url("../../img/2.jpeg");
  background-repeat: repeat-x;
  background-color: #000;
  background-position: 0 0;
}
.midground{
  width: 100%;
  height: 800px;
  background-image:url(../../img/1.jpg);
  background-repeat: no-repeat;
  background-position: 30% 0;
}
.forground{
  width: 100%;
  height: 800px;
  background-image:url(../../img/3.jpg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 80% 0;
}

####第5章 —— 链接 1、简单的链接相关属性 (1)链接伪类选择器 :link —— 没有被访问过的链接 :visited —— 被访问过的链接 (2)动态伪类选择器 :hover —— 鼠标滑过 :active —— 被单击时/激活 :focus —— 键盘移动到目标,同步鼠标悬停 2、