当前位置：网站首页>W3school navigation bar exercise

W3school navigation bar exercise

2022-07-27 13:21:00 【Sorry, this person doesn't exist】

W3School Navigation bar exercises

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Navigation bar </title>
    <link rel="stylesheet" href="/layout/css/reset.css">
    <style> /*  Set up nav Size  */ .nav{
      width: 1210px; height: 48px; background-color: #E8E7E3; margin: 100px auto; } /*  Set up nav in li */ .nav li{
      /*  Set up li Float left , Arrange menus horizontally  */ float: left; /*  Set up li Height  */ /* height: 48px; */ /*  Centers text vertically in the parent element  */ line-height: 48px; } /*  Set up a The style of  */ .nav a{
      /*  take a Convert to block element  */ display: block; padding: 0 39px; /*  Remove underscores  */ text-decoration: none; color: #777777; font-size: 18px; } .nav li:last-child a{
      padding: 0 46px 0 45px; } /*  Set the mouse in effect  */ .nav a:hover{
      background-color: #3f3f3f; color: #E8E7E3; } </style>
</head>
<body>
    <!--  Create the structure of the navigation bar  -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Brower Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
    
</body>
</html>