515-前端作业之仿QQ空间首页 - 课外作业

Home > List of blog posts > 515-前端作业之仿QQ空间首页

Blogger Information

Blog 71

fans 1

comment 1

visits 86942

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>J-y_劔影_Mr.zhiweiHong的QQ空间 [http://weihu.qzone.qq.com]</title>
	<meta name="keywords" content="QQ空间,黄钻,免费装扮,开心农场,QQ农场,QQ牧场" />
	<link rel="icon" href="inc/images/favicon.ico" type="image/x-icon" /><!-- 添加标题图标 -->
	<link rel="stylesheet" type="text/css" href="inc/css/style.css">
	<link rel="stylesheet" type="text/css" href="inc/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="inc/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="inc/layui/css/layui.css">
</head>
<body class="bg-body">
	<!-- 头部 -->
	<div class="header">
		<a href="" class="sign"></a>
		<div class="container">
			<div class="hefl">
				<a class="logo" href=""></a>
				<ul class="menu">
					<li><a href=""><i class="layui-icon layui-icon-username"></i>个人中心</a></li>
					<li><a href=""><i class="layui-icon layui-icon-home"></i>我的主页<span class="layui-icon layui-icon-triangle-d"></span></a></li>
					<li><a href=""><i class="layui-icon layui-icon-user"></i>好友<span class="layui-icon layui-icon-triangle-d"></span></a></li>
					<li><a href=""><i class="layui-icon layui-icon-app"></i>游戏<span class="layui-icon layui-icon-triangle-d"></span></a></li>
					<li><a href=""><i class="layui-icon layui-icon-theme"></i>装扮<span class="layui-icon layui-icon-triangle-d"></span></a></li>
			    </ul>
			</div>
			<div class="hefr">
				<div class="user-info">
					<a href="" class="user-img"><img src="inc/images/30.jpg"><span>万达娱乐客服</span></a>
					<a href=""><i class="fa fa-sign-out"></i></a>
					<a href=""><i class="fa fa-cog"></i></a>
					<a href=""><img src="inc/images/qzone-vip.gif"></i></a>
				</div>
				<div class="susobox">
					<input type="text" name="susobox" placeholder="用户/游戏/动态">
					<a href="" class="suso"><i class="fa fa-search"></i></a>
				</div>
				<div class="music">
					<a href="" class="play"><i class="fa fa-pause"></i></a>
					<a href=""><img src="inc/images/2-music-sonic.gif"></a>
				</div>
			</div>
		</div>
	</div>
	<!-- 主体 -->
	<div class="main">
		<div class="container">
			<div class="warp">
				<div class="top">
					<div class="mtfl">
						<div class="user-img">
							<a href=""><img src="inc/images/100.jpg"></a>
							<div class="lv"><h2>J-y_劔影_Mr.zhiweiHong的QQ空间</h2>
							<a href="" class="qz-vip"></a>
								<div class="lv-mu">
								<a href=""><i class="xz"></i></a>
								<a href=""><i class="rj"></i></a>
								<a href=""><i class="ss"></i></a>
								<a href=""><i class="ly"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="mtfr">
						<a href=""><i class="zan"></i>赞（99）</a>
					</div>
				</div>
				<div class="base">
					<div class="blog">
						<ul>
							<li><a href="">什么叫老婆？ 男人们看清楚咯..!!</a><span>阅读(268)</span></li>
							<li><a href="">≮劔劔≯收集電腦知識總向導－{每月更新一次}</a><span>阅读(185)</span></li>
							<li><a href="">一个网管应该学哪些知识</a><span>阅读(162)</span></li>
							<li><a href="">php编程器--sublime Text3</a><span>阅读(1)</span></li>
							<li><a href="">323-CSS元素对齐及背景设置</a><span>阅读(1)</span></li>
							<li><a href="">322-css盒子样式</a><span>阅读(3)</span></li>
							<li><a href="">321-CSS选择器</a><span>阅读(1)</span></li>
						</ul>
					</div>
					<div class="photo">
						<a href=""><img src="inc/images/bupsb.jpg" title="相册"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<div class="footer">
		<div class="container">
			<div class="link">
				<a href="" class="app">空间手机版</a><span> | </span>
				<a href=""> 黄钻贵族</a><span> | </span>
				<a href="">官方Qzone</a><span> | </span>
				<a href="">QQ互联</a><span> | </span>
				<a href="">认证服务</a><span> | </span>
				<a href="">腾讯博客</a><span> | </span>
				<a href="">腾讯客服</a><span> | </span>
				<a href="">QQ空间服务协议</a><span> | </span>
				<a href="">Complaint Guidelines</a><span> | </span>
				<a href="">粤网文[2017]6138-1456号</a>
				<p>Copyright © 2005 - 2018 Tencent.<a href="">All Rights Reserved.</a></p>
				<p>腾讯公司 <a href="">版权所有</a></p>	
			</div>
		</div>
		<!-- 回到顶部 -->
	<div class="tops"><a href="#top" mce_href="#top"><b>︿</b></a></div>
	</div>
	  
</body>
</html>

运行实例 »

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

前端作业之仿QQ空间首页CSS样式表：

实例

/*整体*/
body {margin: 0;padding: 0;}
.bg-body {background: #F8DB4F;}
/*头部*/
.header {width: 100%; height: 40px;background: #D18B00;line-height: 40px;color:#fff;position:fixed;}/*position:fixed固定导航条不滚动*/
.header .sign {margin-top:15px;margin-right: 10px;background-image: url(../images/icenter-common-adg.png);background-position: -565px 0px;float: right;width: 20px;height: 10px;}
.header a {color:#fff;text-decoration: none;font-size: 0.9em;} 
.header a:hover{text-decoration: none;color: #fff}
/*头部左侧*/
.header .hefl {width: 620px;float: left;}
.header .hefl .menu li {height: 40px;list-style-type: none;float: left;padding:0 6px;}
.header .hefl .menu li:hover {background:#E09600;}
.header .hefl li i {width: 20px;height: 16px;margin: 0 5px;font-size: 18px;}
.header .hefl li span {font-size: 10px;}
.header .hefl .logo {background-image: url(../images/icohome.png);background-position: 0px 0px;float: left;width: 90px;height: 40px;}
 /*头部右侧*/
.header .hefr .susobox,.user-info a,span{margin-left: 10px;}
.header .hefr .susobox{color: #bababa;float: right;margin-right: 10px;}
.header .hefr .susobox input{width: 135px;height: 24px;font-size: 12px;padding:5px;border:none;border-radius: 4px;background-color: rgba(255,255,255,.25);color: #ffffff;}
.header .hefr .susobox input::-webkit-input-placeholder {color: #eeeeee;}
.header .hefr .susobox .suso{position: absolute;top: 0px;margin-left: 148px;}
.header .hefr .susobox .suso i{font-size: 14px;margin-left: -30px;}
.header .hefr .user-info{float: right;}
.header .hefr .user-info img{width: 24px;height: 24px;}
.header .hefr .user-info .user-img {float: left;width: 100px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header .hefr .music {float: right;}
.header .hefr .music .play{background: #E09600;padding:3px 5px;}
.header .hefr .music img {background: #E09600;padding:5px;}

/*主体*/
.main {background-image: url(../images/0.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position: 50% 20%;width: 100%;height: 650px;}
.main {height: auto;padding-bottom: 50px;}
.main .warp {background-image: url(../images/scene_bg_0.png);background-repeat: no-repeat;width: 100%;height: 860px;background-attachment: scroll;background-position: 50% 100%;padding: 150px 0;}
/*主体上部左侧*/
.main .top .mtfl {float: left;width: 380px;height: 150px;}
.main .top .user-img {position: relative;left: 105px;}
.main .top .lv {position: relative;top:-100px; left: 125px;}
.main .top .mtfl h2 {width: 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /*隐藏过长文本*/
.main .top .mtfl .qz-vip {background-image: url(../images/qz_ye_vip.png);background-repeat: no-repeat;background-position: -288px 0;float: left;width: 80px;height: 50px;}
.main .top .mtfl .lv .lv-mu {position: relative;top:58px; left: -80px;}
.main .top .mtfl .lv .lv-mu a {background-image: url(../images/fn_profile_nav.png);background-repeat: no-repeat;width: 30px;height: 20px;padding: 8px 18px;}
.main .top .mtfl .lv .lv-mu .xz {background-image: url(../images/sprite_fn_profile.png);background-repeat: no-repeat;float: left;background-position: -174px 0px;width: 20px;height: 20px;position: absolute;top:-2px; left: 86px;}
.main .top .mtfl .lv .lv-mu .rj {background-image: url(../images/sprite_fn_profile.png);background-repeat: no-repeat;float: left;background-position: -130px 0px;width: 20px;height: 20px;position: absolute;top:-2px; left: 118px;}
.main .top .mtfl .lv .lv-mu .ss {background-image: url(../images/sprite_fn_profile.png);background-repeat: no-repeat;float: left;background-position: -152px 0px;width: 20px;height: 20px;position: absolute;top:-2px; left: 154px;}
.main .top .mtfl .lv .lv-mu .ly {background-image: url(../images/sprite_fn_profile.png);background-repeat: no-repeat;float: left;background-position: -194px 0px;width: 20px;height: 20px;position: absolute;top:-2px; left: 188px;}
/*主体上部右侧*/
.main .top .mtfr {float: right;width: 90px;height: 32px;position: absolute;top:76px; right: 326px;background-color: rgba(0,0,0,.4);border-radius: 18px;}
.main .top .mtfr a {color: #fff;font-size: 0.9em; position: absolute;top:8px; right: 3px;}
.main .top .mtfr .zan {background-image: url(../images/icenter.32.png);background-repeat: no-repeat;float: left;background-position: -630px 0px;width: 20px;height: 20px; margin-right: 5px;}
/*主体上部左侧日志*/
.main .base .blog {width: 320px;height: 200px;position: relative;top:70px; left: 150px;line-height: 28px;}
.main .base .blog ul li {list-style-type: none;}
.main .base .blog a {width: 180px;color: #CC8F14;float: left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main .base .blog span {float: right;}
/*主体上部右侧相册*/
.main .base .photo {float: right;position: relative;top:-140px; right: 144px;}
.main .base .photo img {width: 424px;height: 228px;}
/*底部*/
.footer {clear: both;}
.footer .link {text-align: center;}
.footer .link .app {color: #cc8f14;}
.footer .link a {color: #403e39;margin: 10px 3px;}
.footer .link a:hover{color: #403e39}
.footer p {margin-top: 5px;}
/*回到顶部*/
.tops {position: fixed;right: 20px; bottom: 20px;}
.tops a{text-decoration: none;float: right;background: #FAF7E6;width: 30px;height: 30px;text-align: center;}
.tops a:hover{text-decoration: none;}

运行实例 »

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

知识点：

1.PNG图片中定位小图标

{background-image: url(../images/icenter-common-adg.png);background-position: -565px 0px;float: right;width: 20px;height: 10px;｝

注意点：

background-position: -565px 0px; 背景定位，要与测量的定位值相反，即取负值

背景定位坐标最简单的办法是用画图的坐标来取值但是也不是最准的多多摸索吧

背景定位后一定要浮动和定尺寸大小不然图标会不显示

2.引入图标库来设置小图标

引入图标库以下为两种还有很多种

阿里巴巴图标库 http://www.iconfont.cn/ 比较全面不过要自己打包自己喜欢的图标适合以后项目开发弄一整套

<link rel="stylesheet" type="text/css" href="inc/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="inc/layui/css/layui.css">

使用方法

1.先到图标库的官网搜索需要相应的图标（以英文名搜索，如：主页 home 退出 exit）

http://www.fontawesome.com.cn/faicons/

http://www.layui.com/doc/element/icon.html#table

2.用class引用

<a href=""><i class="fa fa-sign-out"></i></a>

<li><a href=""><i class="layui-icon layui-icon-home"></i>我的主页<span class="layui-icon layui-icon-triangle-d"></span></a></li>

3.隐藏过长文本

h2 {width: 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /*隐藏过长文本*/

注意点：

先定个宽度然后 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三项属性值一起使用不能分开

复习知识点

1.position:fixed固定导航条不滚动

2.background-repeat: no-repeat; 背景图不重复

3.position: relative; 相对定位 position: absolute; 绝对定位再用 top bootm left right 方向来配合定位

定位在布局中相当重要但是还是不是很能熟悉的运用：什么时候用绝对什么时候用相对老是在用了之后出错再用另一种定位还有margin和padding 也是老是用错

还是要多练习虽然网上什么网站的模版都有但只能借鉴学习不能依赖别人写的代码

Correction status：Uncorrected

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

Sublime Text 3 快捷键

2018-06-06 08:14:35