index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> </head> <body> <!--header star--> <div class="header"> <div class="header-contain"> <h1 class="log"><a href="#" class="logo-title"></a></h1> <ul class="menu"> <li><a href="#">首页</a> </li> <li><a href="course.html">在线课堂</a> </li> <li><a href="pay.html">付费课程</a> </li> <li><a href="search.html">搜active索</a> </li> </ul> <div class="log-box"> <i></i> <!--引入图标时一般用 i 标签 --> <span><a href="reg.html">注册</a> </span> <span><a href="login.html">登录</a> </span> </div> </div> </div> <!--header end--> </body> </html>
共同样式
common.css
.header{ height: 69px; width: 100%; background: black; color: white; } .header .header-contain{ width: 1200px; height: 69px; line-height: 69px; margin: auto; background: skyblue; } /*logo star*/ .header .header-contain .log{ width: 230px; height: 64px; float: left; /*左浮动*/ } .header .header-contain .log .logo-title{ display: block; /*块级*/ width: 100%; height: 100%; background: url("https://www.python.org/static/img/python-logo.png ") no-repeat ; } /*logo end*/ /*meau star*/ .header .header-contain .meau{ float: left; margin-left: 100px; } .header .header-contain .menu li{ height: 69px; padding: 0 30px; float: left; /*border-bottom: 5px solid red;*/ /*box-sizing:border-box;*/ } .header .header-contain .menu li.active{ border-bottom: 5px solid red; box-sizing: border-box; } .header .header-contain .menu li:hover{ border-bottom: 5px solid red; box-sizing: border-box; } /*meau end*/ .header .header-contain .log-box{ float: right; }