JavaWEB作业 用CSS制作高仿QQ空间

最新推荐文章于 2024-05-12 20:14:09 发布
最新推荐文章于 2024-05-12 20:14:09 发布
阅读量881 收藏 21
点赞数 2
分类专栏： 笔记 文章标签： css javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46702804/article/details/119207090
版权

JavaWEB作业 用CSS制作高仿QQ空间

效果：

在这里插入图片描述
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>STAREXILE的空间</title>
    <style type="text/css">
        *{
			padding: 0;
			margin: 0;
            list-style: none;
		}
		body{
            background-image: url("img/5.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        a{
            text-decoration: none;
        }
/*上方固定黑框导航*/
        #Top{
            height: 50px;
            width: 100%;
            background-color: black;
            color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            z-index: 100;
        }
        #Top> li {
            float: left;
            height: 50px;
            width: 150px;
            text-align: center;
            line-height: 50px;
        }
        #Top li:hover{
            cursor: pointer;
        }
        #Top-zb li{
            visibility: hidden;
        }
        #Top-zb li{
            width: 130px;
            height: 50px;
            background-color: white;
            color: black;
            text-align: center;
            line-height: 50px;
            font-family: 微软雅黑;
        }
        #Top-zb:hover>li{
            visibility: visible;
        }
        #Top-zb li:hover{
            background-color: rgba(0,0,0,0.5);
            transition: font-size 0.5s;
            font-size: 15px;
            color: white;
        }
/*顶部*/
        .TopElement{
            width: 65%;
            margin-left: 17.5%;
        }
/*顶部空白框*/
        #TopBlank{
            height: 120px;
        }
/*顶部昵称*/
        #TopName{
            font-size: 55px;
            font-family: 微软雅黑;
            color: darkslateblue;
            margin-bottom: 5px;
        }
/*顶部签名*/
        #TopSignature{
            font-family: 微软雅黑;
            color: darkslateblue;
            margin-bottom: 20px;
        }
/*顶部信息块*/
        #TopInfor{
            height: 160px;
            float: left;
            position: relative;
        }
