叶雨梧桐BLOG

Div+Css实例---仿QQ首页

发布时间:2013年10月24日 / 分类:前端笔记 / 吐槽

实例目的:熟练掌握Div+Css的部分用法,灵活使用span和div,以及整个网页的框架布局。

实例要求:仿照QQ首页,将部分内容呈现出来。

1.html代码:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>仿QQ页面</title>
<meta name="description" content="仿QQ页面实例" />
<meta name="generator" content="Editplus" />
<meta name="author" content="yywt" />
<meta name="time" content="20131024" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="qq.css" />
</head>
<body>
<!--top-->
<div class="top" >
<span class="lefthref">
<a href="http://wap.qq.com" target="_blank" id="href_style"><span id="font_style" >手机新闻客户端</span></a>
<a href="http://wap.qq.com" target="_blank" id="href_style"><span id="font_style" >WAP版</span></a>
<a href="http://index.qq.com" target="_blank" id="href_style"><span id="font_style" >设为首页</span></a>
<a href="http://map.qq.com" target="_blank" id="href_style"><span id="font_style" >网站地图</span></a>
</span>
<span class="login"><span id="font_style" >您好,叶雨梧桐[<a href="#" id="href_style">退出</a>]</span><img src="lefthref.jpg"></img></span>
</div>
<!--head-->
<div class="head">
<span class="logo" ><img src="qqlogo.jpg"></img></span>
<span class="search"><img src="search.jpg"></img></span>
</div>
<!--mid-->
<div class="mid">
<div class="nav">
<center>
	<div class="nav_float">  
		<span><a href="http://#" class="nav_font">新闻</a></span>
		<span><a href="http://#" class="nav_font">图片</a></span>
		<span><a href="http://#" class="nav_font">军事</a></span>
		<span><a href="http://#" class="nav_font">天气</a>&nbsp&nbsp&nbsp&nbsp|</span><br>
		<span><a href="http://#" class="nav_font">财经</a></span>
		<span><a href="http://#" class="nav_font">股票</a></span>
		<span><a href="http://#" class="nav_font">港股</a></span>
		<span><a href="http://#" class="nav_font">基金</a>&nbsp&nbsp&nbsp&nbsp|</span>
	</div>
	<div class="nav_float">  
		<span><a href="http://#" class="nav_font">视频</a></span>
		<span><a href="http://#" class="nav_font">热剧</a></span>
		<span><a href="http://#" class="nav_font">综艺</a></span>
		<span><a href="http://#" class="nav_font">拍客</a>&nbsp&nbsp&nbsp&nbsp|</span><br>
		<span><a href="http://#" class="nav_font">体育</a></span>
		<span><a href="http://#" class="nav_font">NBA</a></span>
		<span><a href="http://#" class="nav_font">中超</a></span>
		<span><a href="http://#" class="nav_font">彩票</a>&nbsp&nbsp&nbsp&nbsp|</span>
	</div>
	<div class="nav_float">  
		<span><a href="http://#" class="nav_font">娱乐</a></span>
		<span><a href="http://#" class="nav_font">明星</a></span>
		<span><a href="http://#" class="nav_font">电影</a></span>
		<span><a href="http://#" class="nav_font">音乐</a>&nbsp&nbsp&nbsp&nbsp|</span><br>
		<span><a href="http://#" class="nav_font">时尚</a></span>
		<span><a href="http://#" class="nav_font">美容</a></span>
		<span><a href="http://#" class="nav_font">健康</a></span>
		<span><a href="http://#" class="nav_font">育儿</a>&nbsp&nbsp&nbsp&nbsp|</span>
	</div>
	<div class="nav_float">  
		<span><a href="http://#" class="nav_font">汽车</a></span>
		<span><a href="http://#" class="nav_font">旅游</a></span>
		<span><a href="http://#" class="nav_font">房产</a></span>
		<span><a href="http://#" class="nav_font">家具</a>&nbsp&nbsp&nbsp&nbsp|</span><br>
		<span><a href="http://#" class="nav_font">科技</a></span>
		<span><a href="http://#" class="nav_font">数码</a></span>
		<span><a href="http://#" class="nav_font">手机</a></span>
		<span><a href="http://#" class="nav_font">家电</a>&nbsp&nbsp&nbsp&nbsp|</span>
	</div>
	<div class="nav_float">  
		<span><a href="http://#" class="nav_font">文化</a></span>
		<span><a href="http://#" class="nav_font">教育</a></span>
		<span><a href="http://#" class="nav_font">出国</a></span>
		<span><a href="http://#" class="nav_font">儿童</a>&nbsp&nbsp&nbsp&nbsp</span><br>
		<span><a href="http://#" class="nav_font">游戏</a></span>
		<span><a href="http://#" class="nav_font">动漫</a></span>
		<span><a href="http://#" class="nav_font">星座</a></span>
		<span><a href="http://#" class="nav_font">更多&nbsp>></a>&nbsp&nbsp</span>
	</div>
	</center>
</div>
<span class="ad1" ><img src="ad1.jpg"></img></span>&nbsp&nbsp&nbsp
<span class="ad2"><img src="ad2.jpg"></img></span>
<!--内容-->
<div class="newslist">
	<div class="imnews">
		<div id="topic_font"><a href="http://#" id="topic_href">要闻</a></div><hr>
			<ul type="disc" id="pagefont_style">
				<li><a href="http://#" id="topic_href_font_1">最高法:国家工作人员性侵幼女加重处罚</a></li>
				<li><a href="http://#" id="topic_href_font_2">性侵不满12周岁者均认定为明知</a></li>
				<li><a href="http://#" id="topic_href_font_2">习近平:三中全会将对深化改革做总体部署</a></li>
				<li><a href="http://#" id="topic_href_font_2">王岐山部署第二轮巡视</a></li>
				<li><a href="http://#" id="topic_href_font_2">温家宝以老朋友身份宴请印度总理</a></li>
				<li><a href="http://#" id="topic_href_font_2">国考报名通过人数超过130万 </a></li>
				<li><a href="http://#" id="topic_href_font_1">安徽毒奶粉致“大头娃娃”十年后手伸不直</a></li>
				<li><a href="http://#" id="topic_href_font_2">北京地铁10号线调整运行方式</a></li>
				<li><a href="http://#" id="topic_href_font_2">山西黑煤矿几乎掏空悬空寺山体</a></li>
				<li><a href="http://#" id="topic_href_font_2">湖南贫困村举债千万建豪华大楼</a></li>
				<li><a href="http://#" id="topic_href_font_2">中联重科A股H股下挫</a></li>
				<li><a href="http://#" id="topic_href_font_2">尸检报告排除阿拉法特死于放射性中毒</a></li>
				<li><a href="http://#" id="topic_href_font_1">湖南古墓发掘出两千年前青铜剑</a></li>
				<li><a href="http://#" id="topic_href_font_2">原国家散打队长遭世界泰拳王暴打</a></li>
				<li><a href="http://#" id="topic_href_font_2">窃贼迷晕寺庙主持盗走800斤重佛像</a></li>
			</ul>
	</div>
	<div class="todytalk">
		<div id="topic_font"><a href="http://#" id="topic_href">今日话题</a></div><hr>
			<div><center><a href="http://#" id="topic_href_font_1">河北应告别“拿钱换命”的发展模式 </a></center></div>
			<div id="pagefont_style">
				<span><a href="http://#" id="topic_href_font_2">往期</a>&nbsp|</span>
				<span><a href="http://#" id="topic_href_font_2">对内地学生车祸点赞部分港人怎么了</a></span>
				<span><a href="http://#" id="topic_href_font_2">评论</a>&nbsp|</span>
				<span><a href="http://#" id="topic_href_font_2">“神 医”重出江湖为何还有人相信?</a></span>
				<span><a href="http://#" id="topic_href_font_2">历史</a>&nbsp|</span>
				<span><a href="http://#" id="topic_href_font_2">为何总有人乐于数落孙中山的对与错</a></span>
				<span><a href="http://#" id="topic_href_font_2">财经观察</a>&nbsp|</span>
				<span><a href="http://#" id="topic_href_font_2">国家记忆2013 历史记录者评选</a></span>
			</div>
	</div>
<div class="showvideo">
<img src="showvideo.jpg" />
</div>
</div>
<div class="everylike">
<img src="righthref.jpg"/>
<img src="ad3.jpg" />
<img src="everylike.jpg"/>
</div>
</div>
</body>
</html>

