Step 5: layout and performance of additional structures outside the main webpage frameworks

Step 5 describes the Layout structure, including the following:
1. Main navigation bar;
2. heading, including the website name and content title;
3. Content;
4. Footer information, including copyright, authentication, and secondary navigation bar (optional ).

When adding these structures, in order not to break the original framework, we need to add them under the "body" TAG of the css file:

. Hidden {
Display: none;
}

". Hidden" is the class we add. This class will not display any element of the hidden class on the page. These will be used later. Please forget them now.

Now we add the title (heading ):
First, return to the HTML code.

<Div id = "header">
<H1> Enlighten Designs
</Div>

Refresh the page and you will see a huge title and blank spaces around the title, which is caused by the default size and margin of the

H1 {
Margin: 0;
Padding: 0;
}

Next is the navigation bar:
The css code used to control the navigation bar is relatively complicated. We will introduce it in detail in Step 9 or step 10. Add the following navigation code to the html file:

<Div id = "main-nav">
<Ul>
<Li id = "about"> <a href = "http://css.jorux.com/wp-admin/post.php#"> About </a> </li>
<Li id = "services"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Services </a> </li>
<Li id = "portfolio"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Portfolio </a> </li>
<Li id = "contact"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Contact Us </a> </li>
</Ul>
</Div>

(Note: The Original tutorial uses dl and dt, where jorux uses more frequently-used ul and li tags)
Currently, the navigation bar has poor performance. However, to introduce its special performance in future tutorials, you need to temporarily hide the navigation bar. Therefore, add:

<Div id = "main-nav">
<Dl class = "hidden">
<Dt id = "about"> <a href = "http://css.jorux.com/wp-admin/post.php#"> About </a> </dt>
<Dt id = "services"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Services </a> </dt>
<Dt id = "portfolio"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Portfolio </a> </dt>
<Dt id = "contact"> <a href = "http://css.jorux.com/wp-admin/post.php#"> Contact Us </a> </dt>
</Dl>
</Div>