web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

15、SVN的介绍和应用

15.1、SVN的介绍和应用课程概要

将代码进行集中管理，有版本号的进行迭代，方便集体工作的build流程

15.2、SVN的介绍

SVN是Subversion的简称，是一个开放源代码的版本控制系统，相较于RCS、CVS（这两个已经不流行了），它采用了分支管理系统，它的设计目标就是取代CVS。互联网上很多版本控制服务已从CVS迁移到Subversion。

TortoiseSVN是Subversion版本控制系统的一个免费开源客户端，可以超越时间的管理文件和目录。文件保存在中央版本库，除了能记住文件和目录的每次修改意外，版本库非常像普通的文件服务器。你可以将文件恢复到过去的版本，并且可以通过检查历史知道数据作了哪些修改，谁做的修改。这就是为什么许多人将Subversion和版本控制系统看做一种“时间机器”。

15.3、SVN的安装

在MAC系统里大家可以直接通过SVN命令对项目仓库进行操作，也可以下载TortoiseSVN for mac。windows上直接安装对应系统版本的TortoiseSVN即可。同时讲述了SVN背后的基本原理。

SVN原理图很容易理解，就是谁晚就要谁合并刚提交过的项目再进行提交并备份到tags，每次提交都需要保存一个tag。

15.4、SVN的使用

我们通过命令和客户端的方式才进行分支版本操作等。

在windows系统中可以使用tortoise软件对代码进行管理。

在这里就不过多做笔记了，之后学习github的时候详细记录，毕竟github是更流行的代码托管网站。

16、CSS3中的动画功能。

16.1、Transitions 功能

在 CSS3 中，Transitions 功能通过将元素的某一个属性从一个属性值指定的时间内平滑过渡到另外一个属性值来实现动画功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
/*transition: (属性) （持续时间）变化方式*/
background-color: #ffff00;
transition: background-color 1s linear;
}
#div1:hover{
background-color: #ff00ff;
} #div2{
background-color: #ffff00;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: linear;
/*分开写的效果和合起来写的效果是一样的*/
}
#div2:hover{
background-color: #ff00ff;
} #div3{
background-color: #ffff00;
color: #000000;
width:100px;
/*还可以同时写多种动画效果：*/
transition: background-color 1s linear, color 1s linear, width 1s linear;
}
#div3:hover{
background-color: #ff00ff;
color:#ffffff;
width:200px;
}
#div4{
background-color: #ffff00;
color: #000000;
width:100px;
/*还可以同时写多种动画效果：*/
transition: transform 1s linear, color 1s linear, width 1s linear;
}
#div4:hover{
transform:rotate(360deg);
color:#ffffff;
width:200px;
}
</style>
</head>
<body> <div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
<div id="div3">多种动画</div>
<div id="div4">transform效果</div>
</body>
</html>

16.2、Animations功能

Animations 功能与 Transitions 功能相同，但是，Animations 实现的动画效果要比 Transitions 实现的动画效果更具有客观性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
}
/*自定义连续动画效果*/
@-webkit-keyframes mycolor{
/*开始帧*/
0%{
background-color: red;
}
/*背景颜色变化帧*/
40%{
background-color: #ffff00;
}
70%{
background-color: aqua;
}
100%{
background-color: red;
}
}
div:hover{
-webkit-animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div>这是animation测试div</div>
</body>
</html>

16.3、实现动画的方法

实现动画的方法，包含，linear、ease-in、ease-out、ease、ease-in-out，使用不同的动画方法，可以让动画以不同的方式进行执行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position:absolute;
background-color:#ffff00;
top:100px;
width:500px;
}
@-webkit-keyframes mycolor {
0%{
background-color: red;
transform:rotate(0deg);
}
30%{
background-color: aqua;
transform:rotate(30deg);
}
60%{
background-color: lightskyblue;
transform:rotate(-30deg);
}
100%{
background-color: red;
transform:rotate(0deg);
}
}
div:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
}
</style>
</head>
<body>

<div>这是测试div</div>
</body>
</html>

17、老式浏览器支持HTML5和CSS

17.1、老式浏览器支持HTML5和CSS3课程概要

降级操作

17.2、老式浏览器支持HTML5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-[if IE]>
<script src="http://html5shiv.googlecode.com/sn/trunk/html5.js"></script>

<script src="http://gist.githubusercontent.com/billrobbins/4608382/raw/46fbb509576823dd087e1a86e57c0efe2a8dbf6e/html5.js"></script>

