先上效果图:
主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,
比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了
就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点击效果其实也很简单,设置锚点和a连接就行,这次的重点不在这里也就没有实现
都是很基础的东西,只不过比较繁琐,细心和耐心就够了,其中碰到一些没见过的小功能我也写了博客记录,比如
怎么修改placeholder的字体颜色,,
怎么设置元素单边框
块元素快速居中的方法(比如顶部条内容保持居中)
相对定位绝对定位问题(position元素用法)
等等吧,都在我的博客里记录了下来https://blog.csdn/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"> 九。</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">: 老大-征服陡山的女人</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">: 回复
<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">: 啥软件,把自己照这么白,我也要用</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">: 回复
<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">: 回复
<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">: 回复
<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">: 回复
<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">: 这是去哪了</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">: 回复
<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">: 好玩吗</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">: 回复
<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">: 厉害了我的老大</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">: 回复
<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>
  本月签到次数<br><b>  0次</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>       2
</div>
<div class="div_visitnum">
总浏览<br> 2298
</div>
<div class="div_visitnum">
被挡访客<br>    514
</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 Guidelines|粤文网[2017]6138-1456号
</p>
<p>Copyright © 2005 - 2018
 Tencent.All Rights Reserved.
</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;
}
关于图片啥的里边找吧
链接: https://pan.baidu/s/1bvovdPEARXgxwuhpJLxiEQ
密码: bd7n
更多推荐
前端----HTML 制作QQ空间练习
发布评论