/*头像部分*/
        #Myphoto{
            height: 120px;
            width: 120px;
            border-style: solid;
            border-color: white;
            border-radius: 3px;
            border-width: 2px;
            background-image: url("img/头像.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
        }
        #Myphoto:hover{
            cursor: pointer;
        }
		#Changephoto{
			height: 20px;
			width: 120px;
			margin-top: 125px;
			overflow: hidden;
			color: white;
			background-color: rgba(0,0,0,0.3);
			text-align: center;
            visibility: hidden;
		}
		#Myphoto:hover>#Changephoto{
			margin-top: 100px;
            visibility: visible;
		}
        #Myname{
            height: 45px;
            width: 40%;
            color: darkslateblue;
            font-family: 微软雅黑;
            font-size: 25px;
            margin-left: 15px;
            position: absolute;
            top: 20px;
            left: 140px;
            display: inline;
        }
        /*黄钻VIP信息*/
        #VIPInfor{
            height: 75px;
            width: 40%;
            position: absolute;
            left: 140px;
            top: 45px;
        }
        #VIP-age{
            background-image: url("img/7.png");
            margin-top: 20px;
            margin-left: 10px;
            width: 96px;
            height: 96px;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
        #VIP-age:hover{
            cursor: pointer;
        }
        #VIP-age-grow{
            font-family: 微软雅黑;
            font-size: 10px;
            position: absolute;
            left: 70px;
            top: 32px;
            color: darkslateblue;
        }
        #VIP-age-grow-down{
            background-image: url("img/9.png");
            background-size: 50% 50%;
            background-repeat: no-repeat;
            width: 368px;
            height: 28px;
            position: absolute;
            left: 70px;
            top: 55px;
        }
        #VIP-buy{
            position: absolute;
            left: 280px;
            top: 35px;
            width: 75px;
            height: 35px;
            background-color: #ffcc00;
            color: #990033;
            font-size: 12px;
            font-family: 微软雅黑;
            line-height: 35px;
            text-align: center;
            border: 1px #990033 solid;
            border-radius: 5px;
        }
        #VIP-buy:hover{
            cursor: pointer;
            font-size: 13px;
            transition: font-size 0.5s;
        }
    /*天气信息*/
        #Weather{
            height: 100px;
            position: absolute;
            left: 860px;
            top: 60px;
            float: left;
        }
        #weather-pic{
            position: absolute;
            top: -15px;
            right: 60px;
            width: 80px;
            height: 80px;
            background-image: url("img/8.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #weather-temp{
            color: darkslateblue;
            font-size: 40px;
            font-family: 微软雅黑;
            height: 100px;
        }
        #weather-city{
            color: darkslateblue;
            font-size: 20px;
            font-family: 微软雅黑;
            float: left;
            position: absolute;
            left: 62px;
            top: 5px;
            width: 60px;
        }
        #weather-city:hover{
            cursor: pointer;
        }
        #weather-date{
            color: darkslateblue;
            font-size: 17px;
            font-family: 微软雅黑;
            position: absolute;
            left: 60px;
            top:35px;
            width: 100px;
        }
    /*导航菜单部分*/
        #Navgation{
            margin-top: 20px;
            width: 45%;
            margin-left: 27.5%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .btn{
            border: none;
            width: 100px;
            font-family: 微软雅黑;
            font-size: 15px;
            cursor: pointer;
        }
    /*大页面框*/
        #PAGE{
            width: 75%;
            height: 1050px;
            margin-left: 12.5%;
            margin-top: 15px;
            float: left;
            position: relative;
        }
    /*大页面左*/
        #PageLeft{
            width: 140px;
            height: 900px;
        }
    /*大页面左下1：菜单*/
        #Menu{
            width: 100%;
            height: 280px;
            background-color: white;
            border: 1px darkslateblue solid;
        }
        .menu{
            color: black;
            width: 100%;
            height: 40px;
            font-size: 12px;
            font-family: 微软雅黑;
            text-align: center;
            line-height: 40px;
        }
        .menu:hover{
            background-color: aqua;
            cursor: pointer;
        }
        #m1{
            background-image: url("img/10.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #m2{
            background-image: url("img/11.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #m3{
            background-image: url("img/12.png"),url("img/17.png");
            background-position: 10% center, 95% center;
            background-repeat: no-repeat;
        }
        #m4{
            background-image: url("img/13.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #m5{
            background-image: url("img/14.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #m6{
            background-image: url("img/15.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #m7{
            background-image: url("img/16.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        /*大页面左下2：游戏*/
        #Game{
            width: 100%;
            height: 600px;
            margin-top: 15px;
            background-color: white;
            border: 1px darkslateblue solid;
        }
        .game{
            width: 100%;
            height: 40px;
            font-size: 12px;
            font-family: 微软雅黑;
            text-align: center;
            line-height: 40px;
        }
        .game:hover{
            background-color: aqua;
            cursor: pointer;
        }
        #g1{
            background-image: url("img/29.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g2{
            background-image: url("img/19.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g3{
            background-image: url("img/20.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g4{
            background-image: url("img/21.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g5{
            background-image: url("img/22.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g6{
            background-image: url("img/23.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g7{
            background-image: url("img/24.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g8{
            background-image: url("img/25.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g9{
            background-image: url("img/26.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g10{
            background-image: url("img/27.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g11{
            background-image: url("img/28.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g12{
            background-image: url("img/30.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g13{
            background-image: url("img/31.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g14{
            background-image: url("img/32.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
        #g15{
            background-image: url("img/33.png");
            background-position: 10% center;
            background-repeat: no-repeat;
        }
    /*大页面中部*/
        #PageMiddle{
            width: 550px;
            height: 1000px;
            float: left;
            position: absolute;
            left: 160px;
            top: 0px;
        }
    /*大页面中部上方：搜索框*/
        #Searchselect{
            width: 100%;
            height: 60px;
            background-color: white;
            border: darkslateblue 1px solid;
            float: left;
        }
        #srch{
            width: 70%;
            height: 100%;
            border: none;
        }
        .mp{
            width: 10%;
            height: 59px;
            background-color: lightgray;
            border: 1px cadetblue solid;
            position: absolute;
        }
        #midpic1{
            left:70%;
            top:0px;
            height: 60px;
            background-image: url("img/34.png");
            background-repeat: no-repeat;
            background-position: center;
            transition: all 0.5s;
        }
        #midpic2{
            left:80%;
            top:0px;
            height: 60px;
            background-image: url("img/35.png");
            background-repeat: no-repeat;
            background-position: center;
            transition: all 0.5s;
        }
        #midpic3{
            left:90%;
            top:0px;
            height: 60px;
            background-image: url("img/36.png");
            background-repeat: no-repeat;
            background-position: center;
            transition: all 0.5s;
        }
        #midpic1:hover{
            cursor: pointer;
            transform: scale(1.2);
            background-color: aqua;
            transition: all 0.7s;
            z-index: 1;
        }
        #midpic2:hover{
            cursor: pointer;
            transform: scale(1.2);
            background-color: aqua;
            transition: all 0.7s;
            z-index: 1;
        }
        #midpic3:hover {
            cursor: pointer;
            transform: scale(1.2);
            background-color: aqua;
            transition: all 0.7s;
            z-index: 1;
        }
    /*大页面中部第二个框：全部动态*/
        #AllDT{
            position: absolute;
            left: 0px;
            top: 70px;
            width: 540px;
            height: 30px;
            align-items: center;
            line-height: 30px;
            font-size: 10px;
            font-family: 微软雅黑;
            background-color: aqua;
            border: darkslateblue 1px solid;
            padding-left: 10px;
            overflow: hidden;
        }
        #AllDT:hover{
            cursor: pointer;
        }
    /*大页面中部第三个框：动态1*/
        #dt1{
            position: absolute;
            left: 0px;
            top: 115px;
            width: 100%;
            height: 573px;
            background-color: white;
            border: darkslateblue 1px solid;
            border-radius: 7px;
        }
        #dt1-photo{
            position: absolute;
            left: 15px;
            top: 12px;
            background-position: center;
            background-image: url("img/wyz.jpg");
            background-size: 100% 100%;
            width: 54px;
            height: 54px;
            background-repeat: no-repeat;
        }
        #dt1-photo:hover{
            cursor: pointer;
        }
        #dt1-name{
            position: absolute;
            left: 87px;
            top: 15px;
            font-size: 16px;
            font-family: 微软雅黑;
            color: darkslateblue;
        }
        #dt1-name:hover{
            cursor: pointer;
        }
        #dt1-date{
            position: absolute;
            left: 87px;
            top: 50px;
            font-size: 8px;
            font-family: 微软雅黑;
            color: darkslateblue;
        }
        #dt1-wenzi{
            position: absolute;
            left: 17px;
            top: 80px;
            font-size: 15px;
            font-family: 微软雅黑;
        }
        #dt1-neirong{
            position: absolute;
            left: 17px;
            top: 110px;
            background-image: url("img/内容.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 490px;
            height: 340px;
        }
        #dt1-neirong:hover{
            cursor: pointer;
        }
        #dt1-llxx{
            position: absolute;
            left: 19px;
            top: 470px;
            font-size: 10px;
            color: gray;
        }
        #dt1-zan{
            position: absolute;
            right: 110px;
            top: 465px;
            background-image: url("img/47.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 24px;
            transition: transform 0.5s;
        }
        #dt1-zan:hover{
            transform: scale(1.1);
            cursor: pointer;
            transition: transform 0.5s;
        }
        #dt1-ping{
            position: absolute;
            right: 70px;
            top: 465px;
            background-image: url("img/44.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 24px;
            transition: transform 0.5s;
        }
        #dt1-ping:hover{
            transform: scale(1.1);
            cursor: pointer;
            transition: transform 0.5s;
        }
        #dt1-zhuan{
            position: absolute;
            right: 30px;
            top: 465px;
            background-image: url("img/46.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 24px;
            transition: transform 0.5s;
        }
        #dt1-zhuan:hover{
            transform: scale(1.1);
            cursor: pointer;
            transition: transform 0.5s;
        }
        #dt1-line{
            background-color: gray;
            width: 520px;
            height: 1px;
            position: absolute;
            left: 15px;
            top: 500px;
        }
        #dt1-zan2{
            position: absolute;
            left: 18px;
            top: 510px;
            background-image: url("img/47.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 20px;
            height: 20px;
        }
        #dt1-dianzantouxiang{
            position: absolute;
            left: 45px;
            top: 507px;
            border: 0px black solid;
            width: 400px;
            height: 25px;
        }
        #p1{
            width: 24px;
            height: 24px;
            background-image: url("img/头像.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #p2{
            width: 24px;
            height: 24px;
            margin-left: 5px;
            background-image: url("img/xyb.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 26px;
            top: 0px;
        }
        #p3{
            width: 24px;
            height: 24px;
            margin-left: 5px;
            background-image: url("img/ly.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 57px;
            top: 0px;
        }
        #p4{
            width: 24px;
            height: 24px;
            margin-left: 5px;
            background-image: url("img/mdl.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 87px;
            top: 0px;
        }
        #p2:hover{
            cursor: pointer;
        }
        #p3:hover{
            cursor: pointer;
        }
        #p4:hover{
            cursor: pointer;
        }
        #dt1-pl{
            position: absolute;
            left: 12px;
            top: 540px;
            width: 520px;
            height: 17px;
        }
    /*大页面中部第四个框：动态2*/
        #dt2{
            position: absolute;
            left: 0px;
            top: 700px;
            width: 100%;
            height: 315px;
            background-color: white;
            border: darkslateblue 1px solid;
            border-radius: 7px;
        }
        #dt2-1{
            font-size: 15px;
            font-family: 微软雅黑;
            height: 35px;
            width: 40px;
            line-height: 30px;
            text-align: center;
            margin-top: 5px;
            margin-left: 5px;
        }
        #dt2-2{
            width: 40px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 15px;
            font-family: 微软雅黑;
            position: absolute;
            top: 5px;
            right: 13px;
        }
        #dt2-xuanxiang div{
            visibility: hidden;
            width: 30px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
        #dt2-xuanxiang:hover div{
            visibility: visible;
            background-color: white;
            border: gray 2px solid;
            font-size: 12px;
            font-family: 微软雅黑;
            width: 50px;
            height: 30px;
        }
        #dt2-jubao{
            border-bottom: none;
        }
        #dt2-xuanxiang:hover{
            cursor: pointer;
        }
        #dt2-xuanxiang div:hover{
            background-color: gray;
            color: white;
            font-size: 14px;
            transition: font-size 0.5s;
            cursor: pointer;
        }
        #dt2-line{
            background-color: gray;
            width: 551px;
            height: 2px;
            margin-left: -1px;
        }
        #dt2-ADpic{
            width: 100%;
            height: 250px;
            background-image: url("img/dt2.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }
        #dt2-ADpic:hover{
            cursor: pointer;
        }
        #dt2-line2{
            width: 90%;
            margin-left: 5%;
            height: 1px;
            background-color: rgba(0,0,0,0.4);
        }
    /*大页面右边*/
        #PageRight{
            width: 430px;
            height: 900px;
            position: absolute;
            top: 0px;
            left: 720px;
        }
    /*页面右上1：签到框*/
        #Qiandao{
            width: 430px;
            height: 80px;
            border: darkslateblue 1px solid;
        }
        #xingqi{
            position: absolute;
            left: 1px;
            top: 1px;
            background-color: aqua;
            width: 120px;
            height: 40px;
            font-size: 20px;
            font-family: 微软雅黑;
            line-height: 40px;
            text-align: center;
        }
        #riqi{
            position: absolute;
            left: 1px;
            top: 41px;
            background-color: aqua;
            width: 120px;
            height: 40px;
            font-size: 15px;
            font-family: 微软雅黑;
            line-height: 40px;
            text-align: center;
        }
        #qd{
            position: absolute;
            color: darkslateblue;
            left: 120px;
            top: 1px;
            font-family: 微软雅黑;
            font-size: 35px;
            width: 200px;
            height: 80px;
            background-color: white;
            line-height: 80px;
            text-align: center;
            transition: all 0.7s;
            border-left: 1px darkslateblue solid;
            border-right: 1px darkslateblue solid;
            z-index: 1;
        }
        #qd:hover{
            cursor: pointer;
            font-size: 45px;
            color: white;
            background-color: aqua;
            transition: all 0.7s;
        }
        #leiji{
            background-color: aqua;
            color: darkslateblue;
            position: absolute;
            left: 320px;
            top: 1px;
            width: 110px;
            height: 40px;
            font-size: 25px;
            line-height: 40px;
            text-align: center;
        }
        #days{
            background-color: aqua;
            color: darkslateblue;
            position: absolute;
            left: 320px;
            top: 41px;
            width: 110px;
            height: 40px;
            font-size: 22px;
            line-height: 40px;
            text-align: center;
        }
    /*页面右上2：广告*/
        #AD{
            position: absolute;
            left: 0px;
            top: 90px;
            width: 100%;
            height: 280px;
            background-image: url("img/49.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: 1px darkslateblue solid;
            background-position: center;
            transition: background-size 0.5s;
        }
        #AD:hover{
            cursor: pointer;
            background-size: 115% 115%;
            transition: background-size 0.5s;
        }
        #ADdetail{
            margin-top: 320px;
            height: 40px;
            color: white;
            overflow: hidden;
            visibility: hidden;
            background-color: rgba(0,0,0,0.3);
            text-align: center;
            line-height: 40px;
        /*添加图片缩放效果动画*/
        }
        #AD:hover #ADdetail{
            cursor: pointer;
            visibility: visible;
            margin-top: 240px;
        }
    /*页面右下角访问记录*/
        #Record{
            position: absolute;
            left: 0px;
            top: 380px;
            width: 100%;
            height: 615px;
            background-color: white;
            border: 1px darkslateblue solid;
            border-radius: 5px;
        }
    /*访客记录第一部分：三个信息窗口*/
        #fangwenxinxi{
            width: 400px;
            height: 30px;
        }
        #skgw{
            font-size: 14px;
            font-family: 微软雅黑;
            width: 70px;
            margin-left: 15px;
            margin-top: 8px;
        }
        #skgw:hover{
            cursor: pointer;
        }
        #wkgs{
            font-size: 14px;
            font-family: 微软雅黑;
            width: 70px;
            position: absolute;
            left: 95px;
            top: 8px;
        }
        #wkgs:hover{
            cursor: pointer;
        }
        #bdfk{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            left: 175px;
            top: 8px;
            width: 70px;
        }
        #bdfk:hover{
            cursor: pointer;
        }
    /*访客记录第二部分：黄钻广告*/
        #VIPadvertise{
            position: absolute;
            left: 12px;
            top: 35px;
            background-color: aqua;
            width: 400px;
            height: 105px;
        }
        #VIPAD-line1{
            margin-left: 10px;
            margin-top: 5px;
            font-size: 15px;
            font-family: 微软雅黑;
            color: darkslateblue;
        }
        #VIPAD-line2{
            margin-left: 10px;
            margin-top: 5px;
            font-size: 15px;
            font-family: 微软雅黑;
            color: darkslateblue;
        }
        #VIPAD-line3{
            background-color: #ffcc00;
            color: #990033;
            border: #990033 1px solid;
            border-radius: 5px;
            font-family: 微软雅黑;
            font-size: 13px;
            width: 75px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-top: 10px;
            margin-left: 10px;
        }
        #VIPAD-line3:hover{
            font-size: 14px;
            transition: font-size 0.5s;
            cursor: pointer;
        }
    /*访客记录第三部分：访客信息*/
        #fangkexinxi{
            position: absolute;
            left: 20px;
            top: 165px;
        }
        #h1-pic{
            background-image: url("img/ly.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
        }
        #h1-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h1:hover{
            cursor: pointer;
        }
        #h1-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 90px;
        }
        #h1-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 112px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h2-pic{
            background-image: url("img/xyb.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            position: absolute;
            left: 138px;
            top:0px;
            transition: background-size 0.5s;
        }
        #h2-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h2:hover{
            cursor: pointer;
        }
        #h2-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 90px;
            left: 138px;
        }
        #h2-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 112px;
            left: 138px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h3-pic{
            background-image: url("img/ljy.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            width: 108px;
            height: 108px;
            position: absolute;
            left: 276px;
            top:0px;
            transition: background-size 0.5s;
        }
        #h3-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h3:hover{
            cursor: pointer;
        }
        #h3-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 90px;
            left: 276px;
        }
        #h3-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 112px;
            left: 276px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h4-pic{
            background-image: url("img/mdl.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 0px;
            top: 148px;
        }
        #h4-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h4:hover{
            cursor: pointer;
        }
        #h4-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 238px;
        }
        #h4-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 260px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h5-pic{
            background-image: url("img/zcj.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 138px;
            top: 148px;
        }
        #h5-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h5:hover{
            cursor: pointer;
        }
        #h5-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 238px;
            left: 138px;
        }
        #h5-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 260px;
            left: 138px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h6-pic{
            background-image: url("img/zhn.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 276px;
            top: 148px;
        }
        #h6-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h6:hover{
            cursor: pointer;
        }
        #h6-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 238px;
            left: 276px;
        }
        #h6-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 260px;
            left: 276px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h7-pic{
            background-image: url("img/wyn.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 0px;
            top: 296px;
        }
        #h7-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h7:hover{
            cursor: pointer;
        }
        #h7-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 386px;
        }
        #h7-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 408px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        #h8-pic{
            background-image: url("img/wyz.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 138px;
            top: 296px;
        }
        #h8-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h8:hover{
            cursor: pointer;
        }
        #h8-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 386px;
            left: 138px;
        }
        #h8-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 408px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            left: 138px;
        }
        #h9-pic{
            background-image: url("img/czy.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 108px;
            height: 108px;
            transition: background-size 0.5s;
            position: absolute;
            left: 276px;
            top: 296px;
        }
        #h9-pic:hover{
            background-size: 110% 110%;
            transition: background-size 0.5s;
        }
        #h9:hover{
            cursor: pointer;
        }
        #h9-name{
            color: white;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            width: 108px;
            height: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 18px;
            position: absolute;
            top: 386px;
            left: 276px;
        }
        #h9-date{
            font-size: 14px;
            font-family: 微软雅黑;
            position: absolute;
            top: 408px;
            width: 108px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            left: 276px;
        }
    </style>