2.css代码

/*
name:div+css实例练习---仿QQ页面
author:yywt
time:20131024
*/
body{
	margin: 0 auto;
	border: 2px  ;
	height:800px;
}
/*others-style for top*/
#font_style{
	font-size:12px;
	margin-left:6px;
}
#href_style{
	text-decoration:none;
	color:black;
	}
/*top-style*/

.top{
	height:30px;
	border:2px white ;
	background-color:#FAFAFA;
}
.lefthref{
	width:340px;
	height:30px;
	margin-left:170px;
	margin-top:2px;
	
}
.login{
	width:292px;
	height:30px;
	margin-left:450px;
	margin-top:1px;
	
}
/*head-style*/
.head{
	height:52px;
	margin-top:10px;
}
.logo{
      width:163px;
	  height:52px;
	  border:2px;
	  margin-left:337px;
}
.search{
	width:486px;
	height:35px;
	border:2px;
	
}
/*mid-style*/
.mid{
	width:1000px;
	height:682px;
    margin-top:25px;
	border: 2px ;
	margin-left: auto;/*配合doctype div居中显示*/
	margin-right: auto;/*配合doctype div居中显示*/
}
.nav{
	width:1000px;
	height:60px;
	background-color:#3086C4;
	margin-bottom:7px;
	border: 2px window;

}
.nav_font{
	font-size:12px;
	color:white;
	line-height:25px;
	padding-left:17px;
	text-decoration:none;

}
.nav_float{
	float:left;
}
.ad1{
	width:663px;
	height:78px;
}
.ad2{
	width:321px;
	height:78px;
}
/*topic*/
.newslist{
	width:660px;
	height:530px;
	border:2px  ;
	float:left;
}
.imnews{
	width:330px;
	height:530px;
	border:2px  ;
	float:left;
}
.todytalk{
	width:320px;
	height:215px;
	border:2px ;
	float:right;
}
.everylike{
	width:318px;
	height:530px;
	border:2px  ;
	float:right;
}
.showvideo{
	width:320px;
	height:311px;
	border:2px ;
	float:right;
}
/*others-style for 内容*/
#pagefont_style{
	margin:5px;
	font-size:16px;
	padding:4px;
	line-height:30px;
}
#topic_font{
	font-size:20px;
	color:#3B639F;
	font-weight:bold;
	margin-top:5px;
	margin-left:7px;
	background-color:#F8FAFC;	
}
#topic_href{
	text-decoration:none;
}
#topic_href_font_1{
	font-size:16px;
	color:#3B639F;
	font-weight:bold;
	margin-top:5px;
	margin-left:7px;
	background-color:#F8FAFC;	
	text-decoration:none;
}
#topic_href_font_2{
	font-size:16px;
	color:black;
	text-decoration:none;

}

 

3.效果图:

fqq.jpg

 

 

4.总结:

这次的练习实例没想到那么麻烦,利用课余时间,昨天写完了基本框架,今天把内容填充上的。自我感觉最重要的是在框架布局分析上边,要注意分配合理。再就是使用span和div时,要注意使用哪个较为合理点。还有就是这个练习没能使用上定位的知识,后边再有练习时注意,尽量在合理使用代码的同时,将所学知识利用上。便于掌握。

标签:php

版权声明:除特殊注明外,均由叶雨梧桐原创,转载请保留文章出处;
本文链接:http://blog.gt520.com/qdbj/84.html
订阅叶雨梧桐BLOG RSS
分类
最新文章
最近回复
  • 今日头条: 文章不错非常喜欢
  • 码客: 定时任务我直接用cron
  • 鸟叔: 此时此刻鸟叔想吟诗一首:梧桐夜雨涨秋迟……
  • 夏目贵志: 三年了后偶遇这博客了!
  • 钟水洲博客: 拜个早年
  • 鸟叔の窝: 最近一直在关注贵博客,加个友情链接可否?
  • 荆棘鸟: 请教博主 评论自动发邮件怎么弄 我的域名邮箱老是配置不成功咋回事?
  • thornbird: 为何这样麻烦 直接安装LNMP即可
  • 态度xiaomi: 支持下
  • 梦青年: 我的网站下线了,你可以把我的友链去掉了,感谢多年的支持和关注~ 梦青年。
归档