HTML 制作QQ空间练习

先上效果图:

主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,

比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了

就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点击效果其实也很简单,设置锚点和a连接就行,这次的重点不在这里也就没有实现

都是很基础的东西,只不过比较繁琐,细心和耐心就够了,其中碰到一些没见过的小功能我也写了博客记录,比如

怎么修改placeholder的字体颜色,,

怎么设置元素单边框

块元素快速居中的方法(比如顶部条内容保持居中)

相对定位绝对定位问题(position元素用法)

等等吧,都在我的博客里记录了下来https://blog.csdn.net/q5706503

这次练习收获还是很多的, 能感觉到做网页整体流畅了很多,

欢迎大家互相学习,共同进步

最后附上源代码,HTML和CSS是分开的,注意一下哦(图片资源没有上传,有些不方便,有想要的再联系我吧):

CSS写的有些啰嗦,HTML层次过多,这些需要大量练习才能解决,欢迎指正!

<!DOCTYPE html>
<html>
<head>
	<title>QQ空间制作练习</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="qqzone.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="container_head">
		<div id="div_head">
			<div id="div_head_qqZone">
				<img src="icon/qqZone.png" class="head_menu"/>
				QQ空间
			</div>
			<div class="head_menu">
				<img src="icon/personal.png" class="head_menu"/>
				个人中心
			</div>
			<div class="head_menu">
				<img src="icon/home.png" class="head_menu"/>
				我的主页
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/friend.png" class="head_menu"/>
				好友
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/game.png" class="head_menu"/>
				游戏
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/dress.png" class="head_menu"/>
				装扮
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>

			<img src="icon/yellow.png" class="head_menu menu_right"/>
			<img src="icon/setting.png" class="head_menu menu_right"/>
			<img src="icon/out.png" class="head_menu menu_right"/>
			<div class="head_menu menu_right">&nbsp九。</div>
			<img src="icon/icon.png" class="head_menu menu_right"/>
			<input type="text" class="menu_right" id="input_search" placeholder="用户/游戏/动态"/>
			<img src="icon/find.png" id="img_search"/>
			<img src="icon/music.png" class="head_menu menu_right"/>
		</div>
		<img src="icon/signal.png" id="img_signal"/>
	</div>
	<div id="div_body">
		<div id="div_body_top">
			<span id="span_nine">九。</span>
			<img src="icon/apple.png" id="img_apple"/>
			<img src="icon/zan.png" id="img_zan"/>
			<div id="div_empty"></div>
			<span id="span_nine1">九。</span>
			<img src="icon/kaitong.png" id="img_kaitong"/>
			<img src="icon/watch.png" id="img_watch"/>
		</div>
		<div id="div_body_menu">
			<img src="icon/bigicon.png" id="img_bigicon"/>
			<ul>
				<li class="li_menu">主页</li>
				<li class="li_menu">日志</li>
				<li class="li_menu">音乐盒</li>
				<li class="li_menu">留言板</li>
				<li class="li_menu">相册</li>
				<li class="li_menu">个人档</li>
				<li class="li_menu">更多</li>
			</ul>
		</div>
		<div id="div_body_left">
			<div id="div_leftmenu">
				<ul>
					<li class="li_leftmenu li_deepcolor"><b>好友动态</b></li>
					<li class="li_leftmenu">特别关心</li>
					<li class="li_leftmenu">与我相关</li>
					<li class="li_leftmenu">空间达人</li>
					<li class="li_leftmenu">那年今日</li>
					<li class="li_leftmenu">腾讯课堂</li>
					<li class="li_leftmenu">游戏应用</li>
				</ul>
				
			</div>
		</div>
		<div id="div_body_mid">
			<input type="text" id="input_write" placeholder="说点什么吧"></input>
			<img src="icon/photo.png" id="img_photo"></img>
			<span id="span_dongtai">
				<b>全部动态</b>
			</span>
			<div class="div_dongtai">
				<div class="div_shuoshuo">
					<img src="icon/icon_1.png" id="img_icon1"></img>
					<span id="span_name">孟冉，学委<br></span>
					<span id="span_time">15:39</span>
					<img src="icon/shuoshuo_next.png" id="img_shuoshuo_next"></img>
					<p id="p_shuoshuo">我现在才知道什么是爬山 真的是用手爬啊<br>
