【HTML/CSS】从放弃到入门-笔记2

从放弃到入门1 >> 从放弃到入门2

CSS三大特性练习(理解)

div和span标签(掌握)

DIV配合CSS完成网页的搭建
span常用来配合修改局部样式
区别：DIV一个容器级别的标签，span文本级别
容器可以嵌套其它所有标签，示例 div h ul ol dl li …
文本级别只能嵌套文字/超链接/图片示例 p span buis stong em ins del … ，如果把容器h1标签放入文本p标签<p><h1>标题</h1></p>，chrome渲染时 h 标签自己就跑出来了

DIV配合CSS搭建网页结构

<div class="header"><div class="logo"></div><div class="nav"></div>
</div>
<div class="content"><div class="aside"></div><div class="article"></div>
</div>
<div class="footer"></div>

.header, .content, .footer{width: 980px;margin: auto;margin-bottom: 10px;}
.header{height: 100px;background: red;}
.content{height: 500px;background: green;}
.footer{height: 100px;background: blue;}
.logo{width: 200px;height: 50px;background: white;float: left;margin: 20px;}
.nav{width: 600px;height: 50px;background: yellow;float: right;margin: 20px;}
.aside{width: 250px;height: 460px;background: purple;float: left;margin: 20px;}
.article{width: 650px;height: 460px;background: deepskyblue;float: right;margin: 20px;}

CSS元素显示模式(掌握)

块级元素，独占一行，与父元素等宽，可设置宽高
行内元素，不独占一行，与标签内的内容等宽，不可以设置宽高
行内块级元素，可设置宽高，又不会独占一行如 img

CSS元素显示模式转换(掌握)

display 块级、行内、行内块级之间相互转换

display: inline;//行内
display: block; //块级
display: inline-block; //行内块级，可设置宽高，又不独占一行

百度首页(理解)

背景颜色(掌握)

背景颜色取值范围 rgb, rgba , 十六进制，颜色单词

background-color: rgb(112, 137, 253);
background-color: rgba(0, 81, 255, 0.5);
background-color: #4c5fb7;
background-color: red;

背景图片(掌握)

浏览器第一次请求网页，在解析中当发现网页包含图片，会再次向服务器发送请求获取图片
背景图片与imga区别，背景图片不占位置，背景图片的权重轻，不会被搜索引擎搜到，img相反。

background-image: url(img/1.jpg);

背景平铺(掌握)

控制背景图片平铺
应用场景：当背景图过大，客户端从服务器获取的时间就长，用户体验就差，那么找有规律的小图片平铺就解决了加载慢的问题，一些较长或较宽但存在规律的图片可以截取其中一段，以平铺作为背景展示。
取值范围，平铺 repeat , 不平铺 no-repeat, 水平平铺 repeat-x, 垂直平铺 repeat-y

background-repeat: repeat;

背景定位上(掌握)

background-color 和 background-image可以同时存在，并且图片覆盖颜色
background-position有2个值，第一个参数水平取值，第二个垂直取值，以空格隔开。取值范围单词 left, right ,center ,top ,bottom，或像素px

background-position: center top;
background-position: -100px 100px;

背景定位下(掌握)

缩放时，默认先隐藏右边的内容，也就是说默认始终展示的是左边的内容，设置position可先隐藏左右两边，始终展示中间的核心内容 background-position: center top;
找一张banner图测试，在缩放浏览器边框时，会先隐藏图片两边，
取值通常是负数，因为假如要找某张图中间的一个图标，那么首先，图片要向上隐藏至图标轴位置，其次，图片要向左隐藏到图标的x轴位置，那么他们得到的都是负值。

 div{width: 100%; height: 500px; background-image: url(img/0.jpg);background-position: center top;}
//background-position:  -144px -360px ;

背景关联和缩写(理解)

关联背景图片和滚动条
background-attachment: fixed; 固定背景图片

所有background-** 相关的属性都可以直接用background代替
顺序，background: color，image，repeat，关联方式，position

background-attachment: fixed;
background: red url(img/0.jpg) repeat-x;
background: center top;

背景图片和插入图片区别(掌握)

背景图片不占用其它标签的空间，背景图片有定位position属性，而插入图片<img>没有定位属性，
背景图片没有语义，插入图片有

背景图片练习(理解)

背景图之中嵌套背景图，实现精准定位

CSS精灵图(掌握)

把DIV设置成指定图标大小，从一张大的精灵图中，把指定图标定位到DIV位置

精灵图练习(理解)

从一张字母表中，利用postion属性定位，拼出你的名字

<div></div>  <div></div> <div></div> <div></div>

div {background: url(img/26.jpg) no-repeat;}
div:nth-child(1) {width: 133px;height: 153px; background-position:  -82px -183px;}
div:nth-child(2) {width: 124px;height: 144px; background-position:  -577px -353px;}

边框属性上(掌握)

border 设置边框，dashed 虚线，solid实线

border-top:1px solid blue;
border：1px solid red;
border-width: 1px;
border-style: solid;
border-color: red;

边框属性下(掌握)

边框练习(理解)

画一个向下的三角

.box5{width: 0px;    height: 0px;border: 25px solid #9f9f9f;border-color: #9f9f9f white;border-bottom: none;
}

内边距属性(掌握)

