admin管理员组文章数量:1656246
先上效果图:
主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,
比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考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 >
<div >
<div >
<img src="icon/qqZone.png" />
QQ空间
</div>
<div >
<img src="icon/personal.png" />
个人中心
</div>
<div >
<img src="icon/home.png" />
我的主页
<img src="icon/sanJiao.png" />
</div>
<div >
<img src="icon/friend.png" />
好友
<img src="icon/sanJiao.png" />
</div>
<div >
<img src="icon/game.png" />
游戏
<img src="icon/sanJiao.png" />
</div>
<div >
<img src="icon/dress.png" />
装扮
<img src="icon/sanJiao.png" />
</div>
<img src="icon/yellow.png" />
<img src="icon/setting.png" />
<img src="icon/out.png" />
<div > 九。</div>
<img src="icon/icon.png" />
<input type="text" placeholder="用户/游戏/动态"/>
<img src="icon/find.png" />
<img src="icon/music.png" />
</div>
<img src="icon/signal.png" />
</div>
<div &
版权声明:本文标题:前端----HTML 制作QQ空间练习 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729733356a1211573.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论