html 基本CSS分配模板

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 基本CSS分配模板相关的知识，希望对你有一定的参考价值。

/* ==========================================================================
   CSS Reset
   ========================================================================== */
* {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}
/* ==========================================================================
   Layout Styles
   ========================================================================== */
#wrapper {
  margin: auto;
  width: 970px;
}
/* Header
   ========================================================================== */
#header {
  padding: 10px;
}
/* Navigation
   ========================================================================== */
#navigation {
  padding: 10px;
  text-align: center;
}
/* Sidebar
   ========================================================================== */
#sidebar {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
  width: 250px;
}
/* Main Content
   ========================================================================== */
#main_content {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}
/* Footer
   ========================================================================== */
#footer {
  padding: 10px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <p>This is the header.</p>
      </div> <!-- end of header -->
      <div id="navigation">
        <p>This is the top nav bar.</p>
      </div> <!-- end of navigation -->
      <div id="sidebar">
        <p>This is the left sidebar.</p>
      </div> <!-- end of sidebar -->
      <div id="main_content">
        <p>This is the main content column.</p>
      </div> <!-- end of main content -->
      <div id="footer">
        <p>This is the footer.</p>
      </div> <!-- end of footer -->
    </div> <!-- end of wrapper -->
  </body>
</html>

以上是关于html 基本CSS分配模板的主要内容，如果未能解决你的问题，请参考以下文章

HTML+CSS笔记 CSS进阶再续

[HTML+CSS]电商网站模板

div+css布局的基本流程

CSS 字体仅适用于从相同基础扩展的一些 Django 模板

CSS 基本的CSS模板

Django 模板层(Template)