0

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

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

我只会发布导航部分，因为这是我需要帮助的，不需要所有额外的零碎。

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

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

这是代码：

<!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;}
4

1 回答 1

1

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

例如，如果你要说

div.navbar { 
  ...
}

这将适用于：

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

不是

<div id="navbar">...</div>
于 2013-04-30T17:29:07.003 回答