Html+css page Exercises--legend the first part

The first part Navbar-wrapper

Brief introduction:

This section is a navigation section that is pinned to the top of the browser page and does not move with the document scrolling. Use the link (<ul><li><a></a></li></ul>) in the unordered list to implement navigation. When the mouse is placed above the element, its style changes.

Page effect:

Introduction of Fonts:

<link href= ' http://fonts.googleapis.com/css?family=Quattrocento:400,700 ' rel= ' stylesheet ' type= ' text/css ' >
<link href= ' http://fonts.googleapis.com/css?family=Patua+One ' rel= ' stylesheet ' type= ' text/css ' >
<link href= ' Http://fonts.googleapis.com/css?family=Open+Sans ' rel= ' stylesheet ' type= ' text/css ' >

HTML code:

<div class= "Navbar-wrapper" >
&LT;H1 id= "Log" >Legend!<nav id= "NavBar" >
<ul id= "Menu-main" class= "NAV" >
<li><a href= "#Portfolio" >Portfolio</a></li>
<li><a href= "#Services" >Services</a></li>
<li><a href= "#News" >News</a></li>
<li><a href= "#Team" >Team</a></li>
<li><a href= "#Contact" >Contact</a></li>
</ul>
</nav>
</div>

CSS code:

body{

margin:0px;
}

. navbar-wrapper{
Overflow:hidden; /* element content will be hidden if it overflows the element box */
width:100%; /* Width covered full screen */
height:45px;
padding:15px;
margin:0px;
position:fixed; /* Keep it in one place and not move with the page scrolling. */
left:0px; /* pinned to the top of the browser. */
top:0px; The/*top property and the left property are positioned in a fixed position. */
border-bottom:1.5px solid #f0bf00;
/* Add a dividing line below the page navigation */
}
#log {
Color:white;
font-family: ' Patua one ', cursive; /* Font type */
padding:0px 0px 0px 100px;
margin:0px;
Font-size:2.5em;
Display:inline-block;
/*inline-block is an inline block element that arranges the elements horizontally */
}

#navbar {
Float:right; /* The Nav bar is arranged horizontally from right to left */
padding:0px 120px 0px 0px;
margin:0px;
}
#menu-main Li {
List-style-type:none; /* List Style type */
Float:left; /* Align navigation horizontally from left to right */
}
#menu-main Li a{
Color:white;
Text-decoration:none; /* Set text without underline */
padding:15px;
Font-size:1.25em;
font-family: ' Patua one ', cursive;
}
#menu-main Li a:hover{/* When the mouse is placed on the element, the element style changes */
PADDING:9PX 15px;
border-radius:3px;
}

Summarize:

There are several issues encountered when implementing this section:

1. How to make it fixed at the top of the browser page.

2, the default arrangement of the list is vertical, how to make it horizontal arrangement.

3, remove the symbol before the list.

4, how to make two elements in a horizontal line distribution.

Workaround:

1, the use of position:fixed;top:0;left:0 in the style of the elements; Fixed indicates that the positioning of the element is constant. Top and left 0 indicate that the element is anchored to the top of the browser page.

2. Use Float:left in the style of <li> elements; (arranged horizontally from left to right)

3. Use List-style-type:none in the style of <li> elements;

4. Use Display:inline-block in the style of the first element to make it into a inline block element.

Html+css page Exercises--legend the first part