Skip to content

Files

Latest commit

 

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、