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>
<!--实现动画的方法：
linear匀速变化
ease-in由慢到快
ease-out由快到慢
ease ease-in-out 两个都是慢--快--慢
-->
<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>
<!--谷歌的那个html5.js的链接好像失效了，下面这个一样是可以用的-->
<script src="http://gist.githubusercontent.com/billrobbins/4608382/raw/46fbb509576823dd087e1a86e57c0efe2a8dbf6e/html5.js"></script>
<!--上面这个地址的来源地址:https://gist.github.com/billrobbins/4608382-->
<![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
<!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.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">
<!--<meta name="viewport"-->
<!--content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title>-->
<!--<link rel="stylesheet" type="text/css" href="css/css.css"/>-->
<style>
.imgContainer{ max-width: 1000px;
margin: auto;
}
.imgContainer h2{
font-size: 2vw;
}
.imgContainer img{
width: 100%;
} </style>
</head>
<body>
<div class="imgContainer">
<!--<h2>picture source media</h2>-->
<!--<picture>-->
<!--<source media="(max-width:480px)" srcset="img/480x320.gif">-->
<!--<source media="(max-width:640px)" srcset="img/640x427.gif">-->
<!--<source media="(max-width:720px)" srcset="img/720x480.gif">-->
<!--<source media="(max-width:900px)" srcset="img/900x600.gif">-->
<!--<img src="img/900x600.gif" alt="" />-->
<!--</picture>-->
<!--<h2>srcset设置响应式图片</h2>-->
<!--<img src="img/480x320.gif" alt="responsive images"--> <!--srcset="img/480x320.gif 480w,-->
<!--img/640x427.gif 640w,-->
<!--img/720x480.gif 720w,-->
<!--img/900x600.gif 900w"--> <!--sizes="(min-width:900px) 900px,100vw"--> <!--/>--> <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" /> <!--srcset="img/480x320.gif 480w,
img/640x427.gif 640w,
img/720x480.gif 720w,
img/900x600.gif 960w" ----这一段的代码后面的w就相当于一个标记，目前还没有见过除了w之外的写法，
这个w就相当于实际图片宽度的像素值，但是他们只是一对一关系的标记。所以
要知道对应关系才可以正确使用。
--> <!--sizes="(max-width:480px) 480px,
100vw"
这句代码的意思是在视窗的最小宽度为900px时，选择要加载的图片时，当前视窗就当是按照大小为900px计算
其他的宽度就是100% 设备宽度（vw相关单位解释：
1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。
3.vmin：vw和vh中较小的那个。
4.vmax：vw和vh中较大的那个。 1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了,
em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情
这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到 结论：之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果 3、rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的 rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)
），这里的vw如果改成了具体单位，那意思就是除了当成900px之后只剩一个选项那就是100px的，响应式布局只会显示有两张图。
--> <!--这段代码我写得是没有问题的，问题出在浏览器的默认处理方式上。--> <!--在firefox发现一个问题，就是点开浏览器默认的像素比是1.25，
需要调整像素比为1才能按照规定数值工作，否则会与给定数值不一致
谷歌浏览器没找到在哪调整这个像素比，而且谷歌浏览器也是默认像素比是
1.25，所以就会一直有问题。目前还没弄明白像素比的问题，我要继续研究--> <!--我计算了一下，像素比就是把本来计算的数值乘以这个数值，
数值越大的代表的设备分辨率越高。所以在浏览器中实际显示的时候
就会发生图像视觉大小很小的时候，分辨率就已经很高了。--> <!--我日了狗了啊，我终于知道谷歌浏览器怎么个回事了，弟弟行为啊，-->
<!--谷歌浏览器只负责第一次加载时的样式，他妈的更改之后就不管之后浏览器样式的更改了。--> <!--<img-->
<!--sizes="(min-width:900px) 900px-->
<!--,(min-width:720px) 720px-->
<!--,(min-width:640px) 640px-->
<!--,(min-width:480px) 480px-->
<!--"--> <!--srcset="img/480x320.gif 480w,-->
<!--img/640x427.gif 640w,-->
<!--img/720x480.gif 720w,-->
<!--img/900x600.gif 900w"--> <!--src="img/480x320.gif"-->
<!--alt="responsive images"--> <!--/>--> <!--<img srcset="img/480x320.gif 480w, img/640x427.gif 640w, img/720x480.gif 720w"-->
<!--sizes="(max-width: 480px) 480px, 100vw" />--> <!--<img class="image" src="mm-width-128px.jpg"-->
<!--srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"-->
<!--sizes="(max-width: 360px) 340px, 128px">--> </div>
</body>
</html>
参考资料：
让我启蒙的一篇----https://www.jianshu.com/p/607567e488fc
让我理解最深刻的一篇----响应式图片 srcset 和sizes属性：https://blog.csdn.net/wuyou1336/article/details/73863071
响应式图片----https://blog.csdn.net/zyr12/article/details/50211689
image的srcset属性----https://segmentfault.com/a/1190000004254111
web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- 史上最全的web前端开发程序员学习清单！
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
随机推荐
- js中的继承和重载
js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...
- mysql索引优化及explain关键字段解释
一.explain关键字解释 1.id MySQL QueryOptimizer 选定的执行计划中查询的序列号,表示查询中执行select 子句或操作表的顺序.id 值越大优先级越高,越先被执行.id ...
- <每日一题>题目21：简单的python练习题(21-30)
#21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...
- 比特承诺 Bit Commitment
Introduction-A story Alice:股票经纪人 Bob:股民 Alice:你的钱交给我,我替你买股票,我专业,挣钱多! Bob:怎么证明? Alice:我们上月买进的1 ...
- 编译安装Python3.6.1
系统:CentOS 7 Python: 3.6.1 去官方网站下载Python的源码包 然后准备开发环境和服务器平台开发 注意:python编译还依赖一个zlib-devel(本人第一次编译就因为不知 ...
- 【codeforces 500D】New Year Santa Network
[题目链接]:http://codeforces.com/problemset/problem/500/D [题意] 有n个节点构成一棵树; 让你随机地选取3个不同的点a,b,c; 然后计算dis(a ...
- cgroups实验
# yum install -y libcgroup libcgroup-tools创建控制组cgcreate -g cpu:/testcgcreate -g cpu:/test2 禁用quotacg ...
- PAT甲级——A1029 Median
Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...
- 线程安全之suspend（挂起） 和resume（执行）
suspend()不会释放锁 如果加锁发生在resume()之前会发生死锁 t.join()是阻塞此方法,此线程再继续:通常用于在main()主线程内,等待其它线程完成再结束main()主线程.图中j ...
- 搭建maven聚合工程包含springboot模块
一.新建一个maven项目 二.删除src 打开pom.xml 补充标签 <packaging>pom</packaging> 新建 <module>brr- ...