</head>
<body>
<!--最上方固定的黑框-->
    <div>
        <ul  id="Top">
            <li>QQ空间</li>
            <li>个人中心</li>
            <li>我的主页</li>
            <li>好友</li>
            <li>游戏</li>
            <li>音乐</li>
            <li>装扮 ∨
                <ul id="Top-zb">
                    <li>一键装扮</li>
                    <li>装扮商城</li>
                </ul>
            </li>
        </ul>
    </div>
<!--空白行-->
    <div id="TopBlank" class="TopElement"></div>
<!--顶部的名字和个性签名-->
    <div id="TopName" class="TopElement">STAREXILE</div>
    <div id="TopSignature" class="TopElement">你守浅浪，我渡离殇</div>
    <div id="TopInfor" class="TopElement">
        <!--头像-->
        <div id="Myphoto">
			<div id="Changephoto">修改头像</div>
		</div>
<!--昵称-->
        <div id="Myname">STAREXILE</div>
<!--黄钻信息-->
        <div id="VIPInfor">
            <div id= ></div>
            <div id="VIP-age"></div>
            <div id="VIP-age-grow">成长值1成长速度-10点/天</div>
            <div id="VIP-age-grow-down"></div>
            <div id="VIP-buy">续费黄钻</div>
    </div>
