Go语言视频零基础入门到精通

javalearner

在昨天的教程中，我们在main.css文件中添加了一些新的样式代码，用来搞 定HTML5新元素标签的显示问题；今天我们来看看页面头部(header)的样式设定。
这部分的样式代码没什么悬念，基本都是我们平时所能接触到的；回顾一下之前学习的页面头部HTML代码及局部设计图，做到心中有数。
下面我们来看看样式代码；同样需要添加到main.css当中去：
  
   
   
    /*
        Header
*****************/
#banner {
        margin: 0 auto;
        padding: 2.5em 0 0 0;
}

        /* Banner */
        #banner h1 {font-size: 3.571em; line-height: .6;}
        #banner h1 a:link, #banner h1 a:visited {
                color: #000305;
                display: block;
                font-weight: bold;
                margin: 0 0 .6em .2em;
                text-decoration: none;
                width: 427px;
        }
        #banner h1 a:hover, #banner h1 a:active {
                background: none;
                color: #C74350;
                text-shadow: none;
        }

        #banner h1 strong {font-size: 0.36em; font-weight: normal;}
[/code]
   
   
  
马不停蹄地来参观导航部分的样式代码：
  
   
   
    /* Main Nav */
#banner nav {
        background: #000305;
        font-size: 1.143em;
        height: 40px;
        line-height: 30px;
        margin: 0 auto 2em auto;
        padding: 0;
        text-align: center;
        width: 800px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}

#banner nav a:link, #banner nav a:visited {
        color: #fff;
        display: inline-block;
        height: 30px;
        padding: 5px 1.5em;
        text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
        background: #C74451;
        color: #fff;
        text-shadow: none !important;
}

#banner nav li:first-child a {
        border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;

        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
}
[/code]
   
   
  
有必要提及一下的大概就是border-radious了，其实也不是很新的东东了，感觉最近几年越来越多的同学在使用这个，以及text- shadow等。“border-top-left-radius:5px;”用来将容器左上角的边框设定为5像素圆角，另外两行则分别用来兼容 Mozilla与Webkit浏览器。关于border-radius的详情可以参见css3.info的这篇经典文章。

复制代码