Question

我从html和css开始，我对代码结构有点遗失。我主要关注标签，我应该使用它们和html5中的相同问题以及其他新元素。

以下是我想用于网站的代码：

        <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Home Page</title>
    <link type="text/css" rel="stylesheet" href="templates/style2.css"/>
    </head>
    <body>

        <div id="content">  
            <header></header>

            <nav>
                                <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">NEWS</a></li>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">Element 1</a></li>
                        <li><a href="#">Element 2</a></li>
                        <li><a href="#">Element 3</a></li>
                        <li><a href="#">Element 4</a></li>
                        <li><a href="#">Element 5</a></li>
                        <li><a href="#">Element 6</a></li>
                                </ul>
            </nav>

            <div id="baner"></div>      
            <section id="main"></section>

            <aside></aside> 

            <section id="contact"></section>

        </div>



        <footer></footer>



</body>

body{
margin: 0;
}

#content{
color:#67BE7A;
width:1150px;
height:auto;
margin:auto;
background-color: yellow;
}

header {
color:#0EA632;
width:inherit;
height:180px;
background-color:orange;
}

/* nav {
width:inherit;
height:60px;
margin-top:10px;
background-color: pink;

}
*/
#baner {
width:inherit;
height:350px;
margin-top:10px;
background-color:brown;
}

section#main{
width: 800px;
height:500px;
background-color:#0EA632;
margin-top:10px;
float:left;
 }

aside{
width: 340px;
height:500px;
background-color:#0B8328;
margin-top:10px;
margin-bottom:10px;
float:right;
}

section#contact{
width:inherit;
height:150px;
background-color:blue;
margin-top:10px;
display: block;
clear:both;
}

footer {
width:100%;
height:30px;
margin-top:10px;
background-color:#5E5E5E;
}


nav {
width:inherit;
height:60px;
margin-top:10px;
border:0px solid #0d962d;
background-color:#0ea632;
box-shadow: 0px 7px 2px -6px #888888;
background: -webkit-linear-gradient(#0ea632, #075c1b); /* For Safari 5.1 to      6.0 */
background: -o-linear-gradient(#0ea632, #075c1b); /* For Opera 11.1 to 12.0  */
background: -moz-linear-gradient(#0ea632, #075c1b); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0ea632, #075c1b); /* Standard syntax */

}

nav ul{
padding:0px;
list-style-type: none;
border:0px solid #000;
margin:0 auto; 
}

nav ul:after {
content:'';
display:block;
clear:both;
}

nav ul li{
float:left;
width:auto;
height:60px;
font-weight:bold;
font-family: Sans-Serif;
}



nav li+li:before{
display:inline-block;
float:left;                 /*float:left saving this */
content: url('../img/separator.png');
padding:0px;
margin:0px;
}

/*height is equal to height of nav - padding top and bottom*/

nav ul li a {
text-decoration:none;
color: #ffffff;
display:inline-block;
height:18px;
margin:0px;
padding: 21px 10px 21px 10px;
}

nav ul li a:hover {
text-decoration:none;
color: #000;
display:inline-block;
height:18px;
margin:0px;
padding:21px 10px 21px 10px;
border: 0px solid black;
background-color:#1ee84e;
}

提前感谢您的回答

Answer 1

不，不是！

在浏览时我发现了几个问题。

我注意到你通过链接元素链接了css

<link type="text/css" rel="stylesheet" href="templates/style2.css"/>

哪个好，但在关闭html标签之后，你有css在那里。不要那样做！

同样不好的做法是让一个元素里面没有任何东西，你用3个元素做了。

<header></header>  
<aside></aside>  
<footer></footer>

值0不应指定单位。所以这......

margin:0px;

应该是......

margin:0;

我认为你是编码的新手，或者至少是这种语言的新手。我建议首先使用内置语法验证的coding playground开始。我的项目kodeWeave将是一个很好的开始。对于网页设计师和开发人员来说，还有Codepen就像Github一样。

这个代码结构是否正确？

1 个答案: