前端学习（1797）：前端调试之html/css介绍

index.html

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><link rel="stylesheet" href="./index.css" type="text/css" media="all" />
</head><body><header class="header1">header</header><header class="header2">header</header><main><nav>nav</nav><section>section</section></main><section class="section">section</section><aside>aside</aside>
</body></html>

index.css

* {color: #fff;font-weight: bold;margin: 0px;padding: 0px;
}.header1 {text-align: center;line-height: 50px;background: #1EAEFF;}.header2 {width: 1062px;margin: 0 auto;text-align: center;line-height: 114px;background: #14C5C5;
}
main{width: 1062px;height: 363px;margin: 0 auto;margin-bottom: 24px;
}
main>nav {float: left;width: 225px;line-height: 363px;text-align: center;background-color: #f3bf34;
}main>section{float: right;width: 837px;line-height: 363px;text-align: center;background-color: #fa7f4b;
}.section{width: 1062px;margin: 0 auto;line-height: 169px;text-align: center;background-color: #87cf2b;
}aside{position: fixed;top: 221px;right: 0px;width: 67px;line-height: 289px;text-align: center;background-color: #9497e8;
}

运行结果