我从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;
}
提前感谢您的回答
答案 0 :(得分:0)
不,不是!
在浏览时我发现了几个问题。
我注意到你通过链接元素链接了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一样。