[郑州|结业弟子]CSS-刘高阳|2019年10月31日的日报-技能树.IT修真院

发表于： 2019-10-31 21:55:57

1 848

今天做的事

昨天提交的任务3发现是错的

效果和任务的要求不一样

我做的只是一个固定的页面

不会随着窗口的变化而变化

任务的要求是改变页面大小图标的位置也会随其改变

而且修真院的字和图标是一个整体

昨天的效果是

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="task03.css">
    <link rel="stylesheet" href="../task4/task4.css">
</head>
<body>
<div class="boss">
    <div class="nine">
        <img class="nine1"src="../img/记录页_03.png" height="50" width="50"/>
    </div>
<div class="one">

    <img class="one1" src="../img/整合透底.png" height="80" width=200>
</div>
    <div class="two">
     葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏,捉鬼,炸狼堡等多种聚会游戏,以下线下桌游道具。
    </div>




    <div class="four">
        <img class="four1"src="../img/未标题-1.png" height="50" width="50"/>
    </div>



        <div class="five">

            <img class="five1" src="../img/葡萄藤logo.gif" height="50" width="50"/>
        </div>

    <div class="seven">
        290560933
    </div>
    <div class="eight">
        BJPTTeng
</div>

</div>

</body>
</html>

我发现我给他设置的值都是固定值

把固定值改为靠边距的值

结果就会随窗口大小的变化而变化

效果如图

代码

body{
    background: #68cdd5;
}



.one {
    margin-top: 100px;
    text-align: center
}


.two{
    height: 100px;
    padding-top: 200px;
    padding-right: 80px;
    padding-left: 80px;
    color: azure;
    font-size: 20px;
    text-align: center
}



.four {
    padding-top:150px;


    padding-left: 40px;
}



.five{
    width: 50px;

    background: #009e96;
    border-radius: 50px;

    margin-top: -58px;
    float: right;
    margin-right: 49px;
}
.seven
{
    float: left;

    margin-left: 20px;
    color: azure;
    font-size: 15px;
}
.eight
{
    float: right;

    margin-right: 68px;

    color: azure;
    font-size: 15px;
}

.nine{
    height: 10px;
    padding-left: 30px;