陡峭的台阶比脚还窄 还好多路还没台阶 吓死银了 没想到我还能爬到北天门主峰<br>最高峰！！！哈哈哈/悠闲/悠闲/悠闲
					</p>
					<img src="icon/photoes.png" id="img_photoes">
					<div id="div_dianzan">
						浏览177次
						<img src="icon/dianzan.png" id="img_dianzan">
					</div>
					<div id="div_names">
						<img src="icon/hand.png" id="img_hand">
						孟冉，学委、郭敬宇、王深山、刘雯1组、16软2依布、张笑影团支书、瞅你咋滴、- Puppet 、你是我的关键词、陈伟、失忆的金鱼、时光留白、素笔、河大 驰安驾校、、Meng、143、fine、梦婷妈妈等34人觉得很赞
					</div>
					<div class="div_debate">
						<img src="icon/icon1.png" class="img_icon1">
						<span class="span_debate_name">刘雯1组</span>
						<span class="span_debate_time">15:45</span>
						<span class="span_debate">:&nbsp老大-征服陡山的女人</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">15:46</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">刘雯1组</span>
							 : 真是一览众山小的赶脚
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon2.png" class="img_icon1">
						<span class="span_debate_name">16软2依布 </span>
						<span class="span_debate_time">16:21</span>
						<span class="span_debate">:&nbsp啥软件，把自己照这么白，我也要用</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">16:41</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">16软2依布</span>
							 : 我手机照相就这样 没开软件
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon2.png" class="img_icon1">
						<span class="span_debate_name">16软2依布</span>
						<span class="span_debate_time">16:42</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">孟冉，学委</span>
							 : /汗/汗/汗/汗
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon3.png" class="img_icon1">
						<span class="span_debate_name">肥肉炒藕</span>
						<span class="span_debate_time">17:35</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">16软2依布</span>
							 : 那是太阳光晃得
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">18:01</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">肥肉炒藕</span>
							 : /枪/枪/枪/枪
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon4.png" class="img_icon1">
						<span class="span_debate_name">孟 </span>
						<span class="span_debate_time">16:36</span>
						<span class="span_debate">:&nbsp这是去哪了</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">16:42</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">孟</span>
							 : 去爬山 还有太行水镇
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon5.png" class="img_icon1">
						<span class="span_debate_name">你是我的关键词 </span>
						<span class="span_debate_time">17:03</span>
						<span class="span_debate">:&nbsp好玩吗</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">17:15</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">你是我的关键词</span>
							 : 海星
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon6.png" class="img_icon1">
						<span class="span_debate_name">郭敬宇 </span>
						<span class="span_debate_time">17:13</span>
						<span class="span_debate">:&nbsp厉害了我的老大</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">17:15</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">郭敬宇</span>
							 : 嘿嘿嘿
						</span>
					</div>
				</div>
			</div>
		</div>
		<div id="div_body_right">
			<div id="div_check">
				<div id="div_check1">
					09.23<br><b>签到</b>
				</div>
				&nbsp&nbsp本月签到次数<br><b>&nbsp&nbsp0次</b>
			</div>
			<img src="icon/ad.png" id="img_ad"></img>
			<img src="icon/ad2.png" id="img_ad2"></img>
			<div id="div_visit">
				谁看过我
				<span class="span_debate_name">|我看过谁|被挡访客</span>
				<img src="icon/visit.png" id="img_visit"></img>
				<div class="div_visitnum">
					今日浏览<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 2
				</div>
				<div class="div_visitnum">
					总浏览<br>&nbsp2298
				</div>	
				<div class="div_visitnum">
					被挡访客<br>&nbsp&nbsp&nbsp&nbsp514
				</div>
			</div>
			<div id="div_gift">
				<b>礼物</b>
				<img src="icon/gift.png" id="img_gift"></img>
			</div>
			<div id="div_care">
				谁在意我
				<span class="span_debate_name">|我在意谁</span>
				<img src="icon/care.png" id="img_care"></img>
			</div>
		</div>
	</div>
	<div id="div_tail">
		<p>
			空间手机版|黄钻贵族|官方Qzone|QQ互联|腾讯课堂|
			腾讯文档|腾讯客服|QQ空间服务协议|
			Complaint&nbspGuidelines|粤文网[2017]6138-1456号
		</p>
		<p>Copyright&nbsp©&nbsp2005&nbsp-&nbsp2018
		&nbspTencent.All&nbspRights&nbspReserved.
		</p>
		<p>腾讯公司 版权所有</p>
	</div>
	<div id="div_float">
		<img src="icon/float.png" id="img_float"></img>
	</div>
