QQ空间首页模仿制作——HTML布局练习

最新推荐文章于 2024-05-09 16:09:08 发布

对明天的期待丶

最新推荐文章于 2024-05-09 16:09:08 发布

阅读量1.6w

点赞数 27

文章标签： html

本文链接：https://blog.csdn.net/qq_39429962/article/details/82872330

版权

为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：效果：QQZone.html: <!DOCTYPE html><html> <head> <title>我的QQ空间</title> <link type="text/css" rel="

摘要由CSDN通过智能技术生成

为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：

效果：

QQZone.html:

<!DOCTYPE html>
<html>
	<head>
		<title>我的QQ空间</title>
		<link type="text/css" rel="stylesheet" href="QQZone.css"/>
	</head>
	<body>
		<div class="div_top">
			<div class="top_menu">
				<div class="top_1"></div>
				<div class="top_2" style="margin-left:10px;">
					<i style=" background-position: -452px -52px;"></i>
					<span>个人中心</span>
				</div>
				<div class="top_2" style="width:101px;">
					<i style=" background-position: -452px -104px;"></i>
					<span>我的主页</span>
				</div>
				<div class="top_2" style="width:77px;">
					<i  style=" background-position: -452px -78px;"></i>
					<span>好友</span>
				</div>
				<div class="top_2" style="width:77px;">
					<i  style=" background-position: -452px -130px;"></i>
					<span>游戏</span>
				</div>
				<div class="top_2"   style="width:77px;">
					<i  style=" background-position: -452px -156px;"></i>
					<span>装扮</span>
				</div>
				
				<div class="music">
					<div class="music_left">
						<i style=" background-position: -452px -208px;margin:2px;"></i>
					</div>
					<div class="music_right">
						<i></i>
					</div>
				</div>
				
				<div class="div_input">
					<input type="text" placeholder="  用户/游戏/动态"/>
					<i></i>
				</div>
				
				<div class="img_info">
					<div class="imglogo">
						<img style="width:24px;height:24px;border-radius: 2px;" src="images/30.jpg" alt="您的头像">
					</div>
					<div class="userinfo">
						<span style="margin-left:0;">还有童心的成年人</span>
					</div>
				</div>	
				
				<div class="shareImg">
					<i style=" background-position: -452px -286px;margin-top:13px;margin-left:10px;"></i>
				</div>
				
				<div class="shareImg">
					<i style=" background-position: -452px -312px;margin-top:13px;margin-left:14px;"></i>
				</div>
				
				<div class="diamonds"></div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom_info">
				<div class="user_bottom">
					<div class="name">
						<span>无奈丶看花落  悲</span>
					</div>
				</div>
				
				<div class="fabulous">
					<i style=" background-position: -451px 0;"></i>
					<span class="num">1</span>
				</div>
				
				<div class="userImg">
					<img style="width:120px;height:120px;border-radius: 2px;m

最低0.47元/天解锁文章

对明天的期待丶

关注

27
点赞
踩
145

收藏

觉得还不错? 一键收藏
11
评论
QQ空间首页模仿制作——HTML布局练习

为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：效果：QQZone.html: &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;我的QQ空间&lt;/title&gt; &lt;link type="text/css" rel=&quot
复制链接

扫一扫