简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >前端实战：QQ空间——2018年5月16日

前端实战：QQ空间——2018年5月16日

白猫警长的博客
白猫警长的博客原创
2018年05月18日 17:28:56685浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀿澕落儘 [http://88526.qzone.qq.com]</title>
	<link rel="stylesheet" type="text/css" href="/qzone-0515/static/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/qzone-0515/static/css/tets.css">
	<link rel="stylesheet" type="text/css" href="/qzone-0515/static/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>	
	<!--顶部-->
	<div class="header">
	<div class="container">
		<div class="left">
			<a href="#" class="logo"></a>
			<a href="#"><i class="fa fa-home"></i>他的主页</a>
			<a href="#"><i class="fa fa-user"></i>他的动态</a>
		</div>
		<div class="right">
			<div class="userinfo">
				<span> | </span>
				<a href="#">返回个人中心</a>
				<span>|</span>
				<a href="#" style="font-size: 12px;"><img src="/qzone-0515/static/imgs/userinfo.png">Appler [退出]</a>
				<a href="#"><i class="fa fa-cog" style="font-size: 15px; margin-left: 20px;"></i></a>
				<a href="#"><i class="fa fa-diamond" style="font-size:15px; margin-left: 20px;"></i></a>
				<a href="#"></a>
			</div>
			<div class="zt">
				<a href="javascript:" class="sus"></a>
				<a href="javascript:" class="sul"></a>
			</div>
			<div class="search-box">
				<input type="text" placeholder="用户/游戏/动态">
				<a href="#" class="search" ><i class="fa fa-search"></i></a>
			</div>
		</div>
	</div>
	</div>

	<!--中部-->
<div class="middle">
	<div class="container">
			<div class="website">
				<div class="left">
					<div class="up">
						<h1>瀿澕落儘</h1>
						<a href="#" class="ap"></a>
						<a href="#" class="lp"></a>
					</div>
					<div class="below">瀿澕落儘 http://88526.qzone.qq.com</div>
				</div>
				<div class="right">
				<a href="" class="hy"><i class="fa fa-plus"></i>加为好友</a>
				<a href="" class="dz"><i class="fa fa-thumbs-up"></i>赞 | 1</a>
				</div>	
			</div>
	
			<div class="web_top">
				<div class="top_left">
					<div class="via">
						<img src="/qzone-0515/static/imgs/userinfo.png">
					</div>
					<div class="top_name">
						<h4>猪哥@php.cn</h4>
						<div class="member">
							<a href="#" class="vip"></a>
							<div class="ll">
							<a href="#" class="gro">成长值 36805  成长速度 35点/天</a>
							<div class="progress">
					  			<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;height: 5px;">60%</div>
							</div>	
							</div>
							<a href="#" class="vip-fee"></a>
							<a href="#" class="vip-cro"></a>
						</div>

						<div class="navi clear">
							<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 class="top_right">
					<a href="#" class="yun"></a>
					<strong>29</strong>
					<span>°厦门<br>5月17日</span>
				</div>
			</div>

		<!-- 中间大区块，左右两边布局 -->
		<div class="coneet">
		<!-- 左侧 -->
		<div class="con_left">
			<div class="list-1">
				<a href="#"><b>0</b><br>照片</a>
				<a href="#"><b>1</b><br>说说</a>
				<a href="#"><b>0</b><br>日志</a>
			</div>
			<div class="list-2">
				<ul>
					<li class="ge"><strong>个人档</strong></li>
					<li><i class="fa fa-vcard-o"></i>瀿澕落儘</li>
					<li><i class="fa fa-wpforms"></i>28岁  白羊座 男</li>
					<li><i class="fa fa-shopping-bag"></i>软件公司</li>
					<li><i class="fa fa-graduation-cap"></i>来自 安徽合肥</li>
					<li><a href="#">查看详细资料</a></li>
				</ul>
			</div>
			<div class="list-3">
				<ul>
					<li class="ge"><strong>留言板</strong></li>
					<li>
						<textarea name="" id="" cols="5" rows="3" placeholder="我也留个言吧"></textarea>
						<a href="javascript:" class="blow"><i class="fa fa-smile-o"></i></a>
						<div class="bq_right">
						
							<label><input type="checkbox" name="">私密留言<i class="fa fa-diamond"></i></label>
							<button>发表</button>
						</div>
						<div class="clear"></div>
					</li>
					<li>
						<a href="#">五趾的鱼:</a>
						<span>大家一起踩踩</span>
						<p>2018-05-11 20:17:23</p>
					</li>
					<li>
						<a href="#">五趾的鱼:</a>
						<span>大家一起踩踩</span>
						<p>2018-05-11 20:17:23</p>
					</li>
					<li>
						<a href="#">五趾的鱼:</a>
						<span>大家一起踩踩</span>
						<p>2018-05-11 20:17:23</p>
					</li>
					<li>
						<a href="#">五趾的鱼:</a>
						<span>大家一起踩踩</span>
						<p>2018-05-11 20:17:23</p>
					</li>
				</ul>
			</div>
		</div>

		<!-- 右侧 -->
		<div class="con_right">
			<div class="list_right1">
				<div class="tu">
					<img src="/qzone-0515/static/imgs/userinfo.png"> 
				</div>
				<div class="gift">
					<a href="#">猪哥@php.cn</a>
					<p>4月11日 09:54</p>
				</div> 
				<div class="right">
					<a href=""><i class="fa fa-angle-down"></i></a>
				</div>
				<div class="clear"></div>
				<div class="giftfo">
					<div class="left">
						<img src="/qzone-0515/static/imgs/gift-default.jpg" alt="赠送礼物">
					</div>
					<div class="right">
						<span>4月13日是猪哥@php.cn 的生日，赶紧送礼物祝他生日快乐吧！...</span>
						<button>赠送礼物</button>
					</div>
				</div>
			</div>

			<!-- 第二栏 -->
			<div class="right-jour">
				<div class="tu">
					<img src="/qzone-0515/static/imgs/userinfo.png"> 
				</div>
				<div class="gift">
					<a href="#">猪哥@php.cn</a>
					<p>4月11日 09:54</p>
				</div> 
				<div class="right">
					<a href=""><i class="fa fa-angle-down"></i></a>
				</div>
				<div class="clear"></div>
				<div class="nexw">
					<p>看看测试下还有多少人在玩QQ空间</p>
					<img src="/qzone-0515/static/imgs/psb.jpg">
				</div>
				<div class="rig_state">
					<i class="fa fa-mobile"></i>
					<span>来自 iPhone 7 Plus (4G) </span>
					<div style="margin-top: 10px;">
						<span>浏览645次</span>						
						<p>
							<a href=""><i class="fa fa-thumbs-up"></i></a>
							<a href=""><i class="fa fa-commenting"></i></a>
							<a href=""><i class="fa fa-mail-forward"></i></a>
						</p>
					</div>
				</div>
				<hr>
				<div class="praise">
					<i class="fa fa-thumbs-up"></i>
					<span>Young °、老新、张小飞、东风、国际金融域名注册局中国办、　　　　、汪星、IDoog、人生、hanbindsg、◆ 郝先生i°、给你买辣条、尘子丿瘾君子、马到成功、。、
上一条：5月17日作业下一条：数据库设计注意事项+2018年5月18日17时25分
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多