边框和内容的距离
设置内边距之后，容器的大小会变化，设置背景色之后，内边距也有颜色

padding: 10px; //四条边
padding: 10px 20px; // 上右下左

外边距属性(掌握)

标签和标签的距离
设置margin不会改变容器宽高，设置背景色不会更改外边距颜色

margin: 10px;

外边距合并现象(掌握)

在垂直方向上，有两个相邻的边框分别设置了向下和向下的外边框，margin-bottom=50px, margin-top=100px，它们最终边距是100px，不会变成150px，这就是外边距合并现象。外边框的左右方向不会发生合并

盒子模型(理解)

像盒子一样使用

div:first-child {width: 100px;height: 100px;border: 2px solid red;padding: 5px 3px;margin: 10px 6px;
}

盒子宽度和高度(理解)

内容宽高 = width / height
元素宽高 = 边框 + 内边距 + 内容
元素空间宽高 = 边框 + 内边距 + 内容 + 外边距

元素宽高 = border-left  +  padding-left   + width  + border-right  +  padding-right

盒子宽度和高度练习1(理解)

添加内边距宽度，但总宽度不能变，1。减少内容宽度，2。减外边距宽度，3。减边框宽度。

盒子宽度和高度练习2(理解)

盒子box-sizing属性(理解)

CSS3中新增了一个box-sizing属性，使用此属性后，盒子元素宽高不变。（对margin无效）
它是如何保证元素宽高不变的呢？改变内容宽高。
示例，设置了宽高 200px;　但最终渲染出来的宽高却发生了变化

.article {box-sizing: border-box;width: 200px;height: 200px;background-color: yellow;float: right;padding: 12px;border: 9px solid #aaa;
}

盒子模型练习3(理解)

有两个盒子，一个大盒子200，一个小盒子100，现在要求小盒子在大盒子内部垂直居中怎么做？
1。设置大盒子的pading
2。设置小盒子的margin，
但是要注意，添加margin-top会连同大盒子一起改变，解决方法是为大盒子设置边框属性border: 1px solid #000;
优先使用padding，因为padding是控制子级元素的，margin是控制同级元素的

padding-top: 50px; padding-left: 50px; box-sizing: border-box
margin-top: 50px; margin-left: 50px; // 或直接 margin: 50px auto; auto对垂直方向无效

—更新----方法二，但是企业开发中并不是都允许添加边框，那么更好的选择是使用overflow

overflow: hidden;

盒子居中和内容居中(理解)

text-algin与margin的区别
text-algin:center 用来设置 盒子中的 文字/ 图片水平对齐
margin: 0 auto 用来设置盒子本身水平居中

清空默认边距(掌握)

在企业开发中清空当前界面的边距的标准做法：参考yui css reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

行高和字号(掌握)

1、文字是垂直居中于行高的
2、一行文字怎样垂直居中于盒子中？只设置行高，或者行高等于盒子高就可以
2.1 多行文字怎么垂直居中于盒子？那就设置padding-top/bottom

p{font-size: 20px; padding: 0px 5px; border: 3px solid #888;margin: 0px;width: 600px;line-height: 50px;
}

<p>所有浏览器都支持 line-height 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。   </p>

还原字体和字号(掌握)

水平方向，以左边距为准，右边有误差
每行都有行高，但是顶部和底部会受到padding影响

文字界面(理解)

一比一还原设计图，使用文字处理工具，对间距、边框、文字大小、字体、行高等等逐一测量

网页布局方式(掌握)

排版方式，一是垂直排版，二是水平排版
垂直排版：块级元素，按垂直方式对齐
水平排版，行内，行内块级元素，按水平方向对齐

浮动流基本概念(掌握)

float 浮动的相对定位于父元素
浮动流只有水平排版一种方式，浮动流所有元素都可以设置宽高，浮动流没有center、没有 0 auto 这个取值，浮动流中不区别行内/块级/行内块级元素，

浮动元素脱标(理解)

当某个元素浮动后，这个元素就相当于从标准流中删除了，后面的元素就会替代这个位置，这就是浮动元素的脱标

浮动元素排序规则(理解)

先浮动的显示在前，后浮动的排到后面，左浮右浮都是如此

浮动元素贴靠现象(理解)

当父元素的宽度足够放下所有浮动元素时，就会并列显示，当不够放下时，就会从最后一个元素往向贴，如果还是放不下，就会继续往上一个元素贴

浮动元素字围现象(理解)

文字会给浮动元素让位，也就是文字会贴着浮动元素走，不会去填充浮动元素原有的空间

浮动练习上(理解)

浮动练习中(理解)

浮动练习下(理解)

基本DIV布局

<div class="header"><div class="logo"></div><div class="lang"></div><div class="nav"></div>
</div>
<div class="content"><div class="aside"></div><div class="article"><div class="article-top"><div class="article-top-left"><div class="news-one"></div><div class="news-two"></div></div><div class="article-top-right"></div></div><div class="article-bottom"></div></div>
</div>
<div class="footer"></div>

浮动元素高度问题(掌握)

在没设置父元素高度的情况下，
在标准流中，内容高度可以撑起父元素的高度，在浮动流中，浮动的元素高度不能撑起父元素的高度

清除浮动方式一(理解)

