穿越时空的邂逅:为她打造独一无二的QQ空间相册(附带源代码)
最编程
2024-08-07 19:56:19
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jquery库-->
<script src="js/jquery-1.10.2.min.js"></script>
<!--引入外部的js-->
<script src="js/QQ空间.js"></script>
<!--从外部引入css样式-->
<link href="css/QQ空间.css" rel="stylesheet" type="text/css">
<style>
a{
position: absolute;
}
</style>
</head>
<body>
<!--整个网页-->
<div>
<!--头部导航栏-->
<div class="header">
<img src="image/qq_logo.png" class="logo">
<!--列表-->
<ul>
<li>QQ空间</li>
<li>个人中心</li>
<li>我的主页</li>
<li>好友</li>
<li>游戏</li>
<li>装扮</li>
</ul>
</div>
<!--背景图片个人信息导航栏-->
<div class="bg-content">
<div class="bg"></div>
<!--会变形-->
<!--<img src="image/bj1.png">-->
<div class="info">
<img src="image/log.jpg" class="logo">
<!--列表-->
<ul>
<li>主页</li>
<li>日志</li>
<li>相册</li>
<li>留言板</li>
<li>说说</li>
<li>个人档</li>
<li>音乐</li>
<li>更多</li>
</ul>
</div>
</div>
<!--相册内容-->
<div class="qqContent">
<div class="title">相册</div>
<!--<div></div>-->
<ul class="image_list">
<!--<div></div>-->
<li>
<img src="image/1.jpg" class="imgs">
<div class="date">2021/1/8</div>
</li><li>
<img src="image/2.jpg" class="imgs">
<div class="date">2021/1/9</div>
</li>
<li>
<img src="image/3.jpg" class="imgs">
<div class="date">2021/1/10</div>
</li>
<li>
<img src="image/4.jpg" class="imgs">
<div class="date">2021/1/11</div>
</li>
<li>
<img src="image/5.jpg" class="imgs">
<div class="date">2021/1/11</div>
</li> <li>
<img src="image/6.jpg" class="imgs">
<div class="date">2021/1/11</div>
</li>
<li>
<img src="image/7.jpg" class="imgs">
<div class="date">2021/1/11</div>
</li>
</ul>
</div>
</div>
</body>
</html>