响应式网页设计
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
学习日记：第一章
基础html和html5
<h1></h1>分别是起始符和结束符
<h2>代表2级标题，还有<h3><h4><h5>等等
<p></p>代表的是段落
按照惯例，所有的HTML标签都应该是小写字母，不会用大写字母
注释开始标签<!--，结束标签是-->
照片格式<img src=" " alt=" ">
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a> 超链接方法，a叫做锚点元素，锚文字为cat photos，target属性是"_blank"说明链接会在一个新建标签页打开，href是锚点元素的另外一个属性，用来指定连接的URL
也可以添加页面内的连接，将元素的href属性设置为"#加对应的id"，然后在后面的想要跳转的属性上面要加上对应的id，例如
<a href="#footer">Jump to Bottom</a>
<footer id="footer">Copyright Cat Photo App</footer>
在不确定a元素将要链接到哪里时，我们可以先用#写在上面，后续可以用JavaScript来更改链接的指向
<ul> (无序列表)
<li></li>
.
.
.
<li><li>
<ul>
<ol>(有序列表)
<li></li>
…
<li></li>
</ol>
文本输入框<input type=""placeholder="">后面如果加上required属性就可以设置文本框为必须要输入的形式，例如<input type=""placeholder=""required>
表格<form action=""></form>
按钮<button type="">文本内容</button> 当type的属性是submit时，点击提交按钮会将数据发送到action属性指定的URL上面
单选按钮：radio buttons
每一个单选按钮都会被嵌套在它自己的label元素里面，相当于给input元素和包裹它的label元素建立起关系，所有关联的单选按钮都会拥有相同的name属性，创建一组单选按钮时，选中其中一个按钮，其他按钮即为未选中，只能提供一个答案。
复选框：checkboxes
每一个复选框都应该嵌套在它自己的label元素中。这样，我们相当于给input元素和包裹它的label元素建立起了对应关系
Value属性：提交表单时，所选项的值会发送到服务端，radio和checkbox的value属性值决定了发送到服务端的实际内容。如果没有指明value属性值，则会使用默认值做为表单数据提交，也就是on。例如，如果用户选中“indoor”选项然后提交表单，表单数据则会包含indoor-outdoor=on。这样的表单数据看起来不够直观，因此最好将value属性值设置为一些有意义的内容。
checked属性：在input属性里面添加checked这个词，就可以实现将复选框或者是单选按钮都设置为默认选中。
div元素：内容划分元素，是一个包裹其他元素的通用容器。以<div>开始和</div>结束
在文章的顶部，我们需要告诉浏览器网页我们所使用的HTML版本，具体的语句就是<!DOCTYPE …>，其中“…”代表的就是版本号，例如<!DOCTYPE html>对应的就是HTML5，其中htnl即可以大写也可以小写，其余部分都是大写。整个HTML代码都要位于html标签中，开始部分为<html>，结束部分为</html>
html的结构主要分为两部分，head和body。网页的描述应该放入head标签，网页的内容（向用户展示的）应该放到body标签，link，meta，title，style都应该放入到head标签中。head元素应该包含title，body应该包含h1和p。
例子：
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
学习日记：第二章
基础CSS
<h1></h1>分别是起始符和结束符
修改文本颜色，例如修改h2文本颜色，只需要修改h2的style属性，；要特殊注意。例如<h2 style="color: blue;">CatPhotoApp</h2>
更改文本颜色时，可以在代码的顶部创建一个style声明区域，如<style></style>。在样式声明区域内，可以为所有h2元素创建一个css selector。如果
想要所有的h2元素变成红色，可以添加，<style>h2{color:red;}</style>
CSS的class具有可重用性，可应用于各种html元素，可以在<style>样式声明区域里面创建class容器，例如
<style>
.blue-text{
color:blue;
}
</style>
然后将class应用于html元素里面:<h2 class="blue-text">CatPhotoApp</h2>,这里面需要注意的就是在CSS class元素里面，class名以一个句号开头，
在html元素的class属性里面，class名的开头没有句号。通过这种方式，只要元素属性里面设置了class，就可以统一改变颜色。
控制字体的大小，font-size属性，可以在<style>里面更改，例如：h1{font-size:30px;}
font-family属性，字体族名，用于设置不同的字体，也可以使用google font，需要从Google Fonts上面复制字体的URL，并粘贴在html里面，例如
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
这个要放在style的上面，即程序的最上面，然后在程序里面就可以调用这个字体。
所有浏览器都有几种默认字体，包括monospace,serif,sans-serif，当字体不可用的时候可以有备选方案，使用替代的字体，例如 p {font-family : Helvetica,sans-serif ; }，
通用的字体不区分大小写，也不需要引号，因为它们是CCS中的关键字。
CSS的width属性可以控制元素的宽度，和设置的文本字号一样，以px（像素）为单位来设置单位的宽度，例如<style>.larger-image{width:500px;}</style>,
然后在对应需要设置的元素里面添加class属性为设定的值
CSS边框具有style，color，width属性，想要设置一个html元素边框设置为5px的红色实线边框，可以设为
<style>
.thin-red-border{
border-color:red;
border-width:5px;
border-style:solid;
}
</style>
一个元素上可以同时应用多个class，用空格来分隔不同的class即可
border-radius属性单位为px（像素），可以让图片变得圆润，也可以设置为百分数，例如50%可以将图片设置成圆形，超过百分之50之后都显示的是圆形，
少于百分之50会随着数的增多而增大圆角
设置背景颜色时是设置background属性，可以在style里面设置
.silver-background {
background-color: silver;
}
然后在对应设置的元素里面添加class
除了class属性，每一个HTML元素都有一个id属性，使用id属性可以通过id选择器来改变单个元素的样式
通过id属性可以通过CSS来设置样式，不过id不可以重复，它只能作用于一个元素上，如果一个元素同时应用了class和id，且两者设置的样式有冲突，
会优先应用id中所设置的样式。例如可以在style里面设置id为cat-photo-element的元素的背景颜色，
#cat-photo-element{
background-color:green;
}
注意在style标签里面，声明class的时候必须在名字前面插入.符号，同样，在声明id的时候，也必须在名字前面插入#符号。
所有的HTML元素都是以矩形为基础，每个HTML元素所占有的矩形空间由三个重要的元素控制，它们分别是：内边距padding，外边距margin，边框border。
padding用来控制元素内容与border之间的空隙大小。外边距margin用来控制元素的边框与其他元素之间的border距离。margin用来控制border与周围元素
之间的距离大小，如果把元素的margin设置为负值，元素会变得占用更多空间。元素的每个方向的padding都可以设置一个特定的值，CSS允许你使用
padding-top，padding-bottom，padding-right，padding-left属性来设置四个不同方向的padding的值。margin同理，也可以设置margin-top，
margin-right，margin-buttom，margin-left四个属性来设置四个不同方向的margin值。如果不想每次都声明这四个属性的话可以把他们汇总成一行，
像是这样：padding：10px 20px 10px 20px，四个值按顺时针方向排序：上，右，下，左
我们可以使用[attr=value]属性选择器来修改元素的样式，例如我们可以使用一段代码改变所有type为radio的元素的外边距，例如：
[type='radio']{
margin:20px 0px 20px 0px;
}
除了px，CSS也有其他单位可以使用，单位长度可以分为两种类型：相对和绝对。
绝对单位与长度的物理单位相关。in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能
会造成误差。相对单位长度，比如em和rem，他们的实际值会依赖其他长度的值而决定。比如em的大小基于元素字体的字体大小。如果使用它来设置font-size的值，
它的值会跟随父元素的font-size值来改变。有些长度单位选项是相对视窗大小来改变值的，这种设定符合响应式网页设计的原则
每一个html页面都应该有一个body元素，我们可以再body元素上面使用CSS格式，设置body元素样式的方法跟设置其他html元素样式一样，并且其他元素也会继承
body中所设置的样式。在设置元素的class属性的颜色与body里面设置的颜色不一样时，class属性的颜色会覆盖body设置的字体颜色。
<style>标签里面声明的class顺序十分重要，之后的声明会覆盖之前的声明。第二个声明的优先级始终高于第一个声明。再次说明是class的声明顺序决定谁的优
先级更高，而不是元素设置class的时候谁放在前面。
id属性设置的颜色会覆盖class属性设置的颜色，id属性更改颜色可以创建id选择器，然后在里面更改颜色。
内联的样式优先级高于id属性设置的颜色
默认格式是上面提到的优先级顺序，而我们可以通过加 !important 来定义优先级最高的设置。
我们在设置的颜色的时候也可以通过设置十六进制的数码来对应相应的颜色，例如#000000代表的是黑色，其中每两位代表的是一种颜色的值大小。注意里面每个数
字都代表16进制，从0到F。其中对应的数值大小不同会使最终的颜色发生变化，所以6位16进制的数会组合出1600万种颜色。也可以省略的写，例如#F00代表的是红
色，和#FF0000是一样的效果。就是将2位代表大小的数字减小为1位。
RGB值也是表示颜色的另外一种方法，例如黑色就是rgb（0，0，0），白色就是rgb（255，255，255）。这里面简单的计算一下就知道是一样的，因为16进制表示颜
色的时候是2位16进制表示一种颜色的亮度大小，两个16进制数的范围就是16*16=256，而RGB表示法中的数字就是从0到255，也就是256个。
CSS变量设置，在style里面设置，--开头，例如
.penguin{
--penguin-skin:gray;
}
在之后的使用过程中当设置颜色时，可以用var(--penguin-skin)来代表设置的变量颜色，例如在设置背景的时候background:var(--penguin-skin);
使用变量来作为CSS属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。例如background: var(--penguin-skin,black);如果你的变量
没有设置，这些会把背景设置为black。提示：这对调试代码也会有帮助。
使用CSS时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题会显得很重要。当浏览器解析页面的CSS时，会自动忽视不能识别或者不支持的属性。
举个例子，如果使用CSS变量来指定站点的背景色，IE浏览器会由于不支持CSS变量而忽略背景色。此时，浏览器会尝试使用其他值。但是如果没有找到其他值，
则会使用默认值，也就是没有背景色。这意味着如果想提供浏览器降级方案，在声明之前提供一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览
器会在后面的声明里覆盖降级方案。
当穿件一个变量时，变量会在创建变量的选择器里使用。同时，在这个选择器的后代选择器里面也是能用的。因为CSS变量是可以继承的，和普通的属性一样。CSS变量
经常会定义在:root元素内，这样就可以被所有选择器继承。:root是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是html元素。我们在:root里创
建变量在全局都可用，即在任何选择器里都生效。
当你在:root里创建变量时，这些变量的作用域是整个页面。如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
CSS变量可以简化媒体查询的定义方式。例如，屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
第二章最后例程：
<style>
:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
/* 只修改这一行下面的代码 */
/* 只修改这一行上面的代码 */
}
}
.penguin {
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: var(--penguin-size, 300px);
height: var(--penguin-size, 300px);
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 5%;
left: 25%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(130deg);
z-index: -1;
animation-duration: 3s;
animation-name: wave;
animation-iteration-count: infinite;
transform-origin:0% 0%;
animation-timing-function: linear;
}
@keyframes wave {
10% {
transform: rotate(110deg);
}
20% {
transform: rotate(130deg);
}
30% {
transform: rotate(110deg);
}
40% {
transform: rotate(130deg);
}
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left:-23%;
background: white;
width: 150%;
height: 100%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
