Correction status:Uncorrected
Teacher's comments:
自己做的,可能和原页面不同。
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>QQ</title> <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class="header"> <div class="container"> <div class="left"><a href="" class="logo"></a> <a href="" class="home"><i class="fa fa-home"></i> 他的主页</a> <a href="" class="home"><i class="fa fa-user"></i> 他的动态</a> </div> <div class="right"> <a href="" class="return"><i class="fa fa-search"></i></a> <span>| </span> <a href="" class="return">返回个人中心</a> <span>| </span> <a href="" class="picture"><img src="static/imgs/userinfo.png" alt=""></a> <a href="" class="name">Applear[退出]</a> <a href="" class="return"><i class="fa fa-cog"></i></a> <a href="" class="return"><i class="fa fa-diamond"></i></a> </div> </div> </div> <div class="body"></div> <div class="footer"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css代码:
body { margin: 0; padding: 0; } .header { height: 40px; background-color: #d18b00; line-height: 40px; } .body { height: 100%; background-color: blue; } .footer { height: 100%; background-color: red; } .header .left { width: 400px; height: 40px; float: left; margin-left: 40px; // background-color:red; } .header .logo { background: url("/qq/static/imgs/icon.png"); background-position: 0 0; width: 90px; height: 40px; float: left; } .header .left a { float: left; margin-left: 15px; height: 40px; color: white; text-decoration: none; } .header .right { width: 447px; height: 40px; float: right; margin-right: 40px; // background-color:red; } .header .right a { float: left; margin-left: 25px; height: 40px; color: white; text-decoration: none; } span { float: left; margin-left: 25px; height: 40px; color: #e69900; } .header .right img { width: 25px; height: 25px; } .header .name { font-size: 0.8em; }
点击 "运行实例" 按钮查看在线实例