QQ空间首页模仿制作——HTML布局练习

为了我们拥有更加扎实的前端基础,我建议大家仅将我的代码作为参考,自己练一练会更好,话不多说,下边是效果图跟代码:

效果:

QQZone.html: 

<!DOCTYPE html>
<html>
	<head>
		<title>我的QQ空间</title>
		<link type="text/css" rel="stylesheet" href="QQZone.css"/>
	</head>
	<body>
		<div class="div_top">
			<div class="top_menu">
				<div class="top_1"></div>
				<div class="top_2" style="margin-left:10px;">
					<i style=" background-position: -452px -52px;"></i>
					<span>个人中心</span>
				</div>
				<div class="top_2" style="width:101px;">
					<i style=" background-position: -452px -104px;"></i>
					<span>我的主页</span>
				</div>
				<div class="top_2" style="width:77px;">
					<i  style=" background-position: -452px -78px;"></i>
					<span>好友</span>
				</div>
				<div class="top_2" style="width:77px;">
					<i  style=" background-position: -452px -130px;"></i>
					<span>游戏</span>
				</div>
				<div class="top_2"   style="width:77px;">
					<i  style=" background-position: -452px -156px;"></i>
					<span>装扮</span>
				</div>
				
				<div class="music">
					<div class="music_left">
						<i style=" background-position: -452px -208px;margin:2px;"></i>
					</div>
					<div class="music_right">
						<i></i>
					</div>
				</div>
				
				<div class="div_input">
					<input type="text" placeholder="  用户/游戏/动态"/>
					<i></i>
				</div>
				
				<div class="img_info">
					<div class="imglogo">
						<img style="width:24px;height:24px;border-radius: 2px;" src="images/30.jpg" alt="您的头像">
					</div>
					<div class="userinfo">
						<span style="margin-left:0;">还有童心的成年人</span>
					</div>
				</div>	
				
				<div class="shareImg">
					<i style=" background-position: -452px -286px;margin-top:13px;margin-left:10px;"></i>
				</div>
				
				<div class="shareImg">
					<i style=" background-position: -452px -312px;margin-top:13px;margin-left:14px;"></i>
				</div>
				
				<div class="diamonds"></div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom_info">
				<div class="user_bottom">
					<div class="name">
						<span>无奈丶看花落  悲</span>
					</div>
				</div>
				
				<div class="fabulous">
					<i style=" background-position: -451px 0;"></i>
					<span class="num">1</span>
				</div>
				
				<div class="userImg">
					<img style="width:120px;height:120px;border-radius: 2px;margin:4px;" src="images/100.jpg" alt="您的头像">
				</div>
				
				<div class="userImg_right">
					<div class="userImg_right_top">
						<span style="margin-left:0;">还有童心的成年人</span>
					</div>
					<div class="userImg_right_down">
						<div class="userImg_right_down_1">
							<img width=40 height=40 src="images/8.png"/>
						</div>
						<div></div>
						<div></div>
						<div></div>
					</div>
				</div>
				
				<div class="info_menu">
					<div class="menu_1" style="margin-left:150px;">
						主页
					</div>
					<div class="menu_1">
						日志
					</div>
					<div class="menu_1">
						相册
					</div>
					<div class="menu_1" style="width:72px;">
						留言板
					</div>
					<div class="menu_1">
						说说
					</div>
					<div class="menu_1" style="width:72px;">
						个人档
					</div>
					<div class="menu_1">
						音乐
					</div>
					<div class="menu_1">
						更多
					</div>
				</div>
			</div>
			<div class="bottom_block">
				<div class="bottom_left">
					<div class="bottom_left_1">
						<div class="bottom_left_1_list">
							<i style="background-position: -478px -312px;"></i>
							<div class="bottom_left_1_list_text" style="font-weight: bold;">
								<a>好友动态</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -166px -52px;"></i>
							<div class="bottom_left_1_list_text">
								<a>特别关心</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -192px -104px;"></i>
							<div class="bottom_left_1_list_text">
								<a>与我相关</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -530px -130px;"></i>
							<div class="bottom_left_1_list_text">
								<a>空间达人</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -348px -312px;"></i>
							<div class="bottom_left_1_list_text">
								<a>那年今日</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -530px -182px;"></i>
							<div class="bottom_left_1_list_text">
								<a>腾讯课堂</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -504px -234px;"></i>
							<div class="bottom_left_1_list_text">
								<a>游戏应用</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position:-530px 0;"></i>
							<div class="bottom_left_1_list_text">
								<a>我的收藏</a>
							</div>
						</div>
					</div>
					
					<div class="bottom_left_1" style="margin-top:20px;">
						<div class="bottom_left_1_list">
							<i style="background-position: -478px -312px;"></i>
							<div class="bottom_left_1_list_text" style="font-weight: bold;">
								<a>好友动态</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -166px -52px;"></i>
							<div class="bottom_left_1_list_text">
								<a>特别关心</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -192px -104px;"></i>
							<div class="bottom_left_1_list_text">
								<a>与我相关</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -530px -130px;"></i>
							<div class="bottom_left_1_list_text">
								<a>空间达人</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -348px -312px;"></i>
							<div class="bottom_left_1_list_text">
								<a>那年今日</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -530px -182px;"></i>
							<div class="bottom_left_1_list_text">
								<a>腾讯课堂</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position: -504px -234px;"></i>
							<div class="bottom_left_1_list_text">
								<a>游戏应用</a>
							</div>
						</div>
						<div class="bottom_left_1_list">
							<i style="background-position:-530px 0;"></i>
							<div class="bottom_left_1_list_text">
								<a>我的收藏</a>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom_middle">
					<div class="bottom_middle_top">
						<div class="bottom_middle_top_input">
							<a style="line-height:30px;margin-left:9px;"> 说点儿什么吧</a>
						</div>
						<div class="camera">
							<i style="background-position: -192px -260px;"></i>
						</div>
						<div class="camera" style="margin-left:0px;">
							<i style="background-position:-192px -312px;"></i>
						</div>
					</div>
					
					<div class="bottom_middle_2">
						<div class="bottom_middle_2_1">
							<a style="line-height:30px;margin-left:9px;">全部动态</a>
						</div>
						<div class="bottom_middle_2_2">
							<i style="background-position:-192px -52px;"></i>
						</div>
						<div class="bottom_middle_2_3">
							<i style="background-position:-608px 0;margin-top:11px;"></i>
						</div>
						<div class="bottom_middle_2_4">
							<i style="background-position:-608px -52px;margin-top:11px;"></i>
						</div>
					</div>
					
					<div class="context" style="margin-top:0;">
						
					</div>
					<div class="context">
						
					</div>
				</div>
				<div class="bottom_right"></div>
			</div>
		</div>
	</body>
