小毛

网站页面header头部导航栏代码
HTML代码:<!-- HTML代码-- <html> <head> <...
扫描右侧二维码阅读全文
24
2019/07

网站页面header头部导航栏代码

HTML代码:

<!-- HTML代码--!>
<html>
<head>
    <title>
        测试网页
    </title>
    <link rel="stylesheet" href="./css_headers.css">
</head>
<body>
    <div class = "header">
        <div class="header-box">
            <div class="header-logo">
                <h1 class="header-title">
                    <a href="javascript:void(0)" class="logo"/></a>
                </h1>
            </div>
            <ul class="header-menu">
                <li><a href="javascript:void(0)">首页</a></li>
                <li><a href="javascript:void(0)">付费课程</a></li>
                <li><a href="javascript:void(0)">我的课堂</a></li>
                <li><a href="javascript:void(0)">搜索</a></li>
            </ul>
            <div class="logo-right">
                <a href="javascript:void(0)">注册</a> |
                <a href="javascript:void(0)">登录</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码:

*{
    margin:0px;
    padding:0px;
}
.header{
    width:100%;
    background-color:green;
    height:100px;
}
.header .header-box{
    width:1400px;
    height:100px;
    background:black;
    margin:auto;
}
.header .header-box .header-logo{
    width:200px;
    height:100px;
    background:blue;
    float:left;
}
.header .header-box .header-logo .header-title{
    background-image:url("./logo.jpg")
}
.header .header-box .header-logo .header-title .logo{
    width:100%;
    display:block;
    height:100px;
}
.header .header-box .header-menu{
    padding-left:30px;
    float:left;
    list-style:none;
    color:white;
}
.header .header-box .header-menu li{
    float:left;
    margin-left:50px;
    padding:0 30px;
    line-height:95px;
}
.header .header-box .header-menu li:hover{
    border-bottom:5px solid blue;
    box-sizing:border-box;
}
.header .header-box .header-menu li a{
    color:white;
    text-decoration:none;
}
.header .header-box .header-menu li a:hover{
    color:red;
    text-decoration:none;
}
.header .header-box .logo-right{
    float:right;
    line-height:95px;
    color:white;
    padding-right:80px;
}
.header .header-box .logo-right a{
    text-decoration:none;
    color:white;
}
.header .header-box .logo-right a:hover{
    color:red;

}

网页效果

网页效果.jpg

Last modification:July 24th, 2019 at 01:05 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment