行李のラベルのCSSのナビゲーションバーのデザインのUL

デザインのHTMLページ要素は、
リストは、クラスのliタグと同様の機能を有しています。
このようなメニューのナビゲーションバーなど。



まず、オリジナルのスタイル- 表示 リスト項目;




第二に、チェンジ・ライン -  表示インラインブロック ;





3つの最終結果





4つのコード

<!DOCTYPE html>  
<html>  
<head>  
<style>  
    ul {  
        margin: 0;  
        padding: 0;  
        background-color: #444;  
    }  
    ul li {  
        display: inline-block;  
    }  
    li a {  
        display: block;  
        color: white;  
        text-align: center;  
        padding: 16px;  
        text-decoration: none;  
    }  
    li a:hover {  
        background-color: #888;  
    }  
</style>  
</head>  
<body>  
    <h2>Navigation Menu</h2>  
    <p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>  
    <ul>  
        <li><a href="#home">Home</a></li>  
        <li><a href="#news">News</a></li>  
        <li><a href="#contact">Contact</a></li>  
        <li><a href="#about">About</a></li>  
    </ul>  
</body>  
</html>  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-

おすすめ

転載: www.cnblogs.com/eddyz/p/10972509.html