</html>

QQZone.css: 

body{
	margin:0;
	background-image:url(images/bg.jpg);
	background-repeat: repeat;
}

.div_top{
	width:100%;
	height:40px;
	background-color:#221d3b;
	margin:0 auto;
	position:fixed;
	z-index:100;
}

.top_menu{
	width:1046px;
	height:40px;
	margin:0 auto;
	line-height: 39px;
	color:#aca3cc;
}

.top_1{
	width:92px;
	height:41px;
	background-image: url(images/4.png);
    background-size: 575px 41px;
    background-position: 0 0;
	overflow: hidden;
	line-height: 123px;
	background-repeat:no-repeat;
	float:left;
}

.top_2{
	width:91px;
	height:41px;
	float:left;
}

.top_menu span{
	font-size:12px;
    cursor: pointer; 
	margin-left:31px;
}

.top_menu i{
	width: 16px;
    height: 16px;
    position: absolute;
    margin-left: 8px;
    margin-top: 13px;
	background-image: url(images/1.png);
    background-size: 632px 388px;
}

.music{
	height: 40px;
    width: 67px;
	float:left; 
	margin-left: 126px;
}

.music_left{
	height: 20px;
    width: 22px;
	background-color:#362e5c;
	float:left;
	margin-top:11px;
	cursor: pointer;
}

.music_right{
	height: 20px;
    width: 27px;
	background-color:#362e5c;
	float:left;
	margin-left:1px;
	margin-top:11px;
	cursor: pointer;
}

.music_right i{
	background-image: url(images/2.gif);
    background-size: 15px 10px;
	background-repeat:no-repeat;
	margin:5px;
}

.div_input{
	width:142px;
	height:40px;
	float:left;
}
.div_input input{
	border-radius: 2px;
    height: 18px;
	width:135px;
	border: none;
	background-color: rgba(255,255,255,.25);
	font-size: 12px;
	color:#aca3cc;
}
.div_input i{
	background-position: -452px -364px;
	margin-top:13px;
	margin-left:-20px;
	cursor: pointer;
}

.img_info{
	height: 40px;
    width: 95px;
	float:left; 
	cursor: pointer;
}
.imglogo{
	height: 24px;
    width: 32px;
	float:left;
	margin-left: 6px;
	margin-top: 7px;
	cursor: pointer;
}

.shareImg{
	width:26px;
	height:41px;
	float:left;
	cursor: pointer;
}

.diamonds{
	width:26px;
	height:29px;
	float:left;
	background-repeat:no-repeat;
	background-image: url(images/3.gif);
    background-size: 22px 19px;
	margin-top: 12px;
	margin-left: 13px;
	cursor: pointer;
}

.bottom{
	width:100%;
	height:1400px;
	margin-top: 40px;
    float: left;
}

.userinfo{
	height: 40px;
    width: 50px;
	margin-left:3px;
	float:left;
	display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
	cursor: pointer;
}