clear 取值 none, left, right, both,
但设置clear 会让marthin失效

clear: both;

清除浮动方式二(理解)

margintop失效原因(理解)

清除浮动方式三(理解)

外墙法
在在两个元素之外/间添加一个块级元素，并设置clear属性。设置外墙法后，通常不设置两个盒子的margin-bottom和margin-top，应该在新元素上直接设置高度分隔两个盒子

div.out-wall{clear: both; height: 10px;
}

清除浮动方式四(理解)

内墙法
内墙法用法一样，区别是把块级元素放到其中一个元素的里面，上面元素的底部/下面元素的顶部
当没设置浮动元素的高度时候，它的高度需要内容来撑。而块级元素放在哪个元素，就会撑起哪个元素的高度，
但在企业开发中，这两种方式都不常用，因为作用太有限了

伪元素选择器(掌握)

给指定标签的内容前面或后面添加一个子元素

在p标签前面添加一个宽50，高30，背景色yellow，的行内块级元素

p::before{content: "abc";width: 50px;height: 30px;background-color: yellow;display: inline-block;visibility: hidden; // 不展示此元素的内容，设置的宽度仍然有效
}

清除浮动方式五(理解)

怎么让div内的元素浮动，且要求div独占一行？
由于div没有设置高度，那么标准流的高度为0，浮动元素会自动拼接到一起。使用伪元素在box2前面一个子元素来清除浮动

 p{  float: left;    }.box2::before{content: "";display: block;/*height: 0;*//*visibility: hidden;*/clear: both;}

<div class="box1"><p class="p1">aaa</p><P class="p1">bbb</P>
</div>
<div class="box2"><p class="p2">AAA</p><p class="p2">BBB</p>
</div>

清除浮动方式六(理解)

最推荐使用的方法，在第一个元素添加 overflow属性

.box1{overflow: hidden;
}

网易注册界面-基本结构搭建(理解)

网易注册界面-完成顶部左边(理解)

在设置a 标签宽度130px后，却始终对不上，而测量的数据明明没有问题，后来才发现是三个a标签有换行导致的，html把换行当作一个空格，导致最后多出了2个空格的宽度

<div class="logo"><a href="" title="网易163免费邮"></a><a href="" title="网易126免费邮"></a><a href="" title="网易yeah.net免费邮"></a>
</div>

网易注册界面-完成顶部右边(理解)

网易注册界面-完成中间顶部(理解)

网易注册界面-完成中间右边(理解)

网易注册界面-完成中间左边顶部(理解)

网易注册界面-完成中间左边底部中(理解)

网易注册界面-完成中间左边底部下(理解)

代码实例一

网易注册界面-完善(理解)

开始写一个页面之前就要确定的，避免大量重复的样式
1.清空默认边距
2。清空默认的样式，a标签下划线颜色大小，li前面的圆点，等

