我的Html5学习开发历程（一）—— 导航栏的制作

刚开始学HTML5觉得挺好，记录下自己的学习历程，也跟大家多交流下经验！废话不多说，开始今天的导航栏制作！

制作完效果如图：

代码部分：

    <div class="title-content">
        <div class="title-logo">           
           <!--<img src="">这里可以加logo我就先不加了！因为我懒-->
        </div>
        <div class="title-text">
            <ul>
                <li class="active"><a href="#">
                    <em>首页</em>
                </a></li>
                <li><a href="#">
                    <em>交流中心</em>
                </a></li>
                <li><a href="#">
                    <em>服务中心</em>
                </a></li>
                <li><a href="#">
                    <em>产品展示</em>
                </a></li>
            </ul>
        </div>
    </div>

好，基本的操作完了，下面来进行css样式设计，高潮要来了！莫名的兴奋……

*{
    margin: 0;
    padding:0;
    font-size: 12px;
    font-style: normal;
}
body{
    background-color: #f1f1f1;
}
li,ul,a,div,img{
    border: 0;
    list-style: none;
}
div{
    display:block ;
}
a{
    color: #333333;
    text-decoration: none;
    outline: none;
}
em{
    font-weight: normal;
}
.logo{
    width: 130px;
    height: 70px;
}
.title{
    background-color: #222222;
}
.title-content{
    width: 980px;
    height: 70px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.title-logo{
    width: 150px;
    height: 70px;
    float: left;
    padding-rigth: 10px;
    padding-top: 8px;
}
.title-text{
    height: 70px;
    float: left;
}
.title-text li{
    height: 70px;
    float: left;
    margin-right: 20px;
}
.title-text li *{
    color: #dadada;
    display: inline-block;
    font-size: 14px;
}
.title-text li a{
    height: 22px;
    padding: 26px 17px;
}
.title-text li.active{
    background-color: #333333;
}
.title-text li a:hover{
    background-color: #333333;
}

设置背景为浅灰色。让标签横向排列，位置调整好，初始化第一个标签为灰色。

然后添加鼠标经过事件，经过就变灰！

今天的到这里，明天继续~！