.bottom_info{
	width:1046px;
	height:260px;
	margin:0 auto;
}


.user_bottom{
	width:279px;
	height:38px;
	margin-top:20px;
	float:left;
}

.name{
	width:205px;
	height:38px;
	float:left;
	line-height: 38px;
    font-size: 28px;
	color:#aca3cc;
}

.fabulous{
	width:58px;
	height:32px;
	margin-left: 700px;
	border-radius: 18px;
	margin-top: 50px;
	background-color: rgba(0,0,0,.4);
    float: left;
}

.fabulous i{
	width: 16px;
    height: 16px;
    position: absolute;
    margin-left: 8px;
    margin-top: 8px;
	background-image: url(images/4.png);
    background-size: 575px 41px;
}

.num{
	color:#fff;
	margin-left: 32px;
	margin-top: 13px;
	line-height: 30px;
}

.userImg{
	width: 128px;
    height: 128px;
	background-color:#fff;
	float: left;
	margin-top: 10px;
}

.userImg_right{
	width: 379px;
    height: 99px;
	float: left;
	margin-left:15px;
	margin-top: 10px;
	font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
}

.userImg_right_top{
	width: 379px;
    height: 27px;
}
.userImg_right_top span{
	width: 145px;
    height: 26px;
	margin-left:3px;
	float:left;
	display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
	cursor: pointer;
	color: #a68dd9;
	font-size: 20px;
}
.userImg_right_down{
	width: 379px;
    height: 62px;
	margin-top:9px;
}

.info_menu{
	width: 1046px;
    height: 50px;	
	position: relative;
	margin-top: -30px;
	color: #ccc7d9;
	float:left;
}

.menu_1{
	width:58px;
	height:50px;
	line-height:50px;
	font-size: 14px;
	text-align:center;
	float:left;
	cursor: pointer;
}

.userImg_right_down_1{
	float:left;
	width:40px;
	height:40px;
}

.bottom_block{
	width:1038px;
	height:900px;
	margin:0 auto;
}

.bottom_left{
	width:170px;
	height:600px;
	float:left;
}

.bottom_left_1{
	width:170px;
	height:300px;
	background-color:#403366;
	border-radius:4px;
}

.bottom_left_1_list{
	width:170px;
	height:37px;
	border-radius:2px;
}

.bottom_left i{
	background-image: url(images/1.png);
	background-repeat:no-repeat;
	position: absolute;
	background-size: 632px 388px;
	width:16px;
	height:16px;
	margin-left:18px;
	margin-top:13px;
	float:left;
}

.bottom_left_1_list_text{
	color: #ccc7d9;
	width:126px;
	height:35px;
	line-height:42px;
	margin-left:44px;
	font-size:12px;
	float:left;
	margin-top:1px;
}

.bottom_middle{
	width:592px;
	height:800px;
	margin-left:23px;
	float:left;
}

.bottom_middle i{
	background-image: url(images/1.png);
	background-repeat:no-repeat;
	position: absolute;
	background-size: 632px 388px;
	width:24px;
	height:24px;
	margin-left:11px;
	margin-top:22px;
	float:left;
}

.bottom_middle_top{
	width:592px;
	height:70px;
	color: #827a99;
	font-size:14px;
	background-color:#473a6e;
}

.bottom_middle_top_input{
	width:443px;
	height:68px;
	float:left;
}

.camera{
	width:48px;
	height:68px;
	float:left;
	margin-left:50px;
    background-color: #3b2f61;
	border:0.5px solid #352a54;
}

.bottom_middle_2{
	width:591px;
	height:45px;
	float:left;
	background-color: #3b2f61;
	margin-top:13px;
	border:0.5px solid #2e244f;
}

.bottom_middle_2_1{
	width:66px;
	height:35px;
	float:left;
	color: #ccc7d9;
	font-weight: 700;
	font-size:14px;
	line-height:35px;
	margin-top:5px;
}

.bottom_middle_2_2{
	float:left;width:10px;height:10px;
}

.bottom_middle_2_3{
	float:left;width:24px;height:24px;margin-left:420px;
}

.bottom_middle_2_4{
	float:left;width:24px;height:24px;margin-left:20px;
}

.context{
	width:591px;
	height:300px;
	background-color: #3b2f61;
	margin-top:13px;
	float:left;
}

.bottom_right{
	width:230px;
	height:600px;
	background-color:#bbb;
	margin-left:23px;
	float:left;
}

图片(由于图片没法在这放,我直接把代码包放网盘上了):https://pan.baidu.com/s/1nIm5AcqvF1-wjL8-Wyuaiw

其中有很多小图标,但是图片就那么几张,原因是为什么呢,这是因为他用一张图当背景图,通过"background-position"这个属性,详解请看我的上一篇博客:https://blog.csdn.net/qq_39429962/article/details/82833861

展开阅读全文

没有更多推荐了,返回首页