<!--天气-->
        <div id="Weather">
            <div id="weather-pic"></div>
            <div id="weather-temp">36°</div>
            <div id="weather-city">西安</div>
            <div id="weather-date">7月14日</div>
        </div>
    </div>
<!--导航-->
    <div id="Navgation" class="TopElement">
        <div class="btn">主页</div>
        <div class="btn">日志</div>
        <div class="btn">相册</div>
        <div class="btn">留言板</div>
        <div class="btn">说说</div>
        <div class="btn">个人档</div>
        <div class="btn">音乐</div>
        <div class="btn">更多</div>
    </div>
<!--大页面框-->
<!--大页面左侧-->
    <div id="PAGE">
        <div id="PageLeft">
            <div id="Menu">
                <div class="menu" id="m1">好友动态</div>
				<div class="menu" id="m2">特别关心</div>
				<div class="menu" id="m3">与我相关</div>
                <div class="menu" id="m4">直播广场</div>
                <div class="menu" id="m5">那年今日</div>
                <div class="menu" id="m6">游戏应用</div>
                <div class="menu" id="m7">我的收藏</div>
            </div>
            <div id="Game">
                <div class="game" id="g1">CF黄钻特权</div>
                <div class="game" id="g2">仙魂</div>
                <div class="game" id="g3">焚天之怒</div>
                <div class="game" id="g4">礼物</div>
                <div class="game" id="g5">青云志</div>
                <div class="game" id="g6">盗墓笔记</div>
                <div class="game" id="g7">蛇蛇争霸</div>
                <div class="game" id="g8">投票</div>
                <div class="game" id="g9">QQ情侣</div>
                <div class="game" id="g10">QQ牧场</div>
                <div class="game" id="g11">文件夹</div>
                <div class="game" id="g12">积分商城</div>
                <div class="game" id="g13">每日抽奖</div>
                <div class="game" id="g14">更多游戏应用</div>
                <div class="game" id="g15">热血三国</div>
            </div>
        </div>