</body>
<html>

body{
	background-color:rgba(0, 0, 0, 0);
	color:rgb(64, 62, 59);
	margin:0;
	font-size: 12px;
	font-family: Tahoma;
}
img{
	vertical-align:top;
}
ul{
	margin:0;
	padding:0;
}
#container_head{
	color: #fff;;
	width:100%;
	background-color:#a6926c;
	height: 41px;
}
#div_head{
	height:41px;
	width:1038px;
	margin:0 auto;
	position:relative;
}
#div_head_qqZone{
	overflow: hidden;
	float:left;
	height:41px;
	font-size:18px;
	line-height:41px;
	font-family:punctuation;
}
img.head_menu{
	height:41px;
}
div.head_menu{
	font-size: 12px;
	line-height:40px;
	float:left;
}
.menu_right{
	float:right !important;
}
#input_search{
	padding-left:5px;
	padding-right:25px;
	background-color:rgba(255,255,255,.25);
	height:19px;
	width:105px;
	border:0;
	margin-top:10px;
	margin-left:8px;
	margin-right:5px;
}
input::-webkit-input-placeholder{
	color:#eeeeee;
	font-size:12px;
}
#img_search{
	position:absolute;
	height:20px;
	top:10px;
	right:165px;
}
#img_signal{
	height:41px;
	position:absolute;
	right:10px;
	top:0;
}
#div_body{
	height: 2000px;
	width:100%;
	position:relative;
	margin:0 auto;
	width:1046px;
}
#div_body_top{
	height:190px;
	width:1038px;
	margin:0 auto;
	color:#8c8262;
}
#span_nine{
	font-size:20px;
	line-height:86px;
	margin-right:10px;
}
#img_apple{
	width:60px;
}
#img_zan{
	width:80px;
	float:right;
}
#div_empty{
	width:125px;
	height:105px;
	clear:both;
	float:left;
	margin-right:15px;
}
#span_nine1{
	float:left;
	display:block;
	font-size:20px;
	line-height:40px;
	margin-top:53px;
}
#img_kaitong{
	float:left;
	width:123px;
	margin-top:52px;
}
#img_watch{
	float:right;
	width:240px;
	margin-top:30px;
}
#div_body_menu{
	height:50px;
	width:1046px;
	margin:0 auto;
	position:relative;
	margin-bottom:20px;
}
#img_bigicon{
	float:left;
	position:absolute;
	left:0;
	width:128px;
	bottom:20px;
}
.li_menu{
	list-style: none;
	float:left;
	color:black;
	line-height:50px;
	font-size:14px;
	text-align: center;
	width:65px;
}
#div_body_left{
	float:left;
	width:170px;
	height:1017px;
	margin-left:4px;
	margin-right:23px;
}

#div_body_mid{
	width:590px;
	height:1700px;
	float:left;
	position:relative;
}
#div_body_right{
	width:230px;
	height:1300px;
	float:right;
	margin-right:4px;
}
#div_leftmenu{
	width:168px;
	height:278px;
	background-color:#f8f6f2;
	border:1px;
	maegin-bottom:12px;
	border-color: rgb(212, 206, 190);
	border-style: solid;
	background-image: url(icon/back_leftmenu.png);
	background-size:168px;
	background-repeat:no-repeat;
}

