技術標籤：css筆記csshtml

示例：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            width: 1226px;
            margin
 
: 0 auto;
        }
        
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        /*
        方法一：
        這裡使用行內塊將文字進行橫向排列

         .nav ul li {
            display: inline-block;
        } */
 

        
        .nav ul li:hover {
            border-bottom: 2px solid #ff8500;
        }
        
        .nav ul li a {
            padding: 0 20px;
            height: 41px;
            color: #4c4c4c;
            font-size: 12px;
        }
		/*
			方法二：使用浮動
       */
        
        .left {
            float
 
: left;
        }
        
        .right {
            float: right;
        }
    </style>

<div class="nav">
        <ul>
            <li class="left">
                <a href="#">設為首頁</a>
            </li>
            <li class="left"><a href="#">手機新浪網</a></li>
            <li class="left"><a href="#">移動客戶端</a></li>
            <li class="right"><a href="#">登入</a></li>
            <li class="right"><a href="#">微博</a></li>
            <li class="right"><a href="#">關注我</a></li>
        </ul>
</div>