HTML+CSS页面练习——legend第一部分

第一部分navbar-wrapper

简要介绍：

本部分为导航部分，会固定在浏览器页面的顶部，不会随文档的滚动而移动。运用无序列表中放入链接（<ul><li><a></a></li></ul>）的方式来实现导航。当鼠标放在该元素上面时，其样式会发生变化。

页面效果：

 

字体的引入：

<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代码：

 <div class="navbar-wrapper" >
      <h1 id="log">Legend!</h1>
      <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代码：       

       

         body{
            margin: 0px;
            min-1200px;
            background:#f0f0f0;
            color: #312A1E;
            font-size: 100%;
            font-family: 'Quattrocento', serif;
            }

        
        .navbar-wrapper{
            overflow: hidden;   /* 元素内容如果溢出元素框，则会被隐藏*/
             100%;         /* 宽度铺满全屏*/
            height:45px;
            padding: 15px;
            margin: 0px;
            z-index: 600;      /*在Z方向上放置顺序，值越大，当两个元素叠放在一起时就会显示在前面*/
            position: fixed;   /*使其固定到一个位置，不随页面滚动而移动。*/
            left:0px;          /*固定到浏览器的顶部。*/  
            top:0px;           /*top属性和left属性定位固定的位置。*/ 
            border-bottom: 1.5px solid #f0bf00;     
            /*在页面导航的下方添加一条分界线 */
        }
        #log{
            color:white;
            font-family: 'Patua One', cursive;   /*字体类型*/
            padding: 0px 0px 0px 100px;
            margin: 0px;
            font-size:2.5em;
            display:inline-block;     
            /*inline-block为行内块元素，使元素水平排列*/
        }
                
        #navbar{
            float:right;      /* 导航栏从右往左水平排列*/
            padding: 0px 120px 0px 0px;
            margin: 0px;
        }
        #menu-main li {
            list-style-type: none;   /*列表样式类型*/
            float:left;        /* 使导航从左往右水平排列*/
        }
        #menu-main li a{
            color:white;
            text-decoration: none;  /*设置文本无下划线*/
            padding:15px;
            font-size:1.25em;
            font-family: 'Patua One', cursive;
        }
        #menu-main li a:hover{      /*当鼠标放在元素上时，元素样式发生改变*/
            padding:9px 15px;
            border-radius:3px;
        }

 

总结：

实现这部分时，遇到的几个问题：

1、如何使它固定在浏览器页面的顶端。

2、列表的默认排列是垂直的，如何使它水平排列。

3、去掉列表前的符号。

4、如何使两个元素在一条水平线上分布。

解决方法：

1、在元素的样式中运用position:fixed;top:0;left:0;  fixed表示元素的定位是固定的。top和left为0表示元素定位固定在浏览器页面的顶端。

2、在<li>元素的样式中运用float:left;属性。（从左往右水平排列）

3、在<li>元素的样式中运用list-style-type:none;属性。

4、在第一个元素的样式中运用display:inline-block;使其变为行内块元素。