2016 - 1- 22 Build a Nav bar (intro to HTML&CSS)

Posted 2020-06-07

一：Learn how to build a NavBar --- allow user navigate ur site

   1. The hypetext refrence link 

   This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.

 

   2. Whitespace is empty space in the html.Since the browser ignores whitespace in an HTML document, you can clearly lay out the code without affecting how the web page will look.

   The browers will ignore the space between tag, just like:

<a href = "aboutme.html"> <!--The ‘href‘ means hypertext refrence attribute-->
    Go to the about me page
</a>

<a href = "contact.html">
    Contact me
</a>


<a href = "untitled.html">
    Home
</a>

 So the page will display like that : .

 And when want have the gap bettwen the links , we can use the html feature called entity.

 Like that : 

<a href = "aboutme.html"> <!--The ‘href‘ means hypertext refrence attribute-->
    Go to the about me page
</a>
&nbsp
<a href = "contact.html">
    Contact me
</a>
&nbsp
<a href = "untitled.html">
    Home
</a>

Pay attention to the "&nbsp", it means no-breaking space! So the page would like that :

.

Does it  looks better?

 

  3.And now we could make a relly "navbar" to allow user jump into other page ,and we just need to copy code in other document.And the page will looks like :