html5-用css設置導航

首頁.html

<div id="menu">
    <ul>
        <li><a href="#" id="current">首頁</a></li>
        <li><a href="網站式佈局.html">網站式佈局</a></li>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">div+css實例</a></li>
        <li><a href="#">常用代碼</a></li>
    </ul>
</div>

網站式佈局.html

<div id="menu">
    <ul>
        <li><a href="美化橫向列表.html">首頁</a></li>
        <li><a href="#" id="current">網站式佈局</a></li>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">div+css實例</a></li>
        <li><a href="#">常用代碼</a></li>
    </ul>
</div>

css文件

body{font-size: 12px;line-height: 1.5;font-family: "微軟雅黑", "宋體"}

a{color: #000;text-decoration: none}
a:hover{color: red}

#menu{width: 650px;border-bottom: 3px solid #e10001;height: 30px;}
#menu ul{list-style: none;margin: 0px;padding: 0px}
#menu ul li {float: left;margin-left: 2px}
#menu ul li a {display: block;width: 90px;height: 30px;
                line-height: 30px;text-align: center;
                background: url("button.png") 0 -60px no-repeat;
                }
#menu ul li a:hover{background: url("button.png") 0 -30px no-repeat;}

#menu ul li a#current{background: url("button.png") 0 0 no-repeat;color: white}

一張圖片運用到一個導航欄中。主要是用圖片的座標達到了用圖片的部分背景

在按鈕中padding中的妙用，

.html

<p class="test"><a href="#"><span>免費註冊</span></a><a href="#"><span>登錄</span></a><a href="#"><span>別告訴我你忘記了密碼</span></a></p>

css文件：

  .test a{display: block;float: left;margin: 5px;
            height:30px; line-height: 30px;text-align: center;
            font-size: 14px;font-weight: bold;padding-left: 18px;
            background: url("test.png") 0 0 no-repeat;color: #d84700;
            }
        .test a span{display: block;background: url("test.png") right  0 no-repeat;padding-right: 18px}

        .test a:hover{background: url("hoverTest.png") 0 0 no-repeat}

        .test a:hover span{background: url("hoverTest.png")right 0 no-repeat;color: black}

通過設置一張圖片的padding，獲取了圖片的left和right的圓角。

多圖文的排列：

<div id="layout">
    <ul>
        <li><a href="#"><img src="gz.jpg" />廣州</a></li>
        <li><a href="#"><img src="sz.jpg" />深圳</a></li>
        <li><a href="#"><img src="nj.jpg" />南京</a></li>
        <li><a href="#"><img src="xa.jpg" />西安</a></li>

        <li><a href="#"><img src="gz.jpg" />廣州</a></li>
        <li><a href="#"><img src="sz.jpg" />深圳</a></li>
        <li><a href="#"><img src="nj.jpg" />南京</a></li>
        <li><a href="#"><img src="xa.jpg" />西安</a></li>

        <li><a href="#"><img src="gz.jpg" />廣州</a></li>
        <li><a href="#"><img src="sz.jpg" />深圳</a></li>
        <li><a href="#"><img src="nj.jpg" />南京</a></li>
        <li><a href="#"><img src="xa.jpg" />西安</a></li>

        <li><a href="#"><img src="gz.jpg" />廣州</a></li>
        <li><a href="#"><img src="sz.jpg" />深圳</a></li>
        <li><a href="#"><img src="nj.jpg" />南京</a></li>
        <li><a href="#"><img src="xa.jpg" />西安</a></li>

    </ul>
</div>

style：

在li中設置好width，那麼img設置好，文字自動跳到下一行。

在IE6中會出現左側的雙邊框，那麼填寫display:inline;

在img設置中padding爲1px，border=1px。

在hover設置中，將padding設爲0，border設爲2時，位置不會發生變化。

 body{ font-size: 12px;font-family: "微軟雅黑", "宋體";line-height: 1.5}
        img{  width: 68px;  height: 56px;  border: 0px; }
        ul{  list-style: none;  padding: 0px;  margin: 0px;}
        a{text-decoration: none;color: #4183C4}
        a:hover{color: #f00}
        #layout ul li{float: left;width: 72px;text-align: center;
            margin: 20px 0px 0px 20px;display: inline }
        /*IE6 左側雙邊距 解決辦法 display: inline*/
        #layout ul li a {display: block}

        #layout ul li a img {padding:1px;border: 1px solid #e1e1e1;margin-bottom: 3px}

        #layout ul li a:hover img{padding: 0px;border: 2px solid #f98510}

        #layout{  border: 2px solid black;  width: 390px;float: left}

/*
當一個容器內的元素都浮動起來的時候，他的高度將不會隨着內部元素的增加而增加，造成元素顯示超出容器
要解決這個問題 需要添加以下樣式overflow: auto ;zoom: 1；
overflow: auto 讓高度自適應 zoom: 1爲了兼容IE6（不能通過W3C的驗證）
*/