前端作业之仿QQ空间首页效果图：
参考QQ空间：http://weihu86.qzone.com
前端作业之仿QQ空间首页首页代码：
实例
<!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 也是老是用错
还是要多练习 虽然网上什么网站的模版都有 但只能借鉴学习 不能依赖别人写的代码
