學(xué)習(xí)筆記-CSS-2017.2.17

一、CSS3 2D 轉(zhuǎn)換

1、transform(rotate(deg))
通過 rotate() 方法羊精，元素順時(shí)針旋轉(zhuǎn)給定的角度铃在。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。

<style type="text/css">
div.hk{ 
    height: 200px;
    width: 300px;
    padding: 30px;
    margin: 30px;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    background-color: #ccc;
}
</style>
    <div class="hk">this is a demo.</div>
</body>

2、translate() 方法
通過 translate() 方法，元素從其當(dāng)前位置移動(dòng)威蕉，根據(jù)給定的 left（x 坐標(biāo)）和 top（y 坐標(biāo)）位置參數(shù)：

<style type="text/css">
div.hk{ 
    height: 200px;
    width: 300px;
    padding: 30px;
    background: #ccc;
    transform: translate(30px, 60px);
    -o-transform: translate(30px, 60px);
    -ms-transform: translate(30px, 60px);
    -moz-transform: translate(30px, 60px);
    -webkit-transform: translate(30px, 60px);
}
</style>

3涧至、scale() 方法
通過 scale() 方法，元素的尺寸會(huì)增加或減少润歉，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：

<style type="text/css">
.hk2{ 
    height: 200px;
    width: 300px;
    background: #ccc;
    color: #000;
    margin: 200px;
    transform: scale(2, 3);
    -o-transform: scale(2, 3);
    -ms-transform: scale(2, 3);
    -moz-transform: scale(2, 3);
    -webkit-transform: scale(2, 3);
}
</style>
</head>
<body>
    <div class="hk2">
        this is a demo.
    </div>
</body>

4、skew() 方法
通過 skew() 方法，元素翻轉(zhuǎn)給定的角度躏将，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：

<style type="text/css">
.hk2{ height: 200px;
    width: 300px;
    background: #ccc;
    color: #000;
    margin: 200px;
    transform: skew(30deg, 30deg);
    -o-transform: skew(30deg, 30deg);
    -ms-transform: skew(30deg, 30deg);
    -moz-transform: skew(30deg, 30deg);
    -webkit-transform: skew(30deg, 30deg);
}
</style>

5拦赠、matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)挺尿，包含數(shù)學(xué)函數(shù)忍啸，允許您：旋轉(zhuǎn)眷细、縮放、移動(dòng)以及傾斜元素鹃祖。

二溪椎、布局

學(xué)習(xí)案例：

css：

<style type="text/css">
/* 頁面邊框 */
body{
    margin: 0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size: 14px;
}
div#test{
    margin: 0 auto;
    width: 1120px;
    background-color: #fff;
    box-shadow: 0px 2px 3px #ccc;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}
/* 頭部樣式 */
.headerbg{
    width: 1100px;
    height: 100px;
    background-color: #ededed;
    margin: 0 10px;

}
.header{
    color: #fff;
    background-color: #c2c2c2;
    text-decoration: none;
    font-weight: bold;
    font-size: 60px;
    padding: 15px 20px;
    line-height: 100px;
}
/* 導(dǎo)航欄樣式 */
div#topnav,div#topnav ul{
    width: 1100px;
    height: 55px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
div#topnav{
    margin-top: 10px;
}
div#topnav ul li{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    top: 0;
    display: block;
    width: 157px;
    text-align: center;
}
div#topnav ul li a{
    text-decoration: none;
    overflow: hidden;
    text-indent: -9999px;
    font-size: 22px; 
    font-weight: bold;
    padding: 5px 0;
    line-height: 50px;
    color:#949494 ;
    word-spacing: -0.5em;
    letter-spacing:0.01em;
}
div#topnav ul li a:hover{
    border-bottom: 3px solid #cd3333;
}
div#topnav ul li a[alt]{
    border-bottom: 3px solid #cd3333;
}