<!--大页面中间-->
        <div id="PageMiddle">
            <div id="Searchselect">
                <input type="text" name="" id="srch" value=""/>
                <div id="midpic1" class="mp"></div>
                <div id="midpic2" class="mp"></div>
                <div id="midpic3" class="mp"></div>
            </div>
            <div id="AllDT">全部动态</div>
            <div id="dt1">
                <div id="dt1-photo"></div>
                <div id="dt1-name">王奕尊</div>
                <div id="dt1-date">7月14日 21:15</div>
                <div id="dt1-wenzi">jrm，有被伤到</div>
                <div id="dt1-neirong"></div>
                <div id="dt1-llxx">浏览192次</div>
                <div id="dt1-zan"></div>
                <div id="dt1-ping"></div>
                <div id="dt1-zhuan"></div>
                <div id="dt1-line"></div>
                <div id="dt1-zan2"></div>
                <div id="dt1-dianzantouxiang">
                    <div id="p1"></div>
                    <div id="p2"></div>
                    <div id="p3"></div>
                    <div id="p4"></div>
                </div>
                <input type="text" name="" id="dt1-pl" value=""/>
            </div>
            <div id="dt2">
                <div id="dt2-1">广告</div>
                <div id="dt2-2">
                    <div id="dt2-xuanxiang">选项
                        <div id="dt2-jubao">举报</div>
                        <div id="dt2-guanbi">关闭</div>
                    </div>
                </div>
                <div id="dt2-line"></div>
                <div id="dt2-ADpic"></div>
                <div id="dt2-line2"></div>
            </div>
        </div>
