css练习--模拟抽屉网

2022-07-09 12:57:35

html文件

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" id="kk">
    <title>抽屉</title>
    <link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
<div class="title" >
    <div class="lanmu">
        <div class="fun">
            <img class="pic1" src="pic1.png">
            <img class="new" src="pic2.png">
            <a class="first_page">首页</a>
            <a class="zhuanqu">专区</a>
            <a class="homan">人类发布</a>
            <a class="radio">视频</a>
            <a class="find">发现</a>
            <a class="word">话题</a>
        </div>
        <div class="login">
            <input type="search" value="搜索" class="search">
            <img src="pag3.png" class="pag3">
            <input type="button" class="login_but" value="登录">
        </div>
    </div>
    <div class="touxiang">
            <img src="redhir.jpg" class="pic_head">
        <div class="more">
            <div class="info">个人资料</div>
            <div class="info">我的关注</div>
            <div class="info">我的粉丝</div>
            <div class="info">切换用户</div>
            <div class="info">注销账号</div>
        </div>
    </div>
</div>
<div calss="text">
    <div class="c1">
    <div class="left_text">
        <div class="cc1">
            <div class="bb1">机器人一号</div>
            <img class="dd1" src="1.png">
            <div class="ee1">
                <div class="ff1">评论</div>
                <div class="gg1">转发</div>
            </div>
        </div>
        <div class="cc2">
            <div class="bb2">机器人二号</div>
            <img class="dd2" src="2.png">
            <div class="ee2">
                <div class="ff2">评论</div>
                <div class="gg2">转发</div>
            </div>
        </div>

        <div class="cc3">
            <div class="bb3">机器人三号</div>
            <img class="dd3" src="3.png">
            <div class="ee3">
                <div class="ff3">评论</div>
                <div class="gg3">转发</div>
            </div>
        </div>
        <div class="cc4">
            <div class="bb4">机器人四号</div>
            <img class="dd4"src="11.png">
            <div class="ee4">
                <div class="ff4">评论</div>
                <div class="gg4">转发</div>
            </div>
        </div>
        <div class="cc5">
            <div class="bb5">机器五号</div>
            <img class="dd5" src="10.png">
            <div class="ee5">
                <div class="ff5">评论</div>
                <div class="gg5">转发</div>
            </div>
        </div>
        <div class="cc6">
            <div class="bb6">机器人六号</div>
            <img class="dd6" src="9.png">
            <div class="ee6">
                <div class="ff6">评论</div>
                <div class="gg6">转发</div>
            </div>
        </div>
        <div class="cc7">
            <div class="bb7">机器人七号</div>
            <img class="dd7" src="8.png">
            <div class="ee7">
                <div class="ff7">评论</div>
                <div class="gg7">转发</div>
            </div>
        </div>
        <div class="cc8">
            <div class="bb8">机器人八号</div>
            <img class="dd8" src="7.png">
            <div class="ee8">
                <div class="ff8">评论</div>
                <div class="gg8">转发</div>
            </div>
        </div>
        <div class="cc9">
            <div class="bb9">机器人九号</div>
            <img class="dd9" src="6.png">
            <div class="ee9">
                <div class="ff9">评论</div>
                <div class="gg9">转发</div>
            </div>
        </div>
        <div class="cc10">
            <div class="bb10">机器人十号</div>
            <img class="dd10" src="5.png">
            <div class="ee10">
                <div class="ff10">评论</div>
                <div class="gg10">转发</div>
            </div>
        </div>
        <div class="cc11">
            <div class="bb11">机器人十一号</div>
            <img class="dd11" src="4.png">
            <div class="ee11">
                <div class="ff11">评论</div>
                <div class="gg11">转发</div>
            </div>
        </div>

        <div class="cc12">
            <div class="page">
                <div class="pp1">下一页</div>
                <div class="pp2">2</div>
                <div class="pp3">3</div>
                <div class="pp4">4</div>
                <div class="pp5">5</div>
                <div class="pp6">6</div>
                <div class="pp7">7</div>
                <div class="pp8">8</div>
                <div class="pp9">9</div>
                <div class="pp10">10</div>

            </div>
        </div>
    </div>
    <div class="right_text">
        <div class="girl">美女图片</div>
        <img src="girl.jpg" class="girl_pic">
        <img src="girl.jpg" class="girl_pic2">
        <div class=‘m‘>1</div>
    </div>

    </div>

</div>
<!--<div class="button">111</div>-->
<hr >
<hr class="hr">
<div class="quan">Copyright&nbsp&copy2020&nbspamao.com&nbsp阿毛科技有限公司</div>
<div class="bao"  >点击举报</div>
<div class="fu" onclick="func()">返回顶部</div>
<script src="jquery-3.5.1.js"></script>
<script>
    function func() {
        $(‘html‘).scrollTop(0)
    }
</script>
</body>
</html>

scc文件

body{
    margin: 0;
    background-color: #b3b3a4;
}
.title{
    background-color: #f6f6e7;
    position: relative;
    height: 50px;

}
.lanmu{

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 50px;
    width: 1100px;
}
.fun{
float: left;
}
.login{
float: right;
}
.pic1{
    position: absolute;
    width: 50px;
    height: 50px;
}
.new{
    position: absolute;
    left: 60px;
    top:15px;
    width: 100px;
    height: 25px;

}
.first_page{
    position: absolute;
    left:220px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;

}
.zhuanqu{
       position: absolute;
    left:290px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;

}
.homan{
       position: absolute;
    left:360px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;

}
.radio{
       position: absolute;
    left:470px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;
}
.find{
       position: absolute;
    left:540px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;

}
.word{
       position: absolute;
    left:610px;
    font-size: 20px;
    color: #131312;
    height: 50px;
    line-height: 50px;
}
div a:hover{
    color: yellow;
}
.login_but{
    position: absolute;
    right: 0px;
    top:7px;
    height: 35px;
    width: 60px;
    background-color: antiquewhite;
    border-color: yellow;
    font-family: "Arial Unicode MS";
    color: #fa8b04;
    font-weight: bolder;
    font-size: medium;
}
.login_but:hover{
            background-color: yellow;
    color: #f6f6e7;
            }
.pic_head{
    position: absolute;
    top:5px;
    height: 40px;
    width: 40px;
    border-radius: 50%;

}
.touxiang{
    float: right;
    height: 50px;

    width: 100px;
    text-align: center;

}
.touxiang:hover {
    background-color: #1f231b;
}
.touxiang:hover .more{
    display: block;
}
/*.info:hover{*/
/*    display: block;*/
/*}*/
.more{
    position:absolute ;
    top:50px;
    right: 1px;
    background-color: #1f231b;
    color: #c4c419;
    height: 250px;
    width: 100px;
    display: none;
    z-index: 999;
}
.pag3{
    background-color: #fa8b04;
    position: absolute;
    right: 100px;
    height: 40px;
    width: 40px;
    top: 5px;
}
.search{
    background-color: antiquewhite;
    position: absolute;
    right: 180px;
    top: 15px;

}
.text{
    position: relative;

}

.c1{
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%,0px);
    width: 1200px;
    /*background-color: #fa8b04;*/


}
.left_text{
    float: left;
    width: 60%;


}

.right_text{
    float: left;
    width: 40%;
    /*background-color: #f6f6e7;*/
}
.girl{
    color: #fa8b04;
    text-align: center;
    font-size: large;
    /*background-color: #f6f6e7;*/
}
.girl_pic{
    height: 444px;
    width:360px;
    position: absolute;
    right: 60px;
    z-index: 10;
}
.girl_pic2{
    height: 444px;
    width:360px;
    position: absolute;
    top:485px;
    right: 60px;
    z-index: 10;
}
.m{
    visibility: hidden;
    height: 910px;

}

div[class^=‘cc‘]{

    height: 80px;
}
div[class^=‘bb‘]{
    float: left;
    background-color: aquamarine;
    height: 50px;
    width: 90%;
    text-align: center;
    line-height: 40px;
    font-size: large;
}
img[class^=‘dd‘]{
    float: right;

    height: 72px;
    width:72px;
}
div[class^=‘ee‘]{
    height: 25px;
    width: 90%;
    background-color: aquamarine;
    float: left;
}
div[class^=‘ff‘]{
    height:25px;
    width: 75px;
    background-color: #b7d21d;
    float: left;
    text-align: center;
}
div[class^=‘gg‘]{
    height:25px;
    width: 75px;
    background-color: #b7d21d;
    float: right;
    text-align: center;
}
div[class^=‘ff‘]:hover{
    color: #1d65d2;
}
div[class^=‘gg‘]:hover{
    color: #1d65d2;
}

.page{
    transform: translate(5%,0%);
}

div[class^=‘pp‘]{
    background-color: aquamarine;
    float: left;
    height: 50px;
    width: 9%;
    line-height: 50px;
    text-align: center;
}
div[class^=‘pp‘]:hover{
    color: #b7d21d;
}
.hr{
    position: relative;
    top:950px
}
.quan{
    /*background-color: #1d65d2;*/
    position: relative;
    top: 955px;
    /*width: 10px;*/
    height: 15px;
    text-align: center;
}
.bao{

    /*background-color: #1d65d2;*/
    position: relative;
    top: 970px;
    /*width: 10px;*/
    height: 15px;
    text-align: center;
    target:back;

}
.bao:hover{
    color: red;
}
.fu{
position: fixed;
    background-color: #fa8b04;
    bottom: 30px;
    right: 0px;
}
.info{
    height: 50px;
}

实现页面如下：

css练习--模拟抽屉网

码农公寓

相关文章