5月15日作业
代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 猪哥 qq 空间</title> <link rel="stylesheet" type="text/css" href="static/css/index.css"> <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"> <script src="static/js/jquery-3.3.1.js"></script> <script scr="static/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="header"> <div class="container"> <div class="left"> <a class="logo" href=""></a> <a href=""><i class="glyphicon glyphicon-gift"></i>他的主页</a> <!-- <a href=""><i class="fa fa-home"></i>他的主页</a>--> <!-- <a href=""><i class="fa fa-user"></i>他的动态</a>--> <a href=""><i class="glyphicon glyphicon-user"></i>他的动态</a> </div> <div class="right"> <div class="user-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="searchbox"> <input type="text" name="" placeholder="输入查询/关键字"> <a href="" class="search"><i class="fa fa-search"></i></a> </div> </div> </div> <div class="body"> <div class="background-container"> <div class="container"> <div class="userinfo textshadow"> <h1 style="float: left;"><span>瀿澕落儘</span></h1> <a href="" class="lv"></a> <a href="" class="fly"></a> <div class="addr">瀿澕落儘 http://88526.qzone.qq.</div> </div> <div class="profile"> <a href=""><i class="fa fa-plus"></i>加好友</a> <a href=""><i class="fa fa-thumbs-up"></i>赞 </a> </div> </div> </div> </div> <div class="footer"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body{
margin: 0;
padding: 0;
background:0
}
.header{
width: 100%;
height:40px;
background:#ffa400;
line-height:40px
}
.header .left{
width:450px;
background:green;
float:left;
}
.header a{
color:#ffffff;
text-decoration: none;
}
.header .logo{
background-image: url(http://www.php.io/0515/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{
width:550px;
background:green;
float:right;
}
.header .right{
float:
right;
}
.header .right a{
float: right;
}
.header .right span{
float: right;
line-height:
40px;color:#e69900
}
.header .right .searchbox{
color: #bababa;
float: right;
margin-right: 10px;
}
.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 .search{
position: absolute;
top: 0px;margin-left: 12px;
}
.header .right .searchbox .search i{
font-size: 14px;
margin-left: -30px;
}
.header .right .user-info{
float: right;
}
.header .right .user-info img{
width: 24px;
height: 24px;
}
.background-container{
background-image: url('/static/imgs/top.jpg');
width: 100%;
height: 650px;
}
.background-container .userinfo{
color: #cc8f14;
}
.background-container .userinfo .addr{
position: absolute;
}
.background-container .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;
}
.background-container .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;
}
.background-container .profile{
float: right;
}
.background-container .profile a{
margin: 0px 10px;
border: solid 1px #cdcdcd;
border-radius: 30px;
color: #ffffff;
background-color:rgba(0,0,0,.4);
padding: 10px;
}
.background-container .profile i{
margin: 0px 10px;
}
.body{
width: 100%;
height: 800px;
background:#3eede7;
}
.footer{
width:100%;
height:100px;
background:#ff4777;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
代码运行图片
