html5css310次課8文字圖片背景變形

HTML5+CSS3CSS3文字，圖片，背景，變形自我介紹NickWang王立程序員多家上市公司、基金顧問（宜信、知乎、曠視、華米、石頭科技、艾瑞咨詢、創(chuàng)業(yè)邦等）2016年~至今百變空間CTO/聯(lián)合創(chuàng)始人/董事，領導百變互聯(lián)網(wǎng)技術(shù)研發(fā)中心，深耕機器學習、數(shù)據(jù)驅(qū)動營銷和AI。2011年~2016年阿里-阿里媽媽，總監(jiān)，曾管理五個產(chǎn)品線，參加過友盟和芒果移動的收購工作，離職前是芒果移動的總負責人；深耕機器學習算法和高可用性引擎技術(shù)；18項發(fā)明專利擁有者，第一發(fā)明人。2006年~2011年微軟-美國微軟、ATC技術(shù)經(jīng)理，參與了WindowMobile，IE和SQLServer\Cloud的研發(fā)管理工作。資深技術(shù)作者，深耕技術(shù)公賬號“跟隔壁王校長學習會上癮”，資深在行專家（搜索“王立”），資深知乎作者，（搜索“WangNick”）Agenda文字圖片背景變形知識點X24動手實驗X24文字知識點1-1字體類型font-family：動手實驗1-1文字知識點1-2字體大小font-size：small，medium，large。。。20px0.8em0.6in%原則：固定布局，用px；不固定布局，用%或者em動手實驗1-2文字知識點1-3字體顏色color：顏色名：red，green，black#XXXXXXrgb(DDD,DDD,DDD)rgb(DD%,DD%,DD%)動手實驗1-3文字知識點1-4字體粗細font-weight：normal，bold，bolder，lighter100~900（越大，越粗）normal=400bold=700動手實驗1-4文字知識點1-5字體斜體：font-style：normal，italic，oblique動手實驗1-5文字知識點1-6字體修飾text-decoration：none，underline下劃線，overline頂劃線，line-through刪除線可以同時設置幾個decoration動手實驗1-6文字知識點1-7字體對齊方式text-align：left，right，center動手實驗1-7文字知識點1-8字體字間距、詞間距、行間距l(xiāng)etter-spacing，word-spacing，line-height：em%px動手實驗1-8文字知識點1-9字體縮進text-indent：em%px可以是負值動手實驗1-9圖片知識點1-10圖片邊框border-stylesolid，dotted，dashedborder-colorborder-width可以為每條邊設定動手實驗1-10圖片知識點1-11圖片大小width：height：一般只設定寬度或者高度同時設定，如果長寬比不一致，會被拉伸。動手實驗1-11圖片知識點1-12圖片對齊方式橫向?qū)Rtext-align：left，right，center動手實驗1-12圖片知識點1-13圖片對齊方式縱向?qū)R方式vertical-align：baseline，sub，super，top，middle，bottom動手實驗1-13圖片知識點1-14文字環(huán)繞圖片使用浮動動手實驗1-14背景知識點1-15背景顏色：background-color：body，div動手實驗1-15背景知識點1-16背景圖片：background-image：url（）background-repeat：repeat-x，repeat-y，no-repeatbody，div動手實驗1-16列表樣式知識點1-17列表項符號：list-style-type：decimal，square，disc動手實驗1-17列表樣式知識點1-18列表項圖片符號：list-style-image：url()動手實驗1-18CSS3新加屬性知識點1-19文字陰影text-shadow：簡單陰影模糊陰影多色陰影動手實驗1-19CSS3新加屬性知識點1-20文字溢出text-overflow：clip，ellipsis，ellipsis-word動手實驗1-20CSS3新加屬性知識點1-21RGBA：HSL、HSLAopacity屬性動手實驗1-21形變知識點1-22transform用于內(nèi)聯(lián)或者塊元素，可以旋轉(zhuǎn)、縮放、移動元素Webkit：-webkit-transformGecko：-moz-transformPresto：-o-transformIE：暫不支持形變動手實驗1-22一個一邊旋轉(zhuǎn)一邊縮放的圖片形變知識點1-23rotatescaletranslateskew動手實驗1-23形變知識點1-