clearThh跟着李南江学习HTML5—CSS学习
1、从html到css
经过了html的学习之后，在基本掌握了一些编写企业开发中需要的标签之后我开始了给标签添加样式的学习，让自己的标签不再是那么单调，可以给网页赋予颜色，字体的大小，网页的布局，
网页的布局从李南江老师所教给我的就是一定要先分析一个网页他的一个整体的布局是什么样的，比如我们的网页就像一个大盒子，大盒子中拥有很多小盒子，我们可以通过css来给这个小盒子进行定位布局，让这些小盒子居左居右居中，然后再给这些小盒子里面添加内容，给这些内容用我们的css来给这些盒子添加属性，让它变得更加好看，并且用简单清晰的讲课让我们知道用户希望看到的网页是什么样子的，以我的理解网页现在应该是从上至下，然后从左至右。
在学习css的过程中有很多属性需要去记忆，虽然有代码提示，但是江哥还是强调有点属性背也要背下来，所以自己的英文基础其实并不好，有些时候会反复花大量时间去记住一些代码属性，有一些代码属性中也有很多的值需要记忆，在大学期间基本没有完整看完一本书的我来说这是一个很大的挑战，但是来到小码哥就是想让自己变得更好，让自己不再那么堕落，想找回当初高三拼搏的感觉！
css对于我来说最难理解的应该有几个难点，其中包括定位属性，过渡模块，2D转换模块，动画属性，3D转化模块，这几个属性让我确实有点难以理解，（PS:这里需要感谢我的同桌同学，也正是因为有了他让我再学习这些属性的时候能够更快的去理解！）其实我相信可能对于平面还有立体没有了解的同学都会像我一样觉得为什么正方形这个转90度就会看不见了等等很多的问题，但是我想的是千万不能钻牛角尖，有的时候先看是不是，再去问为什么，所以以这种学习思维，很多难以理解的点也就经过反复的敲代码实验也就慢慢理解了！
难点理解练习：
相对定位：相对于标准流中自己的原来的位置来移动。
格式：position：relative;
绝对定位：相对于body来定位。
格式：position：adusolute;
固定定位：
格式：position：fixed;
transition-property:width,height,background-color;
transition-duration:5s,5s;
}
过渡模块：
格式：
div{
width:100px;
height:100px;
margin:0auto;
background:yellow;
属性：transition-property:width,height,background-color;
属性：transition-duration:5s,5s;
}
div:hover{
width:200px;
height:200px;
background:tomato;
}
2D转换模块：
ul li:nth-child(2){
/*旋转属性*/
transform:rotate(45deg);
}
ul li:nth-child(3){
/*水平垂直平移属性*/
transform:translate(100px,0px);
}
ul li:nth-child(4){
/*缩放属性
如果取值是1，宽高不变
如果取值小于1，宽高缩小
如果取值大小1，宽高放大*/
transform:scale(0.5,1);
}
ul li:nth-child(5){
/**/
transform:rotate(60deg)translate(100px,0px)scale(1.5,1.5);
/*transform: translate(100px,20px);*/
/*transform: scale(1,1.5);*/
}
3D转化模块：
ul{
width:200px;
height:200px;
border:1px solid#000;
box-sizing:border-box;
margin:100px auto;
position:relative;
transform:rotateX(0deg)rotateY(0deg);
transform-style:preserve-3d;
animation:move5s linear0s infinite normal;
}
@keyframesmove{
from{
transform:rotateX(0deg)
}
to{
transform:rotateX(360deg)
}
}
ul li{
list-style:none;
width:200px;
height:200px;
font-size:60px;
text-align:center;
line-height:200px;
position:absolute;
left:0;
top:0;
}
ul li:nth-child(1){
background:yellow;
transform:translateX(-100px)rotateY(90deg);
}
ul li:nth-child(2){
background:red;
transform:translateX(100px)rotateY(90deg);
}
ul li:nth-child(3){
background:orange;
transform:translateY(-100px)rotateX(90deg);
}
ul li:nth-child(4){
background:skyblue;
transform:translateY(100px)rotateX(90deg);
}
ul li:nth-child(5){
background:green;
transform:translateZ(-100px);
}
ul li:nth-child(6){
background:pink;
transform:translateZ(100px)
}
这些就是我在css学习中一些难点，都会反复的去练习巩固，有时候回家路上还会去想，记忆这些单词的含义和属性！努力奋斗！！
学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）