/* 主要內(nèi)容 */
div#main{
    width: 1100px;
    margin: 0 10px;
    background-color:#ececec;
    display: inline-block;
}
/* 左側(cè)內(nèi)容框 */
div#main_left{
    width: 180px;
    float: left;
    margin: 0;
    padding: 0;
}
.title_left{
    background-color: #ccc;
    color: #fff;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
/* 左側(cè)列表項(xiàng) */
.content_left{
    margin-left: 10px;
}
.content_left ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.content_left h2{
    margin: 10px 0 0 0;
    font-size: 14px;
}
.content_left ul li a{
    text-decoration: none;
    color: #000;
}
.content_left ul li a:hover,div#main_left > h2:hover{
    text-decoration: underline;
}
div#main_left > h2{
    margin: 10px 0 0 10px;
    color: #104E8B;
    font-size: 14px;
}
/* 中間內(nèi)容 */
div#main_content{
    background-color: #fff;
    width: 710px;
    padding: 0 15px;
    float: left;
    margin: 0;
    font-size: 12px;
}
div#main_content h1 {
    margin:15px 0 0 15px;
}
.btn,.intro,.example,.classtbl{
    padding: 10px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/* 實(shí)例 */
.example dt{
    margin: 15px 0 5px 0;   
}
.example a{
    text-decoration: underline;
    color: #983131;
}
.example dd{
    margin: 0;  
    padding: 0;  
}
</style>

頁面：

<body>
    <div id=test>
        <!-- header -->
        <div class="headerbg">
            <a class="header" href="#">W3School</a>         
        </div>

        <!-- topnav -->
        <div id="topnav">
            <ul>
                <li><a alt="" class="" href="#">HTML/CSS</a></li>
                <li><a class="" href="#">JavaScript</a></li>
                <li><a class="" href="#">HTML/CSS</a></li>
                <li><a class="" href="#">JavaScript</a></li>
                <li><a class="" href="#">HTML/CSS</a></li>
                <li><a class="" href="#">JavaScript</a></li>
                <li><a class="" href="#">HTML/CSS</a></li>
            </ul>
        </div>


        <!-- main -->
        <div id="main">
        <!-- main_left -->
            <div id="main_left">
                <div class="title_left">
                    <b>課程表</b>
                </div>
                <div class="content_left">
                    <h2>CSS基礎(chǔ)教程</h2>
                    <ul>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                    </ul>
                    <h2>CSS基礎(chǔ)教程</h2>
                    <ul>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                    </ul>
                    <h2>CSS基礎(chǔ)教程</h2>
                    <ul>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                    </ul>
                    <h2>CSS基礎(chǔ)教程</h2>
                    <ul>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                    </ul>
                    <h2>CSS基礎(chǔ)教程</h2>
                    <ul>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                        <li><a href="">CSS 教程</a></li>
                    </ul>
                </div>
                <br>
                <div class="title_left">
                    <b>選修課</b>
                </div>
                <div class="content_left">
                    <h2>建站手冊</h2>
                    <ul>
                        <li><a href="">網(wǎng)站構(gòu)建</a></li>
                        <li><a href="">萬維網(wǎng)聯(lián)盟</a></li>
                        <li><a href="">瀏覽器信息</a></li>
                        <li><a href="">網(wǎng)站品質(zhì)</a></li>
                        <li><a href="">語義網(wǎng)</a></li>
                        <li><a href="">職業(yè)規(guī)劃</a></li>
                        <li><a href="">網(wǎng)站主機(jī)</a></li>
                    </ul>
                </div>
                <h2>關(guān)于 W3School</h2>
                <h2>幫助 W3School</h2>
            </div>

            <!-- main_content -->
            <div id="main_content">
                <h1>CSS3 分類（Classfication）</h1>
                <div class="btn">
                    
                </div>

                <div class="intro">
                    <p><strong>CSS 分類屬性允許你規(guī)定如何以及在何處顯示元素。</strong></p>
                </div>
                <div class="example">
                    <p><strong>CSS分類(Classification)實(shí)例：</strong></p>
                    <dl>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素恬口。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素校读。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素祖能。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素歉秫。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素养铸。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素雁芙。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素轧膘。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素兔甘。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素谎碍。</dd>
                        <dt><a href="#">如何把元素顯示為內(nèi)聯(lián)元素</a></dt>
                        <dd>本例演示如何把元素顯示為內(nèi)聯(lián)元素。</dd>
                    </dl>

                </div>
                <div class="classtbl">
                    <p><strong>CSS 分類屬性 (Classification)</strong></p>
                    <p>CSS 分類屬性允許你控制如何顯示元素洞焙，設(shè)置圖像顯示于另一元素中的何處蟆淀，相對于其正常位置來定位元素，使用絕對值來定位元素澡匪，以及元素的可見度熔任。</p>

                </div>
                <div class="btn">
                    
                </div>
            </div>


            <!-- main_right -->
            <div></div>


        </div>

    </div>
</body>

未完。唁情。笋敞。

最后編輯于：2017.12.05 20:43:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市荠瘪，隨后出現(xiàn)的幾起案子夯巷，更是在濱河造成了極大的恐慌，老刑警劉巖哀墓，帶你破解...
沈念sama閱讀 206,214評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件趁餐，死亡現(xiàn)場離奇詭異，居然都是意外死亡篮绰，警方通過查閱死者的電腦和手機(jī)后雷，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,307評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來吠各，“玉大人臀突，你說我怎么就攤上這事〖致” “怎么了候学？”我有些...
開封第一講書人閱讀 152,543評論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長纵散。經(jīng)常有香客問我梳码，道長，這世上最難降的妖魔是什么伍掀？我笑而不...
開封第一講書人閱讀 55,221評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任掰茶，我火速辦了婚禮，結(jié)果婚禮上蜜笤，老公的妹妹穿的比我還像新娘濒蒋。我一直安慰自己，他們只是感情好把兔，可當(dāng)我...
茶點(diǎn)故事閱讀 64,224評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布沪伙。她就那樣靜靜地躺著甸各，像睡著了一般。火紅的嫁衣襯著肌膚如雪焰坪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,007評論 1贊 284
城市分裂傳說
那天聘惦，我揣著相機(jī)與錄音某饰，去河邊找鬼。笑死善绎，一個(gè)胖子當(dāng)著我的面吹牛黔漂，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播禀酱，決...
沈念sama閱讀 38,313評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼炬守，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了剂跟？” 一聲冷哼從身側(cè)響起减途，我...
開封第一講書人閱讀 36,956評論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎曹洽，沒想到半個(gè)月后鳍置，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,441評論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡送淆，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,925評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年税产，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偷崩。...
茶點(diǎn)故事閱讀 38,018評論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡辟拷，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出阐斜，到底是詐尸還是另有隱情衫冻，我是刑警寧澤，帶...
沈念sama閱讀 33,685評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布谒出，位于F島的核電站羽杰，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏到推。R本人自食惡果不足惜考赛，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,234評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望莉测。院中可真熱鬧颜骤，春花似錦、人聲如沸捣卤。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,240評論 0贊 19
一樁弒父案八孝，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至鸠项，卻和暖如春干跛，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背祟绊。一陣腳步聲響...
開封第一講書人閱讀 31,464評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工楼入，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人牧抽。一個(gè)月前我還...
沈念sama閱讀 45,467評論 2贊 352
代替公主和親
正文我出身青樓嘉熊，卻偏偏與公主長得像，于是被迫代替她去往敵國和親扬舒。傳聞我的和親對象是個(gè)殘疾皇子阐肤，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,762評論 2贊 345

學(xué)習(xí)筆記-CSS-2017.2.17

一、CSS3 2D 轉(zhuǎn)換

推薦閱讀更多精彩內(nèi)容