.li_leftmenu{
	list-style:none;
	height:36px;
	width:126px;
	padding-left:43px;
	line-height:35px;
}
.li_deepcolor{
	background-color:#e6e1d3;
	margin-top:3px;
	background-image: url(icon/back_friend.png);
	background-size:168px;
	background-repeat:no-repeat;
}
#input_write{
	width:588px;
	height:65px;
	border:1px;
	border-color:rgb(212, 206, 190);
	border-style:solid;
	margin-bottom:15px;
}
#img_photo{
	height:67px;
	position:absolute;
	top:1px;
	right:1px;
}
#span_dongtai{
	background-image:url(icon/back_dongtai.png);
	width:575px;
	height:44px;
	display:block;
	line-height:40px;
	font-size:13px;
	padding-left:17px;
	background-size:570px;
	border-bottom:1px solid rgb(212, 206, 190);
}
#img_icon1{
	width:57px;
	margin-left:16px;
}
.div_shuoshuo{
	position:relative;
	width:592px;
	height:1410px;
	background-color:#f8f6f2;
}
#img_shuoshuo_next{
	position:absolute;
	top:0;
	right:0;
	width:50px;
}
#span_name{
	font-size:15px;
	line-height:55px;
}
#span_time{
	position:absolute;
	left:78px;
	top:42px;
	color:#99958d;
	font-size:13px;
}
#p_shuoshuo{
	margin-left:14px;
	font-size:15px;
	margin-top:0;
}
#img_photoes{
	margin-left:14px;
	width:563px;
	height:563px;
}
#div_dianzan{
	padding-left:14px;
	padding-right:14px;
	font-size:13px;
	line-height:40px;	
	color:#99958d;
	border-bottom:1px solid rgb(212, 206, 190);
}
#img_dianzan{
	float:right;
	height:40px;
}
#div_names{
	padding-left:14px;
	padding-right:14px;
	color:#8c8262;
	font-size:13px;
}
#img_hand{
	height:20px;
}
.img_icon1{
	height:35px;
	margin-right:10px;
	margin-top:10px;
}
.div_debate{
	padding-left:14px;
	padding-right:14px;
	position:relative;
}
.span_debate_name{
	color:#8c8262;
	font-size:13px;
	line-height:30px;
}
.span_debate_time{
	position:absolute;
	left:51px;
	top:23px;
	color:#99958d;
	font-size:13px;
}
.div_redebate{
	padding-left:14px;
	padding-right:14px;
	margin-left:40px;
	position:relative;
}
#div_check{
	width:228px;
	height:68px;
	border:1px solid rgb(212, 206, 190);
	margin-bottm:12px;
	color:#8c8262;
	line-height:30px;
	background-color:#f8f6f2;
}
#div_check1{
	width:66px;
	height:68px;
	padding-left:6px;
	padding-right:6px;
	background-color:#d4cebe;
	float:left;
}
#div_check b{
	font-size:18px;
}
#img_ad{
	height:120px;
	width:220px;
	padding:4px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:10px;
}
#img_ad2{
	height:150px;
	width:220px;
	padding:4px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:10px;
}
#div_visit{
	height:441px;
	width:219px;
	padding-left:9px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:12px;
	line-height:50px;
	background-color:#f8f6f2;
	
}
#img_visit{
	width:210px;
	border-bottom:1px solid rgb(212, 206, 190);
}
.div_visitnum{
	line-height:30px;
	float:left;
	width:73px;
}
#div_gift{
	height:256px;
	width:219px;
	padding-left:9px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:12px;
	line-height:50px;
	background-color:#f8f6f2;
}
#img_gift{
	width:200px;
}
#div_care{
	height:230px;
	width:219px;
	padding-left:9px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:12px;
	line-height:50px;
	background-color:#f8f6f2;
}
#img_care{
	width:200px;
}
#div_tail{
	height: 75px;
	position:relative;
	width:100%;
	padding-top: 25px;
	text-align: center;
	font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
	font-size: 12px;
	color: #403e3b;
}
#div_tail>p{
	margin:0;
	line-height: 1.8em;
}
#div_float{
	position: fixed;
	right: 20px;
	bottom: 20px;
	font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
	line-height: 1.334;
	font-size: 12px;
	width:47px;
	height:93px;
	border:1px solid rgb(212, 206, 190);
	margin-bottom:12px;
	line-height:50px;
	background-color:#f8f6f2;
}
#img_float{
	margin-left:1px;
	margin-top:1px;
	width:45px;
}

HTML 制作QQ空间练习

猜你喜欢