<!--大页面右侧-->
        <div id="PageRight">
<!--大页面右上：签到信息-->
            <div id="Qiandao">
                <div id="xingqi">周三</div>
                <div id="riqi">7.14</div>
                <div id="qd">签到</div>
                <div id="leiji">31</div>
                <div id="days">Days</div>
            </div>
<!--大页面右中：广告-->
            <div id="AD">
                <div id="ADdetail">点击了解详情</div>
            </div>
<!--大页面右下：访客记录-->
            <div id="Record">
                <div id="fangwenxinxi">
                    <div id="skgw">谁看过我 |</div>
                    <div id="wkgs">我看过谁 |</div>
                    <div id="bdfk">被挡访客 |</div>
                </div>
                <div id="VIPadvertise">
                    <div id="VIPAD-line1">看看大家都看了什么？</div>
                    <div id="VIPAD-line2">开通黄钻可查看300人的访问记录</div>
                    <div id="VIPAD-line3">开通黄钻</div>
                </div>
                <div id="fangkexinxi">
                    <div id="h1">
                        <div id="h1-pic"></div>
                        <div id="h1-name">李瑶</div>
                        <div id="h1-date">10:25</div>
                    </div>
                    <div id="h2">
                        <div id="h2-pic"></div>
                        <div id="h2-name">徐渊博</div>
                        <div id="h2-date">昨天</div>
                    </div>
                    <div id="h3">
                        <div id="h3-pic"></div>
                        <div id="h3-name">李佳洋</div>
                        <div id="h3-date">昨天</div>
                    </div>
                    <div id="h4">
                        <div id="h4-pic"></div>
                        <div id="h4-name">马栋梁</div>
                        <div id="h4-date">7月11日</div>
                    </div>
                    <div id="h5">
                        <div id="h5-pic"></div>
                        <div id="h5-name">赵承佳</div>
                        <div id="h5-date">7月10日</div>
                    </div>
                    <div id="h6">
                        <div id="h6-pic"></div>
                        <div id="h6-name">张涵诺</div>
                        <div id="h6-date">7月2日</div>
                    </div>
                    <div id="h7">
                        <div id="h7-pic"></div>
                        <div id="h7-name">王禹诺</div>
                        <div id="h7-date">7月2日</div>
                    </div>
                    <div id="h8">
                        <div id="h8-pic"></div>
                        <div id="h8-name">王奕尊</div>
                        <div id="h8-date">7月2日</div>
                    </div>
                    <div id="h9">
                        <div id="h9-pic"></div>
                        <div id="h9-name">崔泽宇</div>
                        <div id="h9-date">7月2日</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
