前端----HTML 制作QQ空间练习

最新推荐文章于 2024-04-16 09:23:51 发布

NO0b

最新推荐文章于 2024-04-16 09:23:51 发布

阅读量4.8k

点赞数 11

分类专栏：前端文章标签： HTML QQ空间练习

本文链接：https://blog.csdn.net/q5706503/article/details/82831493

版权

先上效果图:

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

比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了

就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点击效果其实也很简单,设置锚点和a连接就行,这次的重点不在这里也就没有实现

都是很基础的东西,只不过比较繁琐,细心和耐心就够了,其中碰到一些没见过的小功能我也写了博客记录,比如

怎么修改placeholder的字体颜色,,

怎么设置元素单边框

块元素快速居中的方法(比如顶部条内容保持居中)

相对定位绝对定位问题(position元素用法)

等等吧,都在我的博客里记录了下来https://blog.csdn.net/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">&nbsp九。</div>
			<img src="

最低0.47元/天解锁文章

NO0b

关注

11
点赞
踩
77

收藏

觉得还不错? 一键收藏
11
评论
前端----HTML 制作QQ空间练习

先上效果图:主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点...
复制链接

扫一扫