Question

我观看了YouTube视频，了解如何使用“不是”来制作导航菜单。我试图将导航栏的宽度设置为100％，以便填充所有设备上的屏幕宽度。我很高兴我的身高为30px。我还希望导航栏居中，所以如果我添加更多标签，它将填满屏幕并自动居中到100％。这是我的代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title>Kieran's Website</title>
    </head>
    <body>
        <div id="body">
            <div style="display:none">
                <audio controls autoplay>
                    <source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio> 
            </div>
            <img src="Images/web-development-banner.jpg" width="100%" height="400">
            <h1 class="webheading">Website Developement</h1>
            <div id="navMenu">
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <br class="clearFloat">
            </div>

......还有更多但却不重要......

CSS：

#body {
    background: url(Images/bigimage.jpg);
    background-color:#000000;
    background-size: 100% 100%;
    width: auto;
    height: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0px;
    margin-top: 0px;
    color: #FFFFFF;
}

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #999;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: "Comic Sans MS", cursive;
    text-decoration: none;
    height: 30px;
    width: 150;
    display: block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;

}

#navMenu li:hover {
    background: #09F;
}

#navMenu ul li:hover ul li a:hover {
    background: #CCC;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

Answer 1

#body {
    background: url(Images/bigimage.jpg);
    background-color:#000000;
    background-size: 100% 100%;
    width: auto;
    height: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0px;
    margin-top: 0px;
    color: #FFFFFF;
}

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    text-align:center;
    display:table;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    display: table-cell;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    position: relative;
    background: #999;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: "Comic Sans MS", cursive;
    text-decoration: none;
    height: 30px;
    
    display: block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;

}

#navMenu li:hover {
    background: #09F;
}

#navMenu ul li:hover ul li a:hover {
    background: #CCC;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

<ul>
                <li><a href="index.html">Learn HTML</a>
                    <ul>
                        <li><a href="index.html">1. Things You Need</a></li>
                        <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                        <li><a href="extrainfo.html">3. Extra Information</a></li>
                        <li><a href="layout.html">4. HTML Layout</a></li>
                    </ul>
                </li>   
            </ul>

<div id="body">
            <div style="display:none">
                <audio controls autoplay>
                    <source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio> 
            </div>
            <img src="Images/web-development-banner.jpg" width="100%" height="400">
            <h1 class="webheading">Website Developement</h1>
            <div id="navMenu">
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <ul>
                    <li><a href="index.html">Learn HTML</a>
                        <ul>
                            <li><a href="index.html">1. Things You Need</a></li>
                            <li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
                            <li><a href="extrainfo.html">3. Extra Information</a></li>
                            <li><a href="layout.html">4. HTML Layout</a></li>
                        </ul>
                    </li>   
                </ul>
                <br class="clearFloat">
            </div>

如何在所有设备上100％制作导航栏

1 个答案: