1、從html到css

? ? ? ? 經(jīng)過了html的學習之后，在基本掌握了一些編寫企業(yè)開發(fā)中需要的標簽之后我開始了給標簽添加樣式的學習，讓自己的標簽不再是那么單調(diào)，可以給網(wǎng)頁賦予顏色，字體的大小，網(wǎng)頁的布局，

? ? ? ?網(wǎng)頁的布局從李南江老師所教給我的就是一定要先分析一個網(wǎng)頁他的一個整體的布局是什么樣的，比如我們的網(wǎng)頁就像一個大盒子，大盒子中擁有很多小盒子，我們可以通過css來給這個小盒子進行定位布局，讓這些小盒子居左居右居中，然后再給這些小盒子里面添加內(nèi)容，給這些內(nèi)容用我們的css來給這些盒子添加屬性，讓它變得更加好看，并且用簡單清晰的講課讓我們知道用戶希望看到的網(wǎng)頁是什么樣子的，以我的理解網(wǎng)頁現(xiàn)在應該是從上至下，然后從左至右。

? ? ?在學習css的過程中有很多屬性需要去記憶，雖然有代碼提示，但是江哥還是強調(diào)有點屬性背也要背下來，所以自己的英文基礎(chǔ)其實并不好，有些時候會反復花大量時間去記住一些代碼屬性，有一些代碼屬性中也有很多的值需要記憶，在大學期間基本沒有完整看完一本書的我來說這是一個很大的挑戰(zhàn)，但是來到小碼哥就是想讓自己變得更好，讓自己不再那么墮落，想找回當初高三拼搏的感覺！

? ?css對于我來說最難理解的應該有幾個難點，其中包括定位屬性，過渡模塊，2D轉(zhuǎn)換模塊，動畫屬性，3D轉(zhuǎn)化模塊，這幾個屬性讓我確實有點難以理解，（PS:這里需要感謝我的同桌同學，也正是因為有了他讓我再學習這些屬性的時候能夠更快的去理解！）其實我相信可能對于平面還有立體沒有了解的同學都會像我一樣覺得為什么正方形這個轉(zhuǎn)90度就會看不見了等等很多的問題，但是我想的是千萬不能鉆牛角尖，有的時候先看是不是，再去問為什么，所以以這種學習思維，很多難以理解的點也就經(jīng)過反復的敲代碼實驗也就慢慢理解了！

難點理解練習：

相對定位：相對于標準流中自己的原來的位置來移動。

格式：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轉(zhuǎn)換模塊：

ul li:nth-child(2){

/*旋轉(zhuǎn)屬性*/

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轉(zhuǎn)化模塊：

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就選李南江，選培訓機構(gòu)我只選小碼哥（www.520it.com）