Question

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
    <title>My first styled page</title>
    <style type="text/css">
		body {
			background-image: url("http://technozed.com/wp-content/uploads/2016/03/firewatch-wallpaper-13.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            background-color: #black;
            background-size: cover;
            padding-left: 11em;
            font-family: Lucida Handwriting, Monotype Corsiva, Times, serif;
            color: white;
            background-color: black
        }
        #bg {
            z-index: -1;
        }
        ul {
            text-align: center;
            box-shadow: 10px 10px 20px black;
            background-color: #131b28;
            top: 0em;
            left: 0em;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 11%;
            position: fixed;
            height: 100%;
            overflow: auto;
        }
        li a {
			margin: 0 0;
            display: block;
            color: #FF6C40;
            padding: 100%;
            text-decoration: none;
        }
        li a.active {
            background-color: #2C112B;
            color: #FF6C40;
        }
        li a:hover:not(.active) {
            background-color: #2C112B;
            color: #FF6C40;
        }
		h1 {
			border-bottom: thin dotted;
			margin: 0 0;
			padding: 8px 0px;
		}
		address {
			border-top: thin dotted;
			margin 0px 0px;
			padding: 8px 0px;
		}
	</style>
</head>

<body>
    <!-- Site navigation menu -->
    <ul class="navbar">
        <li><a href="index.html">Wildlife Sanctions</a></li>
        <li><a href="musings.html">Photos</a></li>
        <li><a href="town.html">Camping Sites</a></li>
        <li><a href="links.html">Donations</a></li></ul>
    
	<!-- Main content -->
    <h1>My first styled page</h1>
    <p>Welcome to my styled page!</p>
        <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere&hellip;</p>
            <p>There should be more here, but I don't know what yet.</p>
    
	<!-- Sign and date the page, it's only polite! -->
	<address>Made 5 April 2004<br> by myself.</address>
</body>

</html>

＆＃13;

我创建了一个网页，但是当我运行代码时，位于屏幕左侧的导航栏看起来并不正确及其内容，而不是覆盖导航栏的总面积。我通过调整样式表的li a {}部分的填充百分比来努力纠正这个错误，但是当代码在不同宽高比的监视器上运行时，问题又会再次出现。我该如何解决这个问题？

<style type="text/css">
    body {
        background-image: url("http://technozed.com/wp-content/uploads/2016/03/firewatch-wallpaper-13.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-color: #black;
        background-size: cover;
        padding-left: 11em;
        font-family: Lucida Handwriting, Monotype Corsiva, Times, serif;
        color: white;
        background-color: black
    }
    #bg {
        z-index: -1;
    }
    ul {
        text-align: center;
        box-shadow: 10px 10px 20px black;
        background-color: #131b28;
        top: 0em;
        left: 0em;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 11%;
        position: fixed;
        height: 100%;
        overflow: auto;
    }
    li a {
        margin: 0 0;
        display: block;
        color: #FF6C40;
        padding: 100%;
        text-decoration: none;
    }
    li a.active {
        background-color: #2C112B;
        color: #FF6C40;
    }
    li a:hover:not(.active) {
        background-color: #2C112B;
        color: #FF6C40;
    }
    h1 {
        border-bottom: thin dotted;
        margin: 0 0;
        padding: 8px 0px;
    }
    address {
        border-top: thin dotted;
        margin 0px 0px;
        padding: 8px 0px;
    }
</style>

这是一个＆＃34;片段＆＃34;我的HTML代码;

<body>
<!-- Site navigation menu -->
<ul class="navbar">
    <li><a href="index.html">Wildlife Sanctions</a></li>
    <li><a href="musings.html">Photos</a></li>
    <li><a href="town.html">Camping Sites</a></li>
    <li><a href="links.html">Donations</a></li></ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
    <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere&hellip;</p>
        <p>There should be more here, but I don't know what yet.</p>
            <!-- Sign and date the page, it's only polite! --><address>Made 5 April 2004<br> by myself.</address>

Answer 1

ul关闭的语法错误。请更新最后一行。

    <li><a href="links.html">Donations</a></li></ul>

列出填充问题

1 个答案: