网页-导航栏 


.header{
    height: 650px;
    width: 1000px;
    background-color: gray;
}
.a{
    width: 1000px;
    height: 50px;
    background-color:bisque ;
}
.left{
    width: 150px;
    height: 540px;
    background-color: antiquewhite;
}
.denglu{
    float: right;
    margin: 10px;
    font-family: 黑体;
}
.denglu>a{
    text-decoration: none;
}
.left>h4{
    font-family: 黑体;
    padding: 10px;
    background-color: gainsboro;
}
.left>ul{
    padding: 0;
    text-align: center;
}
.left>ul>li{
    list-style: none;
    line-height: 30px;
    font-family: 黑体;
}
.left>ul>li:hover{
    background-color: darkgray;
     width: 150px;
    color: white;
    cursor: pointer;
}
@font-face {
    font-family: a;
    src: url(../fonts/MATURASC.TTF);
}
.zong{
    font-family: a;
    margin: 0 20px;
    font-size: 25px;
    color: rebeccapurple;
    float: left;
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="js/bootstrap.js">
    <link rel="stylesheet" href="css/houtaidaohang.css">
</head>
<body>
<div class="container">
    <div class="header">
       <div class="a">
           <div class="zong">
               <span>Now time</span>
           </div>
           <div class="denglu">
               <div class="glyphicon glyphicon-user"></div>
               <a href="">欢迎YCJ用户登录</a>
           </div>
       </div>
        <div class="left">
            <h4>新闻内容</h4>
            <ul>
                <li class="glyphicon glyphicon-envelope">内容修改</li>
            </ul>
            <ul>
            <li class="glyphicon glyphicon-plus">内容添加</li>
            </ul>
            <h4>分类排行</h4>
            <ul>
                <li><i class="glyphicon glyphicon-th"></i>最新排行</li>
            </ul>
            <ul>
                <li><i class="glyphicon glyphicon-stats"></i>热点排行</li>
            </ul>
            <h4>用户管理</h4>
            <ul>
                <li><i class="glyphicon glyphicon-stop"></i>密码还原</li>
            </ul>
            <ul>
                <li><i class="
glyphicon glyphicon-ban-circle"></i>屏蔽或释放</li>
            </ul>
            <h4>留言管理</h4>
            <ul>
                <li><i class="
glyphicon glyphicon-ban-circle"></i>禁止留言</li>
            </ul>
            <ul>
                <li> <i class="glyphicon glyphicon-remove"></i>留言删除</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
posted @ 2017-06-25 22:04  全冬  阅读(154)  评论(0)    收藏  举报