实例
<!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/css/site.css"> <link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="container"> <div class="left"> <a class="logo" href=""></a> <a><i class="fa fa-home"></i>他的主页</a> <a><i class="fa fa-user"></i>他的动态</a> </div> <div class="right"> <div class="info"> <img src="/static/imgs/userinfo.png"> <a href=""><i class="fa fa-diamond" style="font-size: 14px;"></i></a> <a href=""><i class="fa fa-cog" style="font-size: 14px;"></i></a> <a href="" style="font-size: 12px;">Appler [退出]</a> </div> <span style="margin:0px 10px;">|</span> <a href="">返回个人中心</a> <span>|</span> <div class="box"> <input type="text" name="" placeholder="用户/游戏/动态"> <a href="" class="search"><i class="fa fa-search"></i></a> </div> </div> </div> </div> <!-- 主体部分 --> <div class="body"></div> <!-- 底部 --> <div class="footer"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body{margin: 0;padding: 0;}
.header{width: 100%;height: 40px;background: #d18b00;line-height: 40px;color:#ffffff;}
.header .left{width: 400px;float: left;}
.header a{color:#ffffff;text-decoration: none;}
.header .logo{background-image: url(/static/imgs/icon.png);background-position: 0px 0px;float: left;width: 90px;height: 40px;}
.header a{margin-left: 10px;}
.header a i{width: 20px;height: 16px;margin-left: 10px;font-size: 18px;}
.header .right{float: right;}
.header .right a{float: right;}
.header .right span{float: right;line-height: 40px;color:#e69900}
.header .right .box{color: #bababa;float: right;margin-right: 10px;}
.header .right .box input{width: 135px;height: 20px;font-size: 12px;padding:5px;border:none;border-radius: 4px;background-color: rgba(255,255,255,.25);color: #ffffff;}
.header .right .box input::-webkit-input-placeholder {color: #eeeeee;}
.header .right .box .search{position: absolute;top: 0px;margin-left: 148px;}
.header .right .box .search i{font-size: 14px;margin-left: -30px;}
.header .right .info{float: right;}
.header .right .info img{width: 24px;height: 24px;}运行实例 »
点击 "运行实例" 按钮查看在线实例