头部html代码
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/static/css/site2.css"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css"> <script href="static/bootstrap/js/bootstrap.min.js"></script> <title>时光@记忆的QQ空间</title> </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"> <div class="user-info"> <img src="/static/imgs/userinfo.png" alt="头像"> <a href=""><i class="fa fa-diamond"></i></a> <a href=""><i class="fa fa-cog"></i></a> <a href="">Appler [退出]</a> </div> <span>|</span> <a href="">返回个人中心</a> <span>|</span> <div class="searchbox"> <input type="text" name="" placeholder="用户/游戏/动态"> <a href="" class="search"><i class="fa fa-search"></i></a> </div> </div> </div> </div> <!-- body --> <div class="body"> <div class="container"> <div class="userinfo text-shadow"> <h1><span>瀿澕落儘</span></h1> <a href="#" class="lv"></a> <a href="#" class="fly"></a> <div class="addr">瀿澕落儘 http://88526.qzone.qq.com</div> </div> <!-- 加好友 --> <div class="profile"> <a href="#"><i class="fa fa-plus"></i>加好友</a> <a href="#"><i class="fa fa-thumbs-up"></i>赞 | 1</a> </div> </div> </div> <!-- footer --> <div class="footer"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css文件
实例
body{padding: 0;margin: 0;}
.header{height: 40px;background: rgb(209,139,0);}
.header .left{float:left;height: 30px;width: 320px;line-height: 40px;}
.header .left .logo{background: url('/static/imgs/icon.png');background-position: 0px 0px; width: 90px;height: 40px; float: left;}
.header .left .home{color: #ffffff;margin-left: 10px;text-decoration: none;}
.header .left .home i{width:20px;height:16px;margin-left:10px;font-size: 18px;}
.header .right{float:right;height: 30px;width:500px;line-height: 40px;}
.header .right .searchbox{color: #bababa;float: right;}
.header .right .searchbox 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 .searchbox input::-webkit-input-placeholder {color: #eeeeee;}
.header .right .searchbox i{font-size: 14px;margin-left: -18px;color: #ffffff;}
.header .right .user-info{float:right;}
.header .right .user-info img{width: 24px;height: 24px;}
.header .right .user-info a{color: #ffffff;margin-left: 12px;font-size: 14px;text-decoration: none;}
.header .right span{float: right;color: #e69900;margin-right: 10px;}
.header .right a{float: right;margin-right: 10px;color: #ffffff;text-decoration: none;}
.body{background-image:url('/static/imgs/top.jpg');width:100%;height: 650px;}
.body .userinfo{color: #cc8f14;text-shadow:1px 1px 1px rgba(0,0,0,.2);}
.body .userinfo h1{float: left;}
.body .userinfo .addr{position: absolute;}
.body .userinfo .lv{background-image: url('/static/imgs/icon3.png');display: inline-block;width: 16px;background-repeat: no-repeat;height: 16px;position: relative;background-position: -36px 0px;margin-top: 37px;margin-left: 5px;}
.body .userinfo .fly{background-image: url('/static/imgs/icon.png');display: inline-block;width:34px;background-repeat: no-repeat;height: 22px;position: relative;background-position: -204px -76px;margin-top: 37px;margin-left: 5px;}
.body .profile{float:right;font-size: 13px;}
.body .profile a{display: inline-block; width: 90px; text-decoration: none;color: #ffffff;margin:0 12px;border: solid 1px #cdcdcd;background-color: rgba(0,0,0,.4);padding: 10px;border-radius:20px;}
.body .profile a i{margin-right: 10px;}
.footer{height: 100px;background: blue;}运行实例 »
点击 "运行实例" 按钮查看在线实例