RainOnTheMoon
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html怎么做qq空间页面,html+css qq空间模仿
weixin_35565522的博客
06-04 1326
MyHtml.html*{main: 0px 0px;padding : 0px 0px;}.main{width:900px;height:415px;background:#000;margin:10px auto;}.title{width:900px;height:40px;background:#333332;margin:0px 0px;border:1px solid #FFF;}....
JavaWeb-QQ空间项目解析
L13158562070的博客
04-01 1565
1.熟悉QQZone业务需求 1) 用户登录 2) 登录成功，显示主界面。左侧显示好友列表；上端显示欢迎词。如果不是自己的空间，显示超链接：返回自己的空间；下端显示日志列表 3) 查看日志详情： - 日志本身的信息（作者头像、昵称、日志标题、日志内容、日志的日期） - 回复列表（回复者的头像、昵称、回复内容、回复日期） - 主人回复信息 4) 删除日志 5) 删除特定回复 6) 删除特定主人回复 7) 添加日志、添加回复、添加主人回...
2024年前端最全Web网页如何实现QQ好友，QQ空间，微博分享，2024大厂前端知识点总结+面试题解析
2401_84411433的博客
05-12 283
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】获取当前网页链接，分享的链接var desc = “分享描述”;var title = “分享标题”;var summary = “分享摘要”;var pics = “图片”;QQ好友分享url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述。
javaweb个人主页设计（html+css+js）
qq_63306482的博客
04-24 2万+
个人主页设计
JavaWeb项目之QQ Zone：（一）概述
sd_960614的博客
07-09 471
QQ Zone项目概述
web前端案例-开发QQ空间相册展示功能
weixin_33834075的博客
03-20 456
知识点：html/css布局思维，浮动/定位详解，大企业标准，代码性能优化，js鼠标事件，DOM操作等。 html代码： <div id="Main"> <ul> <li><img src="images/s1.jpg" bigsrc="images/big1.jpg"/></li> <li...
仿qq空间java源码_android 发说说动态源码下载(高仿QQ空间,含图片多选)
weixin_39906499的博客
02-28 608
【实例简介】仿qq发动态，图片发布效果【实例截图】 【核心代码】package com.king.photo.activity;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.content.Intent;import a...
基于JavaScript的JavaWeb作业设计源码
最新发布
05-28
本项目是基于JavaScript的JavaWeb作业设计源码，包含745个文件，其中包括195个JavaScript文件、154个GIF图像文件、92个JPG图像文件、86个CSS样式文件、72个PNG图像文件、19个JSON配置文件、16个Map文件、15个Class...
基于JavaWeb的作业管理系统
03-10
【JavaWeb作业管理系统详解】 JavaWeb技术是一种广泛应用于构建分布式应用程序的框架，它结合了Java语言的强类型和面向对象特性以及Web应用的交互性需求。在这个基于JavaWeb的作业管理系统中，开发者使用IntelliJ ...
javaWeb作业提交系统
10-18
【JavaWeb作业提交系统】是一个基于Java技术构建的在线作业提交平台，主要用于教育环境中方便教师布置、学生提交以及批改作业。这个系统采用Tomcat 9.0作为应用服务器，展示了JavaWeb开发中的核心概念和技术。 一、...
javaweb期末作业大学活动管理系统源码.zip
06-15
javaweb期末作业大学活动管理系统源码javaweb期末作业大学活动管理系统源码javaweb期末作业大学活动管理系统源码javaweb期末作业大学活动管理系统源码javaweb期末作业大学活动管理系统源码javaweb期末作业大学活动...
一款高仿QQ空间的多用户博客系统
07-21
一款高仿QQ空间的多用户博客系统，皮肤、挂件、饰品等均可定制。 主要特色： √ 超强人性化设计，个人档、日志、音乐盒、相册、留言板、收藏夹6大主打栏目。 √ 多用户支持，独立二级域名访问用户博客功能(需支持泛解析，可关闭)。 √ 全Ajax无刷新页面设计，支持独立页面访问。 √ 会员博客装扮箱可自由更换皮肤背景、挂件、欢迎动画、标题栏... √ 全面动态支持自定义首页模块类型、布局、位置... √ 原创Web编辑器，支持发光字、Html代码运行框、留言评论引用... √ 支持批量照片上传，实时入库显示。 √ 支持输入QQ号码即自动导入QQ空间**志。 V2.0 ( 0907011) 完善与修正: 1. 完善了主站首页,实现模版与标签分离,可自行设计Html模板. 2. 完善与加强后台站点设置功能 3. 编辑器完善插入图片功能,新增"从相册选择" 4. 加强会员登陆密码安全性 5. 新增日志草稿功能 6. 完善与增强博客应用功能的娱乐.完善应用接口 7. 新增积分金币系统,博主的发表与删除操作将会涉及到积金的增减 8. 新增信息中心,加强博主互动 9. 新增短消息功能 10. 改善博客统计功能(旧版本中数据库表 QJ_Count 可删除) 11. 新增漂浮饰品装扮 12. 修正部分功能在FF下不能正常使用的问题
java仿QQ聊天室（websocket）
08-23
java仿QQ聊天室（websocket），支持单聊，群聊，包含前端页面和数据库sql,更改数据库连接后可直接打包部署
Java仿QQ项目
01-28
纯粹使用Socket和IO流实现的一个仿QQ项目，功能较为简单，可以实现登录、刷新好友列表和单人聊天操作。之后可能对功能进行完善。有兴趣的朋友可以下载，不喜勿喷。
Java实现webQQ聊天完整代码
11-24
一款java实现完整项目，webQQ聊天，拿去学习或者当毕业设计很不错呢
安卓开发高仿QQ空间
10-19
一款基于Bomb后端云的程序，高仿ＱＱ空间，实现说说发布和查看，状态栏随滑动距离变化颜色，图片上传，显示图片已九宫格的形式显示
javaweb留言板css
10-10
javaweb 留言板css代码，学习时候上课时候，是需要用到的必要代码
java实现仿QQ即时聊天
热门推荐
monkey-jie的博客
12-31 3万+
这是我的java大作业，这里就直接贴上我的实验报告了。 1.1项目介绍 这是一个模仿QQ的即时聊天软件，可以通过运行在本地的服务端，实现两个客服端之间的通信，即聊天。采用的是javafx架构作为GUI设计架构，个人认为优点是可以自己设计css，使界面达到美观的目的。本项目共有登录、注册、重置密码、主界面发消息、添加好友、好友列表项、查看聊天记录、删除聊天记录、未读消息提醒、好友主页、我的主页等模块...
javaweb大作业 空间预约系统
12-30
空间预约系统是一个基于JavaWeb的大作业项目，旨在帮助用户方便快捷地预约各种空间资源。这个系统将涵盖多种场所，包括会议室、教室、活动场地等，用户可以通过系统进行预约、查询、管理和取消预约等操作。 首先，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值