admin管理员组

文章数量:1656243

先上效果图:

主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,

比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考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 >&nbsp九。</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 &

本文标签： 空间htmlqq

版权声明：本文标题：前端----HTML 制作QQ空间练习 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729733356a1211573.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。