HTML结构如何在div或section

时间:2017-07-06 08:46:32

标签: html5 css3 frontend

我对html结构很困惑,我应该将整个内容包含在div或section内部,因为我的身体与页脚相距90%宽度

<body>
    <div class="homepage">
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            navigation
        </nav> <!-- Nav End -->
        <header>
            Header content 
        </header> <!-- Header End -->
        <section class="product">
            Main content 
        </section>
        <!-- <hr class="Hhr"> -->
    </div> <!-- Homepage End -->
    <footer>
        Footer copyrights annd social icons
    </footer>
    </div>
</body>

3 个答案:

答案 0 :(得分:0)

为什么不为private void button2_Click(object sender, EventArgs e) { SaveFileDialog sfd = new SaveFileDialog(); sfd.Filter = "txt files (*.txt)|*.txt|Csv files (*.csv)|*.csv"; sfd.FilterIndex = 2; if (sfd.ShowDialog() == DialogResult.OK) { try { using (StreamWriter sw = new StreamWriter(sfd.FileName, false)) { string columnString = ""; for (int i = 0; i < dt.Columns.Count - 1; i++) { columnString += dt.Columns[i].ColumnName; if (i < dataGridView1.Columns.Count - 2) columnString += ","; } sw.WriteLine(columnString); string rowString = ""; foreach (DataRow dr in dt.Rows) { rowString = ""; for (int i = 0; i < dt.Columns.Count - 1; i++) { rowString += dr.ItemArray[i].ToString(); if (i < dt.Columns.Count - 2) rowString += ","; } sw.WriteLine(rowString); } } } catch (Exception exceptionObject) { MessageBox.Show(exceptionObject.ToString()); } } } 课程设置风格?像这样:

.homepage

答案 1 :(得分:0)

身体应该有默认值和高度(或100%)

在正文中,您可以将其划分为标题,页面内容,页脚等部分(大块)。 (但你可以使用和标签,但它们也像部分一样)

想象一下报纸。

<body>
  <section class="header"> 
    <div class="title">
      <h1>Title</h1>
      <p>Subtitle</p>
    </div>
    <nav class="navbar">
      ... Your menu
      <ul>
        <li> ....
          ...
      </ul>
    </nav>
  </section>

  <section class="content">
    <div class="news">
      <div id="new1">
        .....
      </div>
      ...
    </div>
    <div class="rrss">
      ....
    </div>
  </section>
  <section class="footer">
    ...
    <p> Copyright </p>
  </section>
<body>

然后你可以为页面的不同部分提供不同的样式。

<style>
  body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .header{
    width: 90%;
  }
  ...
  ...
</style>

答案 2 :(得分:0)

它可能是您想要的解决方案,但并非强制要求将整个内容包装在div中以使其width成为90%。

* {text-align: center;}
.navbar-fixed-top {width: 90%; left: 0px; right: 0px; margin: auto; background-color: gray;}
.homepage {width: 90%; margin: auto;}
header {margin-top: 50px; background-color: blue;}
section {background-color: red;}
footer {background-color: yellow; height: 100px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>

<div style="width: 100%">
    <div class="homepage">
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            navigation
        </nav> <!-- Nav End -->
        <header>
            Header content 
            <br /><br /><br /><br /><br />
        </header> <!-- Header End -->
        <section class="product">
            Main content 
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
        </section>
        <!-- <hr class="Hhr"> -->
    </div> <!-- Homepage End -->
    <footer>
        Footer copyrights annd social icons
    </footer>
</div>

</body>