QQ空间前端header部分——2018年5月18日 - qq空间实战

Home > List of blog posts > QQ空间前端header部分——2018年5月18日

Blogger Information

Blog 56

fans 3

comment 1

visits 50820

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="/static/css/index.css">
	<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
	<title>繁华落尽的空间</title>
</head>
<body>
	<div class="header">
		<div class="container">
			<div class="left">
				<a href="" class="logo"></a>
				<a><i class="fa fa-home"></i>他的主页</a>
				<a><i class="fa fa-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>
				<!-- top down 0,left right 10 -->
				<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="backgroud-container">
			<div class="container">
				<div class="userinfo">
					<h1><span>繁华落尽</span></h1>
					<a href="" class="lv"></a>
					<a href="" class="fly"></a>
					<div class="addr">繁华落尽http://88527.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></i>赞 | 0</a>
				</div>

				<div class="user-detail">
					<img src="/static/imgs/userinfo.png" alt="" class="avatar">
					<div class="nickname">猪哥@php.cn</div>
					<div class="vip-year">
						<img src="/static/imgs/vip_year_8.png" alt="">
						<span>成长值 3600 成长速度 30点/天</span>
						<div class="progress">
							<div class="progress-bar progress-bar-waring" role="progressbar"
								style="width:60%;"></div>
						</div>
						<a href=""><img src="/static/imgs/icon-vip-fee-year.png" alt=""></a>
						<a href="" class="level"></a>

					</div>

					<div class="weather">
						<img src="http://qzonestyle.gtimg.cn/aoi/img/weather/weather-cloudy-sunny.png" alt="">
						<span class="temperature">30°</span>
						<div style="float:right;font-size:18px;">
							<span>合肥</span>
							<br >
							<span style="font-size:12px;">4月24日</span>
						</div>
					</div>

					<div class="nav">
						<ul>
							<li><a href="">主页</a></li>
							<li><a href="">日志</a></li>
							<li><a href="">留言板</a></li>
							<li><a href="">相册</a></li>
							<li><a href="">个人档</a></li>
							<li><a href="">好友秀</a></li>
							<li><a href="">更多</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

index.css

实例

body {margin: 0;padding: 0;}
.header {
	width: 100%;
	height: 40px;
	background-color: wheat;
	line-height: 40px;
}

.header .left {
	width: 400px;
	float: left;
	background: lightgreen;
}

.header a {
	color: green;
	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;
	background-color: wheat;
}

.header .right a{
	float: right;
}

.header .right span {
	float: right;
	line-height: 40px;
}
.header .right .searchbox {
	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: orange;
}

.header .right .searchbox .search {
	position: absolute;
	top: 0px;
	margin-left: 148px;
}
.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;}

.backgroud-container {
	background-image: url('/static/imgs/top.jpg')
}

.backgroud-container .userinfo h1{
	float: left;
}
.backgroud-container .addr{
	position: absolute;
}

.backgroud-container .lv{
	background-image: url('/static/imgs/icon3.png');
	display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;

	position: relative;
	background-position: -36px 0px;
	margin-top: 37px;
	margin-left: 5px;

}

.backgroud-container .fly{
	background-image: url('/static/imgs/icon.png');
	display: inline-block;
	width: 34px;
	height: 22px;
	background-repeat: no-repeat;

	position: relative;
	background-position: -204px -76px;
	margin-top: 37px;
	margin-left: 5px;

}

.backgroud-container .profile {
	float: right;
}
.backgroud-container .profile a{
	margin: 0px 10px;
	border: solid 1px red;
	border-radius: 30px;
	padding: 10px;
}

.backgroud-container .profile i{margin: 0px 10px;}

.backgroud-container .user-detail {margin-top: 80px;}

.backgroud-container .user-detail .avatar {
	width: 128px;
	float: left;
	border: solid 3px #fff;
	border-radius: 4px;
}
.backgroud-container .user-detail .nickname {
	float: left;
	margin-left: 20px;
	color: orange;
	font-size: 20px;
	width: 50%;
}
.backgroud-container .vip-year {
	float: left;
	margin-left: 20px;
	margin-top: 10px;
	width: 50%;
	font-size: 12px;
}
.backgroud-container .vip-year img {
	margin-right: 10px;
}

.backgroud-container .vip-year a {
	margin-left: 10px;
}
.backgroud-container .vip-year .progress {
	height: 8px;
	margin-bottom: 0px;
	width: 160px;
	position: absolute;
	margin-top: -12px;
	margin-left: 75px;
}

.backgroud-container .vip-year .level {
	background-image: url('/static/imgs/profile-v9-adg.png');
	background-position: -1374px -49px;
	width: 22px;
	height: 20px;
	display: inline-block;
	background-repeat: no-repeat;
}
.backgroud-container .user-detail .weather {
	float: right;
	width: 162px;
	height: 56px;

}
.backgroud-container img {
	vertical-align: baseline;
}
.backgroud-container .temperature {
	font-size: 40px;
	position: absolute;
}
.backgroud-container .user-detail .nav {
	float: left;
	width: 80%;
	margin-left: 20px;
	margin-top: 25px;

}
.backgroud-container .user-detail .nav ul {
	list-style: none;
	padding-left: 0;
}
.backgroud-container .user-detail .nav ul li {
	display: inline;
	margin: 10px 10px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

企业站点开发之后台

2018-06-14 20:39:34