a {text-decoration: none;font-size: 12px;color: #ccc;}
ul,li {list-style: none;}

3、设置body的整个界面文字信息
文字字体，大小，颜色

定位流-相对定位(掌握)

相对定位就是相对自己原来的位置进行定位，配合其它属性进行操作
相对定位不会脱离标准流，它原来的位置仍然占据着空间

position: relative;

相对定位-注意点(掌握)

同一个方向只能有一个取值，比如可以同时使用 right, top ,但是不能同时使用 right , left
相对定位不脱离标准流的，所以区分行内元素、块级元素
相对定位不会影响其它元素，但是给元素添加margin 和 padding后，会改变其它元素的位置，而因为相对定位的原位置也发生了改变，进而改变定位流本身位置

应用场景：对元素微调，配合绝对定位使用
当一个input 和一张图片在一行时，往往图片会向上偏，使用postion定位就能简单解决

img{position: relative;top: 20px;
}

定位流-绝对定位(掌握)

绝对定位的元素脱离标准流，是相对于body来定位，绝对定位不区分行内块级，给span设置宽高也会有效

position: absolute;

绝对定位0参考点(掌握)

如果定位流的祖先元素也是定位流，那定位流就不再根据body定位，而转为根据祖先元素定位，(祖先元素即父元素或者父元素之上的元素)
就近原则，当定位流的祖先元素有多个定位流，以最近的元素作为定位点

绝对定位-注意点(掌握)

如果是以body作为定位点，那么就只会以首屏宽高作为定位点，不会跟着滚动条滚动，不会以整个页面为定位点。
绝对定位的元素会忽略父元素的padding

绝对定位-子绝父相(掌握)

子绝对，父相对
在一个选项卡上显示一张红色 new 字样图片，相对定位会挤占选项卡空间，而绝对定位，在缩放浏览器时不会跟着缩放，那么就佳方法就是绝对相对同时使用，选项卡设置成相对定位，其子元素img设置成绝对定位。

ul li{margin-top: 20px;width: 100px;height: 40px;background-color: yellow; list-style: none;position: relative;}
ul li img { position: absolute; top: -6px;left: 13px;}
ul li img { position: absolute; top: -6px;left: 13px;}

<ul><li>全球购<img src="img/new.jpg"></li></ul>

绝对定位-水平居中(理解)

更自动的方法，使用百分比，选项卡无论怎么变都处于指定百分比的位置

left: 40%;

定位练习-团购界面(理解)

在界面的左上角加上 hot图片，在图片的底部显示价格图，
PNG图以背景图的方式贴在商品图片上，左上角的图片定位：父元素相对，子元素绝对定位 0 0，

 div{position: relative;width: 300px;height: 300px;border: 2px solid #ccc;margin: 0 auto;margin-top: 100px;}img{width: 300px;height: 200px;}div .hot{width: 71px;height: 44px;background-color: blue;background-image: url(img/hot.png);background-repeat:   no-repeat;background-position: -780px -724px;display: inline-block;position: absolute;left: 0px;top: 0px;}div .price{width: 181px;height: 44px;background-color: blue;background-image: url(img/hot.png);background-repeat: no-repeat;background-position: -694px -532px;display: inline-block;position: absolute;bottom: 100px;left: -20px;}

<div><img src="img/cai.jpg" alt=""><span class="hot"></span><span class="price"></span>食材：猪里脊肉 茭白 胡萝卜 食盐 鸡蛋清 料酒 白胡椒 剁椒 白糖 ...
</div>

因为没有素材，所以找了一张图凑合用一下，关键点是产品左上角HOT有了，左下角价格标签也有了

定位练习-焦点图(理解)

关键点，左右两边就是两个半透明的背景颜色加上箭头符号完成，背景元素的透明度使用rgba()设置，右下角的数字使用ol,li设置，

 *{margin: 0;padding: 0;}div{width: 590px;height: 470px;border: 2px solid gold;margin: 0 auto;margin-top: 100px;position: relative;}span{width: 40px;background-color: rgba(0,0,0,0.3);display: inline-block;line-height: 100px;text-align: center;font-size: 35px;color: white;position: absolute;top: 35%;}span.leftArrow{left: 0px;}span.rightArrow{right: 0px;}ol{list-style: none;width: 150px;height: 30px;background-color: rgba(0,0,0,0.2);color: white;text-align: center;position: absolute;right: 14px;bottom: 26px;}ol li{float: left;width: 30px;line-height: 30px;border: 1px solid white;box-sizing: border-box;}

<div><img src="img/jd.jpg"><span class="leftArrow">&lt;</span><span class="rightArrow">&gt;</span><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol>
</div>

定位流-固定定位(掌握)

固定定位，无论滚动条怎么滚动，固定定位的元素不会消失始终在指定位置

固定定位是脱离标准流的，不会占用标准流的空间。所以 box1 设为固定定位，后面那个同样大小的 box2 就看不见，因为 box2 顶替了 box1 位置，而 box1 又是贴在原定位上面的。
固定定位和绝对固定一样，不区别行内、块级

position: fixed;

定位练习-新浪首页(理解)

把顶部的导航栏设置成固定定位，当内容往下滚动时，导航条位置始终展示在最顶部，方向非常简单，就是设置成 position: fixed; 即可，几乎没任何其它操作。
点击返回最上面的按钮也是一样，设置成 fixed，再设置 bottom , right ，a链接等于#即可。

.nav{width: 100%;height: 40px;background-image: url(img/nav.jpg);position: fixed;
}

定位流-z-index属性(掌握)

IE6不支持固定定位，
默认情况下，定位流会盖往标准流元素，如果同是定位流，那么后编写的会盖住前面编写的，
如果设置了z-index，那么规则将变成谁的取值大谁在最上面，如果父元素设置了z-index属性，子元素的将失效。

z-index: 1;

a标签伪类选择器(掌握)

修改a标签在不同状态的样式
从未访问过的样式 a:link，访问过的样式 a:visited，长按a链接的样式 a:active，鼠标悬停的样式 a:hover

a:link{color: green;}
a:visited{color: red;}
a:active{color: orange;}
a:hover{color: blue;}

a标签伪类选择器注意点(掌握)

伪类选择器，顺序必须对应 love hate 原则，即 lv 在前 ha 在后，如果把hover放到link前面，那么hover不会生效

a标签伪类选择器-练习(理解)

在企业开发中，伪类选择器最好写在标签选择器后面

使用伪类选择器，做一个跟ajax一样效果的导航条

 *{margin: 0;padding: 0;}ul{width: 600px;height: 40px;background-color: green;margin: 100px auto;}ul li{list-style: none;float: left;width: 120px;background-color: orange;text-align: center;line-height: 40px;}ul li a{text-decoration: none;color: white;display: inline-block;width: 120px;height: 40px;}ul li a:hover{color: red;background-color: pink;}ul li a:active{color: yellow;}

<ul><Li><a href="#">我是导航</a></Li><Li><a href="#">我是导航</a></Li><Li><a href="#">我是导航</a></Li><Li><a href="#">我是导航</a></Li><Li><a href="#">我是导航</a></Li>
</ul>

导航条 + 下拉列表实例二

过渡模块基本使用(掌握)

CSS3新增
transition-property过程的属性， transition-duration过渡时间
过滤三要素
一、必须有变化的属性，二、必须写过滤时间

设置div的宽度和背景颜色过渡效果，

div{width: 200px;height: 100px;background-color: red;transition-property: background-color width;transition-duration: 1s;
}
div:hover{width: 300px;  background-color: green;}

<div></div>

过渡模块-其它属性(理解)

transition-delay: 1s; 鼠标放上去多少秒触发

过渡模块-连写(掌握)

将上面的代码用连写方式完成，参数1属性，参数2过渡时间，参数3速度模式，参数4多少秒触发，后两个参数不是必填项，多个过度模块同时编写使用逗号隔开
更加简写的方式，transition: all 2s ，即所有hover都要有过渡效果，过渡时间是2s

div{width: 200px;height: 100px; background-color: red;transition: background-color 2s linear 2s, width 2s 0s, height 1s;/*transition: all 2s linear 1s;*/  or transition: all 2s linear 2s , background-color 10s;
}
div:hover{width: 300px;height: 50px;background-color: green;
}

<div></div>

过渡模块-弹性效果(理解)

*{margin: 0;padding: 0;}div{width: 800px;background-color: orange;line-height: 50px;margin: 50px auto;text-align: center;}div span{font-size: 30px;transition: margin 2s;}div:hover span{margin: 0 20px;}

<div><span>牛</span><span>哥</span><span>带</span><span>你</span><span>狂</span><span>虐</span><span>H</span><span>5</span></div>

过渡模块-手风琴效果(理解)

默认展示6个大小相同的图片，当鼠标移到图片a时，其它图片缩小，图片a全部展示

 *{margin: 0;padding: 0;}ul{ width: 960px;height: 290px;border: 3px solid #000;overflow: hidden;}ul li{width: 160px;height: 290px;list-style: none;float: left;transition: all 1s;}ul:hover li{width: 100px;}ul li:hover{width: 460px;}

<ul><li><img src="img/color.jpg"></li><li><img src="img/color.jpg"></li><li><img src="img/color.jpg"></li><li><img src="img/color.jpg"></li><li><img src="img/color.jpg"></li><li><img src="img/color.jpg"></li>
</ul>

2D转换模块(掌握)

rotate 旋转多少度单位deg， translate平移多少，接收两个参数水平和垂直，scale拉伸元素，小于1挤压大于1拉伸。多个操作用空格分隔

transform: rotate(45deg);
transform: translate(100px, 50px); // 水平，垂直
transform: scale(1.2, 0.51); //水平，垂直
transform: scale(1.2, 0.51) rotate(45deg); //  拉伸+旋转

2D转换模块-形变中心点(掌握)

在形变时以哪个点作为旋转参考点 , 取值英文方向，或像素

transform-origin: left top;  //0px 0px;

2D转换模块-旋转轴向(理解)

2D转换模块-透视属性(理解)

2D转换模块-相片墙(理解)

盒子阴影和文字阴影(掌握)

盒子阴影 box-shadow: 水平偏移，垂直偏移，模糊度，阴影扩展，阴影颜色，内阴影[inset]，默认值，前四个 0 ，阴影颜色：跟随元素文字颜色，第六个外阴影

box-shadow: 10px 10px 10px 1px black ;
box-shadow: 10px 10px 10px;  //快速编写只写前三个参数即可

文字阴影 text-shadow：水平偏移，垂直偏移，模糊度，颜色，只有四个参数，用法如下

text-shadow: 5px 2px 2px yellow;

翻转菜单-综合练习(理解)

动画模块(掌握)

过渡和动画，不同点，过渡需要人为触发，而动画不需要。相同点，过渡和动画都是用来给元素添加动画的，都是新增的属性，都需要满足三要素。

动画执行要素：1.告诉系统需要执行哪个动画，2.告诉系统需要自己创建一个名叫 sport 的动画 @keyframes sport { from{} to{} }，告诉系统动画持续时间

过渡div1和动画div2示例

 .div1{  width: 100px;height: 50px;background-color: red;transition: margin-left 3s;}.div1:hover{margin-left: 500px;}.div2{  width: 100px;height: 50px;background-color: blue;animation-name: sport ;animation-duration: 3s;}@keyframes sport {from{margin-left:0px;}to{    margin-left: 500px;}    }

<div class="div1"></div>
<div class="div2"></div>

动画模块-其它属性上(理解)

延迟执行延迟2秒， animation-delay: 2s;
重复执行次数： animation-iteration-count: 3; // infinite无限
是否做返回动画：animation-direction: alternate; // mormal默认不执行，alternate执行
是否暂停： animation-play-state: running; // paused暂停，running默认执行

.div2{animation-iteration-count: 3;animation-direction: alternate;}
div:hover{animation-play-state: paused;
}

动画模块-其它属性下(理解)

画一个矩形
使用position定位加百分比

 .div1{width: 100px; height:50px;background-color: red;  animation-name: sport;  position: absolute; animation-duration: 3s;}
@keyframes sport{0%{left: 0;   top: 0;}25%{left: 500px;top: 0;}50%{left: 500px;top: 250px;}75%{left: 0px;  top: 250px;}100%{left: 0px; top: 0px;}
}

<div class="div1"></div>

动画模块-连写(掌握)

animation: 动画名称，动画时间，动画速度轨迹，延迟时间，执行次数，往返动画。

animation: sport 2s linear 0s 10 normal ;

动画模块-云层动画(理解)

找三张png格式的云层图片,设置对ul的绝对定位，使三张图片重叠在一起，再animation动画让他们从右到左移动，设置不同的移动距离或者速度以达到不同的重叠效果

 *{margin: 0:padding: 0:;}ul{height: 400px:background-color: skyblue:margin-top: 100px:animation: change 5s linear 0s infinite alternate:position: relative:overflow: hidden; }ul li{width: 400%:height: 100%:position: absolute:left: 0:top: 0:opacity: 0.5:;}ul li:nth-child(1){background-image: url(img/y1.png):animation: one 10s linear 0s infinite alternate:list-style: none:;}ul li:nth-child(2){background-image: url(img/y2.png):animation: two 50s linear 0s infinite alternate:list-style: none:;}ul li:nth-child(3){background-image: url(img/timg.png):animation: there 20s linear 0s infinite alternate:list-style: none:;}@keyframes change{from{  background-color: skyblue:}to{  background-color: black:}}@keyframes one{from{ margin-left: 0:}to{ margin-left: -100%:}}@keyframes two{from{  margin-left: 0:}to{ margin-left: -200%:}}@keyframes there{from{    margin-left: 0:}to{ margin-left: -300%:}}

<ul><li></li><li></li><li></li>
</ul>

动画模块-无限滚动上(掌握)

让图片集从右向左无限滚动
鼠标移动到 ul 上，整个ul的透明度为0.5，当前的 li 透明度 1 ,

 *{margin: 0;padding: 0; }div{width: 600px;height: 188px;border: 1px solid #000;margin: 100px 0;overflow: hidden;}ul{width: 2000px;height: 188px;background-color: #ccc; animation: move 5s linear 0s infinite;}ul:hover{animation-play-state: paused;}ul:hover li{opacity: 0.5;}ul li:hover{opacity: 1; }ul li{list-style: none;width: 300px;height: 188px;background-color: red;border: 1px solid #000;box-sizing: border-box;float: left;}@keyframes move{from{margin-left: 0;}to {margin-left: -1200px;}}

<div>
<ul><li><img src="img/y1.png"></li><li><img src="img/y2.png"></li><li><img src="img/y3.png"></li><li><img src="img/timg.png"></li><li><img src="img/y1.png"></li><li><img src="img/y2.png"></li>
</ul>
</div>

动画模块-无限滚动下(掌握)

添加蒙版，
当鼠标移到ul ，ul 下所有的 li 透明度就更改至0.5，那么 li 的蒙版颜色从哪里来？来自ul的 background-color;取值0至1

 ul:hover li{    opacity: 0.5;   }

3D转换模块(掌握)

2D是一个平面，只有宽度和高度，没有厚度
3D是一个立体，有宽度和高度，有厚度
让某个元素呈现3D效果，添加 transform-style，取值设置成 preserve-3d

 .father{width: 200px;height: 200px;background-color: red;border: 1px solid #000;margin: 100px auto;perspective: 500px;transform-style: preserve-3d;transform: rotateY(0deg);}.son{width: 100px;height: 100px;background-color: blue;border: 1px solid #000;margin: 0 auto;margin-top: 50px;box-sizing: border-box;transform: rotateY(45deg);    }

<div class="father"><div class="son"></div>
</div>

3D转换模块-正方体(理解)

3D转换模块-长方体(理解)

3D转换模块-练习(理解)

 *{margin: 0:padding: 0;}body{perspective: 500px;}ul{width: 200px:height: 200px:box-sizing: border-box:margin: 100px 300px:position: relative:transform: rotateY(0deg) rotateX(0deg):transform-style: preserve-3d:animation: sport 8s linear 0s infinite ;}ul li{list-style: none:width: 200px:height: 200px:font-size: 60px:line-height: 200px:position: absolute:left: 0:top: 0;}ul li:nth-child(1){background-color: pink:transform: rotateX(90deg) translateZ(100px) scale(2, 1) ;}ul li:nth-child(2){background-color: green:transform: rotateX(180deg) translateZ(100px) scale(2, 1) ;}ul li:nth-child(3){background-color: red:transform: rotateX(270deg) translateZ(100px) scale(2, 1) ;}ul li:nth-child(4){background-color: yellow:transform: rotateX(360deg) translateZ(100px) scale(2, 1) ;}ul li:nth-child(5){background-color: blue:transform: translateX(-200px) rotateY(90deg) ;}ul li:nth-child(6){background-color: pink:transform:  translateX(200px) rotateY(90deg) ;}ul li img{width: 200px:height: 200px;}@keyframes sport{from{  transform: rotateX(0deg);}to{   transform: rotateX(360deg);}}

<ul><li><img src="img/c1.jpg"></li><li><img src="img/c2.jpg"></li><li><img src="img/c3.jpg"></li><li><img src="img/c4.jpg"></li><li><img src="img/c5.jpg"></li><li><img src="img/c6.jpg"></li>
</ul>

3D播放器上(理解)

最终效果，6张图片以Y轴旋转，一张红心图片时隐时现以指定位置运动，并配上背景音乐。

3D播放器下(理解)

动画中如果有同名的属性，那么后面的就会覆盖前面的属性值
动画中属性的固定值写在前面，变化值写在后面

 *{padding: 0; margin: 0;}body{background-image: url(img/z1.jpg) ; background-repeat: no-repeat; background-size: cover; overflow: hidden;}ul{   width: 200px; height: 200px; position: absolute; bottom: 100px; left: 50%; margin: 0 auto; transform-style: preserve-3d; animation: sport 6s linear 0s infinite ;}ul li{width: 200px; height: 200px; background-color: black; list-style: none; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0;   }ul li:nth-child(1){ transform: rotateY(60deg) translateZ(200px) ;}ul li:nth-child(2){ transform: rotateY(120deg) translateZ(200px) ;}ul li:nth-child(3){ transform: rotateY(180deg) translateZ(200px) ;}ul li:nth-child(4){ transform: rotateY(240deg) translateZ(200px) ;}ul li:nth-child(5){ transform: rotateY(300deg) translateZ(200px) ;}ul li:nth-child(6){ transform: rotateY(360deg) translateZ(200px) ;}ul li img{width: 200px; height: 200px; border: 5px solid skyblue; box-sizing: border-box;}ul:hover{animation-play-state: paused;  }ul:hover li img{opacity: 0.5;}ul li:hover img{opacity: 1;  }@keyframes sport{from{ transform: rotateX(-10deg) rotateY(0deg); }to{ transform: rotateX(-10deg) rotateY(360deg); }}.heart{   width: 173px; height: 157px; position: absolute; left: 100px; bottom: 100px; animation: move 10s linear 0s infinite;}@keyframes move{0%{   left: 100px;    bottom: 100px;  opacity: 1; }20%{ left: 300px;  bottom: 300px;  opacity: 0; }40%{ left: 500px;  bottom: 500px;  opacity: 1; }60%{ left: 800px;  bottom: 300px;  opacity: 0; }80%{ left: 1200px; bottom: 100px;  opacity: 1; }100%{ left: 800px; bottom: -200px; opacity: 0; }}

<ul><li><img src="img/z1.jpg"></li><li><img src="img/z2.jpg"></li><li><img src="img/z3.jpg"></li><li><img src="img/z4.jpg"></li><li><img src="img/z5.jpg"></li><li><img src="img/z6.jpg"></li>
</ul>
<img src="img/hx.jpg" class="heart">
<audio src="img/张学友.mp3" autoplay="autoplay" loop="loop"></audio>

背景尺寸属性(掌握)

background-size

background-size: 100px 200px; // 宽100，高200
background-size: 50% 80%; // 宽50%，高80%
background-size: auto 150px; // 宽度等比拉伸
background-size: cover;  //铺满整个背景
background-size: cover;  //高度或者宽度铺满

背景图片定位区域属性(理解)

background-origin 背景图片从盒模型的哪个位置开始显示

background-origin: padding-box; // 默认padding
background-origin: border-box; // 从边框开始显示
background-origin: content-box; // 从内容区域开始显示

背景绘制区域属性(理解)

背景颜色从哪里开始显示，默认border-box，其它取舍 padding-box, content-box;

background-clip: border-box;

多重背景图片(掌握)

多张背景图片用逗号隔开，前面的背景会覆盖后面的图片

background: url(img/hx.jpg) no-repeat, url(img/c1.jpg) no-repeat;
background: url(img/hx.jpg) no-repeat left top, url(img/c1.jpg) no-repeat right top; // 添加定位属性left right top bottom center

其它设置方式

background-image: url(),url();
background-repeat: no-repeat,no-repeat;
background-position: left top, center center ;

多重背景图片-练习(理解)

让飞机和云层都动起来，飞机向右上运动，云层向左移动

 *{  margin: 0;padding: 0;   }div{width: 600px;  height: 190px;  border: 1px solid red;  margin: 100px auto;background-image: url(img/hx.jpg),url(img/y5.png),url(img/y2.png) ;background-size: 50px 50px, 50px 50px ,auto auto;background-position: 50px 150px ,400px 50px ,0 0;background-repeat: no-repeat,no-repeat,repeat ;animation: move 10s linear 0s infinite;}@keyframes move{from{   background-position: 50px 150px, 400px 50px, 0px 0px;   }to{    background-position: 500px -150px , 400px 50px, -600px 0px ;    }}

<div></div>

CSS书写格式(掌握)

1.行内样式，直接写在标签中
2.内嵌样式，写在一对style标签中
3. 外链样式，写在css文件中
4. 导入样式， @import导入css文件
企业开发中一般使用外链样式，
行内和内嵌会导致代码难看，
@import是css2.1推出的，有兼容问题，而且加载顺序是先加载结构再加载样式，导致结构出来了样式没出来，而link会先加载样式再加载结构。

<div style="color: red">我是DIV</div>
<style>div{color: green;}</style>
<link rel="stylesheet" href="js/index.css">
<style> @import "index.css"; </style>

努比亚-准备工作(掌握)

1.关于中文命名，站点名称，也就是项目名称可以使用中文，但子文件和目录不要使用中文
引入基础文件 base.css，清空默认样式，设置样式背景色、字体大小颜色

<link rel="stylesheet" href="css/base.css">

努比亚-基本结构(理解)

引入基本样式 index.css，设置顶部，广告，内容，底部宽高背景色

<link rel="stylesheet" href="css/index.css">

努比亚-顶部logo(掌握)

做logo的标准做法是在h1标签内加a标签，logo以背景图片的方式设置,background: url(…/img/nubia-logo.png) no-repeat;

<h1><a href="#" title="努比亚"></a></h1>

努力比-顶部导航(理解)

右边的文字使用两个ul标签浮动，设置左边距，行高，hover悬停的字体颜色，头像使用background-image设置

努力比-广告区域(理解)

广告区域宽度是固定的，但是要求背景色宽度100%是白色，那么解决方法在广告区域外加一个div，再设置背景成白色

<div class="nav-width"><div class="nav"><ul><li><a href=""><img src="img/v18.png"><p>v18<span style="color: red;">新款</span></p></a></li></ul>
</div></div>

.banner .nav-width{  margin-top: 2px; width: 100%; height: 121px; background: white; position: absolute;}
.banner .nav{width: 1200px; height: 121px;  margin: 0 auto;}

努比亚-广告区域导航(理解)

努比亚-轮播图(掌握)

当图片的宽度大于父元素的宽度，要让图片居中对齐的话，直接使用margin:0 auto 和 text-algin: center; 是无效的，实现方法以下

方法一：使用定位流，缺点是要计算每张图片大小

.banner .figure img{height: 100%; position: absolute; left: 50%; margin-left: -502px;
}

方法二：使用 margin: 0 -100%，但是父元素必须设置 text-algin: center;

<style>div{ border: 5px solid red; width: 300px; height: 300px; margin: 0 auto;  text-align: center; }div>img{ margin: 0 -100%; }
</style>
<div><img src="img/p1.jpg"></div>

当图片大于浏览器宽度时，底部就会出现水平滚动条，使用overflow: hidden; 清除

努比亚-序号(理解)

鼠标悬停时，圆圈背景更改成透明色，边框变成红色，且边框大小从1过渡到1.2，适用于图片轮播

 .figure ol{width: 150px; height: 20px; position: absolute; left: 50%; margin-left: -75px; bottom: 10px;}.figure ol>li{width: 8px; height: 8px; background: #ccc; margin-left: 15px; float: left; border-radius: 50%; border: 2px solid transparent; transition: all 1s; list-style: none;}.figure ol>li:hover{border: 2px solid red; background-color: transparent; transform: scale(1.2, 1.2);}

<div class="figure"><img src="img/nubiax.jpg"><ol><li></li><li></li><li></li><li></li><li></li></ol>
</div>

努比亚-视频区域(掌握)

努比亚-内容区域(掌握)

当鼠标悬停时，图片放大到1.2倍，transition: all 1s过度动画， transform: scale(1.2,1.2); } 缩放

 ul{ list-style: none; }ul>li{ width: 300px; height: 300px; float: left; border: 1px solid #ccc;background: skyblue; }ul>li>img{ width: 100%; overflow: hidden; transition: all 1s; }ul>li:hover img{ transform: scale(1.2,1.2); }

<ul><li><img src="img/p3.png"></li><li><img src="img/p3.png"></li>
</ul>

努比亚-最新产品(理解)

努比亚-精品配件(理解)

顶部的导航条始终展示， z-index

.top{ position: fixed;left: 0;top: 0;z-index: 999;}

【HTML/CSS】从放弃到入门-笔记2相关推荐

【HTML/CSS】从放弃到入门-笔记1
从放弃到入门1 ⇒ 从放弃到入门2 了解浏览器浏览器和服务器(了解) 浏览器是一款软件,浏览器功能:1将网页渲染出来给用户查看,2让用户通过浏览器与网页交互不同浏览器的内核不同,渲染效果会有小的差 ...
前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
Web-HTML+CSS入门笔记
一. Web-HTML入门笔记 1.注释无法嵌套. 2.a标签:可做跳转.下载.锚点. 属性href必须有: 属性target的值: _blank:在新的标签页打开连接: _self:在当前页面打开连 ...
十年公务员转行IT，自学AI三年，他淬炼出746页机器学习入门笔记
整理 | Jane 编辑 | Just 出品 | AI科技大本营(ID:rgznai100) 近期,梁劲传来该笔记重大更新的消息.<机器学习--从入门到放弃>这本笔记的更新没有停止,在基于 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
嵌入式OS入门笔记-以RTX为案例：四.简单的时间管理
嵌入式OS入门笔记-以RTX为案例:四.简单的时间管理上一节简单记录了进程task.有了进程以后,我们需要关心怎么样分配CPU资源(或者运行时间)给每个进程.那么就要引入排程(scheduling) ...
500多页的机器学习入门笔记，下载超5万次，都讲了些什么？
导读:今年 4 月,梁劲在百度云盘上传了一份自己整理的学习笔记--<机器学习--从入门到放弃>.这份学习笔记 540 多页,图文并茂,而且全部用英文撰写,如今这份文档的下载量已超过 500 ...
Python数据分析入门笔记4——数据预处理之重复值
系列文章目录 Python数据分析入门笔记1--学习前的准备 Python数据分析入门笔记2--pandas数据读取 Python数据分析入门笔记3--数据预处理之缺失值 Python数据分析入门笔记 ...
帝君级别纯手写原创 jQuery入门笔记
帝君级别纯手写原创 jQuery入门笔记广治君今天下午整理了一下jQuery的入门学习思路,以及学习内容一.学习jQuery的目的为什么要学习jQuery,低程度的一定是你在学前端或者后端, ...