Question

在大学做一个项目，我完全误读了项目中使用的简短HTML5，并意识到我不允许这样做。糟糕！

我唯一的问题是，我尝试使用div将其转换为XHTML Strict 1.0标准，它并不像我想的那么容易。

我只会将导航部分发布为我需要帮助的部分，不需要额外的所有位数和爆炸声。

在发布之前 - 只是想澄清一下这个问题：

此代码符合HTML5标准，我需要它符合XHTML Strict 1.0标准，但我无法使用div代替导航功能使用CSS。

以下是代码：

<!DOCTYPE html> 
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
    <div id="whole">
        <div id="header">
        <img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
    </div>
     <div id="navbar">
        <div id="container">
            <nav id="menu">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a>
                    <ul>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a>
                    <ul>
                        <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a>
                    <ul>
                    <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a></li>
            </ul>
            </nav>  
        </div> 
    </div>
</div>
</body>
</html>

aaaand这里是CSS

div.whole {
margin-left: 15%;
margin-right: 15%   }

div.header  {
width: 100%;    }

div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }

img.logo {
display: block;
margin-left: auto;
margin-right: auto  }

#content

#footer

#navigation {
width: 800px;
margin: 30px auto;    
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
    margin: 0;
    padding: 0;
    display: inline-block; /*this is the second bit that centers the menu*/
    position: relative;
    list-style: none;
    background: #fff;
}
    nav#menu ul li a {
        padding: 1px 20px;
        display: block;
        font-size: 17px;
        font-weight: 300;
        color: #cc0000;
        text-decoration: none;
    }
    nav#menu ul li:hover {background: #fff;}
        nav#menu ul ul {
            width: 160px;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 42px;
            left: -999px;
            border: 1px solid #ccc;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 0 0 transparent;
        }
            nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
                margin: 0 0 0 -80px;
                left: 50%;
        }
nav#menu a:hover {color: #540000;}

Answer 1

通常，您在HTML中使用ID，但基于类使用样式。

e.g。如果你要说

div.navbar { 
  ...
}

这适用于：

<div class="navbar">...</div>

不

<div id="navbar">...</div>

关于<nav>功能的替代方案的想法 - 必须使用XHTML Strict 1.0 </nav>

1 个答案: