DIV CSS 佈局教程網

昨天老師教了一點CSS的基本樣式，大概包含了：
字體的：font-size，font-size，font-weight，font-style。
文本的：color，text-indent，letter-spacing，word-spacing，line-height，text-decoration：underline，overline，line-through。等等
背景的：background-color，background-imger：url，border，background-repeat等等、
列表的：list-style，等等
邊框的一些屬性。


下面的是自己的一些代碼：
html頁

<h1>我是一個H1</h1>

.css
h1{
    font-size: 88px;
    font-family: microsoft Yahei;
    font-style: italic;
    color: red;
    letter-spacing: 55px;
    text-decoration: line-through;
}
給h1了一個88px的微軟雅黑字體，並且變色為紅色，字間距改為55px並且加了刪除線。

<h2>baobao jiushi roujiamo</h2>

h2{
    color: pink;
    font-weight: 900;
    word-spacing: 80px;
}

給h2了一個粉色和900字體比重和80px的詞間距。

<div class="div1">

</div>

.div1{
    background-image: url("Koala.jpg");
    /**/
    border: solid 1px #000;
    width: 1200px;
    height: 1200px;
    background-repeat: no-repeat;
    background-position: top right;
}
給div了一個背景圖和黑色的邊框 顯示不平鋪和顯示在框內的右上角。

<ul class="ul1">
    <li>再見</li>
    <li>再見</li>
    <li>再見</li>
    <li>再見</li>
    <li>再見</li>
</ul>

.ul1{
    list-style: none;
    list-style-image: url("Koala.jpg");
}
給ul了一個不要列表標示和自定義了一個列表標示。

<div class="div3">

</div>

.div3{
    width: 1200px;
    height: 3000px;
    border-top-style: double;
    border-bottom-style: dotted;
    border-left-style: dashed;
    border-right-style: double;
    border-color: red;
    background-image: url("Koala.jpg");
    background-repeat: no-repeat;
    background-position: top right;

}
給div命名為div3，在css裡面給div3了一個1200*3000px的寬高 和上面為雙實線，下邊是點線，右邊是雙實線，左邊是虛線，背景顏色為紅色，插入背景圖Koala.jpg，不平鋪已經顯示在框內的右上角。