<![endif]>
</head>
<body></body>
</html>

17.3、老式浏览器支持CSS3

不完全兼容方案：

参考网站（转载）：

IE中的CSS3不完全兼容方案

https://www.cnblogs.com/platero/archive/2010/08/31/1870151.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*编写css3的语句之后：添加如下一条语句,就可以让老式浏览器支持CSS3*/
behavior:url("ie-css3.htc");
}
</style>
</head>
<body>
<div></div>
</body>
</html>

18、CSS3布局属性全接触

18.1、弹性盒模型介绍

弹性盒模型也是一个代码，不过引入的代码库有点多就不在这里写了。

18.2、Flexbox 菜单项目实战

使用codepen网站可以给代码自动补充兼容性设置。

选中autoprefixed，然后viewcompiled(观看编译完成之后的代码)

我试了试效果，有点不理想，只补全了一点代码，并不完整。

下面转载一个在webstorm中安装autoprefixed插件的方法的网站

https://www.cnblogs.com/zishang91/p/7573138.html

代码（实际就是一个简单的响应式布局代码）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
*{
padding: 0;
margin: 0;
border: none;
}
html{
font-size: 12px;
}
.menu{
width: 100%;
border: 1px solid rgba(0,0,0,.1);
display: flex;
flex-direction: row;
}
.menu li{
list-style-type: none;
text-align: center;
height: 40px;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color: #39ADD1;
}
.menu li:nth-child(2){
background-color: #3079AB;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color: #CC6699;
}
.menu li:nth-child(6){
background-color: #52AC43;
}
.menu a{
text-decoration: none;
color: #fff;
font-size: 2rem;
}
@media (max-width: 768px) {
.menu{
flex-wrap: wrap;
}
.menu li{
flex: 1 1 50%;
}
}
@media (max-width: 480px) {
.menu{
flex-direction: column;
}
.menu li{
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>
</body>
</html>

18.3、多列属性详解

picEnd.css

*{
box-sizing: border-box;
}
h1{
width: 100%;
height: 60px;
margin:;
line-height: 60px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
position: fixed;
top:;
left:;
text-align: center;
}
.picC{
width: 98%;
margin: 10px auto;
-webkit-column-count:;
column-count:;
-webkit-column-gap: 20px;
column-gap: 20px;
}
.picC li{
list-style-type: none;
margin-top: 10px;
}
.pic li img{
width: 100%;
/*height: auto;*/
}

picEnd.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/picEnd.css"/>
</head>
<body>
<h1>图片瀑布流</h1>
<ul class="picC">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
<li><img src="img/7.jpg" alt="" /></li>
<li><img src="img/8.jpg" alt="" /></li>
<li><img src="img/9.jpg" alt="" /></li>
<li><img src="img/10.jpg" alt="" /></li>
<li><img src="img/11.jpg" alt="" /></li>
<li><img src="img/12.jpg" alt="" /></li>
<li><img src="img/13.jpg" alt="" /></li>
<li><img src="img/14.jpg" alt="" /></li>
<li><img src="img/15.jpg" alt="" /></li>
<li><img src="img/16.jpg" alt="" /></li>
<li><img src="img/17.jpg" alt="" /></li>
<li><img src="img/18.jpg" alt="" /></li>
</ul>
</body>
</html>

这里附录一下简写的规则，可以百度一下sublime text快捷书写规则与方法。

textEnd.css

h1{
width: 100%;
height: 60px;
margin:;
line-height: 60px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
position: fixed;
top:;
left:;
text-align: center;
}
.textC{
width: 96%;
margin: 60px auto;
-webkit-column-count:;
-moz-column-count:;
column-count:;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule: 1px dashed rgba(0,0,0,.3);
-moz-column-rule: 1px dashed rgba(0,0,0,.3);
column-rule: 1px dashed rgba(0,0,0,.3);
}
.textC h2,.textC h3{
font-weight: bold;
color: #35B558;
line-height: 2em;
}
.textC h4{
font-weight: bold;
line-height: 2em;
}
.textC p{
line-height: 1.5em;
margin: 10px 0;
}
.textC p:first-letter{
font-weight: bold;
}
.textC ol li{
list-style-position: inside;
list-style-type: decimal;
}

textEnd.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/textEnd.css"/>
</head>
<body>
<h1>关于我们</h1>
<div class="textC">
<h2>关于我们</h2>
<p>极客学院IT在线教育平台隶属于北京优亿致远无线技术有限公司。</p>
<p>极客学院是中国最大的IT职业在线教育平台。极客学院的理念是通过最新实战课程，帮助职业开发者系统学习Android、Cocos2d-x、iOS、HTML5、Java等高薪所需的职业开发技能。目前，超过60万专业技术开发者通过极客学院学得了更有竞争力的最新IT技能。</p>
<p>2014年，中国几乎所有的热门技术及应用课程，都由极客学院首发。包括：中国第一个「Flappy Bird」课程、中国第一个「2048」的课程、中国第一个「围住神经猫」等诸多中国乃至全球首发课程。在六月份，WWDC苹果发布全新的Swift开发语言时，极客学院更是7个小时就上线了Swift的开发课程。</p>
<p>创始团队写过中国大陆第一本Android开发教材，重印高达18版，是Android开发学习入门必读红宝书。同时创办了中国最大的移动开发者社区eoe(注册用户超200W)。</p>
<h3>一、什么是极客</h3>
<ol>
<li>不满于现状，自信且不迷信权威</li>
<li>保持一颗好奇心，勇敢尝试各种事情</li>
<li>总是寻求更好的解决问题的方式</li>
<li>不断给自己设置挑战并且努力去完美超越</li>
<li>某个领域的专家并热爱分享自己的知识</li>
</ol>
<p>在极客学院，团队的每个人都是极客精神的继承者和实践者。</p>
<h3>二、我们的价值观</h3>
<ol>
<li>身为极客，与众不同</li>
<li>敏捷行动，快速反思，且行且调整</li>
<li>不抱怨，主动改变，自适应</li>
<li>以目标和结果论英雄</li>
<li>永远寻找最优雅的方式解决问题</li>
<li>透过数据，背后的真相</li>
</ol>
<p>极客学院，我们痛恨平庸和因循守旧，我们用心做每一件事，用极客精神影响和改变我们身边的人和事，并以此为目标，改变中国传统教育，释放学习能力，帮助更多人快速学会开发技术，成就每个人的职业生涯，共同去改变这个世界。</p>
<h3>三、我们的使命</h3>
<ol>
<li>打破传统教育纸上谈兵的禁锢，直接将企业需求通过课程输入给学习者</li>
<li>通过为学习者提供专业精确的职业路径图，帮助学习者快速提升开发能力</li>
</ol>
<h3>四、创始人故事</h3>
<h4>靳岩，极客学院创始人，CEO</h4>
<p>中国大陆第一本Android开发教程《Google Android开发入门与实战》作者之一，eoe联合创始人; AAMA六期学员; 北京邮电大学毕业; 擅长Android开发，正在学习iOS和W8等技术开发。移动App控，喜欢最新最简单的App，Google产品控，喜欢Google的各类产品，喜欢移动开发，喜欢看书，研究和体验各类产品。喜欢看火影，海贼王，魔兽对战录像，喜欢结交各路朋友，喝各种茶，喝各类咖啡，偶尔吟诗作词，喜欢滑雪，游泳，禅。</p>
<p>他认为:</p>
<ol>
<li>一个人应该为了自己的理想而奋斗</li>
<li>人活着只有一次，所以一定要做自己下定决心去做的事情</li>
<li>失败可以原谅，但是不能原谅的是不去尝试和努力</li>
</ol>
<h4>姚尚朗，极客学院创始人，CTO</h4>
<p>网名 IceskYsl，简称Ice， 80后，典型巨蟹男，移动互联网创业者；技术、产品、运营、管理均不得其道，略懂皮毛；Google 产品的重度依赖者，Mac、Android、iPhone、BlackBerry 的非典型用户；求学武汉，毕业南下深圳，而后北漂在京，至今数年有余。追寻内心的想法，不随波逐流，爱折腾、爱旅行、孩子气、享受工作，安静的做喜欢的事情。译《The Rails Way》，著有：《Google API 大全—-编程开发实例》、《Google Android 开发入门与实战》、《It’s Android Time: Google Android 创赢路线与产品开发实战》。</p>
<h4>李杰，极客学院创始人</h4>
<p>80后，移动互联网创业者，大四时北上联合创办eoe。非典型文艺青年一枚，果粉一枚，各种互联网产品、App重度体验用户，早期BBer。国内IT沙龙活动的活跃者，擅长市场活动策划。正儿八经运营过社区，干过PR。闲暇时写过小说、拿过摄影奖、拍过微电影。爱阅读、摄影、绘画。热爱艺术，时常隐身去各种画展，独自搞定过公司的大型涂鸦。喜欢思考，台球控，正能量。</p>
</div>
</body>
</html>

18.4、媒体查询解析

这一部分就是针对不同的设备之间浏览器的页面究竟该怎么显示进行处理，笔记仍然是等看完所有课程再记录

textEnd.css

/*
响应式布局，移动优先原则，优先实现小屏幕
* */
h1{
width: 100%;
height: 60px;
margin:;
line-height: 60px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
position: fixed;
top:;
left:;
text-align: center;
}
.textC{
width: 96%;
margin: 60px auto;
-webkit-column-count:;
-moz-column-count:;
column-count:;
-webkit-column-gap: 1px;
-moz-column-gap: 1px;
column-gap: 1px;
-webkit-column-rule: 1px dashed rgba(0,0,0,.3);
-moz-column-rule: 1px dashed rgba(0,0,0,.3);
column-rule: 1px dashed rgba(0,0,0,.3);
}
.textC h2,.textC h3{
font-weight: bold;
color: #35B558;
line-height: 2em;
}
.textC h4{
font-weight: bold;
line-height: 2em;
}
.textC p{
line-height: 1.5em;
margin: 10px 0;
}
.textC p:first-letter{
font-weight: bold;
}
.textC ol li{
list-style-position: inside;
list-style-type: decimal;
}
@media only screen and (min-width: 481px) {
.textC{
-webkit-column-count:;
-moz-column-count:;
column-count:;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
}
@media only screen and (min-width: 769px) {
.textC{
-webkit-column-count:;
-moz-column-count:;
column-count:;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
}

textEnd.html

18.5、响应式表格项目实战

end.css

/*
绿色 #35B558
橙色 #ff5c00
深灰 #666666
浅灰 #F8F8F8
* */
h1{
font-size: 30px;
text-align: center;
color: #666;
}
table.responsive{
width:98%;
margin: 0 auto;
color: #000;
border-collapse: collapse;
border: 1px solid #666666;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
table.responsive td,table.responsive th{
border: 1px solid #666666;
padding: .5em 1em;
}
table.responsive th {
background: #35B558;
height: 24px;
line-height: 24px;
}
table.responsive .actions a{
color: #ff5c00;
padding: 0 2px;
text-decoration: none;
}
table.responsive .number,table.responsive .actions{
text-align: center;
}
@media (max-width:480px){
table.responsive{
box-shadow: none;
border: none;
}
table.responsive thead {
display: none;
/*不显示表头*/
}
table.responsive tr, table.responsive td {
display: block;/*以块级元素显示*/
}
table.responsive td:nth-child(1), table.responsive td:nth-child(2) {
padding-left: 25%;
}
table.responsive td:nth-child(1)::before {
content:'课程序号';
position: absolute;
left: .5em;
font-weight: bold;
}
table.responsive td:nth-child(2)::before {
content:'课程名称';
position: absolute;
left: .5em;
font-weight: bold;
}
table.responsive tr {
position: relative;
margin-bottom: 1em;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
table.responsive td {
border: none;
}
table.responsive .number {
background: #35B558;
text-align: left;
}
table.responsive td.actions {
position: absolute;
top:;
right:;
border: none;
background: none;
}
}

end.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/end.css"/>
</head>
<body>
<h1>极客学院相关课程</h1>
<table class="responsive">
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="number">150406</td>
<td class="name">移动应用开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140407</td>
<td class="name">web前端开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140408</td>
<td class="name">操作系统&数据库系列课程</td>
<td class="actions">
<a href="#">修改</a><a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140409</td>
<td class="name">智能硬件&物联网系列课程</td>
<td class="actions">
<a href="#">修改</a><a href="del">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>

18.6、响应式图片项目实战

响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。常见实现方式有：

用srcset和sizes加载不同图片

picture、source media加载不同图片

用source type指定多种样式

超赞polyfill-picturefill

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">



<style>
.imgContainer{ max-width: 1000px;
margin: auto;
}
.imgContainer h2{
font-size: 2vw;
}
.imgContainer img{
width: 100%;
} </style>
</head>
<body>
<div class="imgContainer">









 


   <img srcset="img/480x320.gif 480w,
img/640x427.gif 640w,
img/720x480.gif 720w,
img/900x600.gif 960w" sizes="(min-width:900px) 900px,
100vw"
src="img/480x320.gif" alt="responsive images" />      
 




 


 
  
 

 </div>
</body>
</html>