[成都|内门弟子]JS-韦骁|2022年08月23日的日报-技能树.IT修真院

发表于： 2022-08-23 23:19:47

0 745

今天经过师兄的指点发现了问题原因：是将宽高设置死了所导致内容挤出盒子，

将盒子设置成自适应，用内容来将盒子撑起来，就不会有内容挤出盒子的现象。

之后使用padding（填充）来将盒子一侧填充使内容只出现在一侧。

css代码：


* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    background-color: #ffffff;
    margin: 0 auto;
}

.navigation {
    background-color: #5fc0cd;
    height: 100px;

}

.navigation img {
    float: left;
    margin: 25px 30px;
}


.navigation p {
    color: white;
    font-size: 36px;
    text-align: center;
    padding-top: 19px;
}


.background {
    height: auto;
    position: relative;
}

.picture {
    width: 100%;
    height: 329px;
}

.head-portrait {
    position:absolute;
    z-index: 10;
    top: 76px;
    left: 28px;

}

.location {
    position:absolute;
    z-index: 10;
    top: 176px;
    left: 240px;
}

.name {
    position: absolute;
    color: white;
    top: 115px;
    left: 240px;
    font-size: 32px;
}

.age {
    position: absolute;
    color: white;
    top: 120px;
    left: 340px;
    font-size: 28px;
}

.position {
    position: absolute;
    color: white;
    top: 170px;
    left: 273px;
    font-size: 24px;
}

.skill {
    height: auto;
}

.skill em {
    display: inline-block;
    font-style: normal;
    font-size: 32px;
    color: #5fc0cd;
    padding: 4% 4%;
}

.skill p{
    display: inline-block;
    font-size: 32px;
    color: #333333;
    font-weight:bold;

}

.introduce {
    height: auto;
}

.introduce p {
    display: inline-block;
    font-size: 32px;
}

.introduce em {
    font-size: 32px;
    display: inline-block;
    font-style: normal;
    color: #e1e5e7;
    margin: 1%;

}

.dormitory {
    display: inline-block;
    margin: 3% 2% 0 5%;
}

.restaurant {
    display: inline-block;
    margin: 0 3% 0 0;
}

.working-age {
    height: auto;
}

.demand {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    padding: 5% 5%;
    text-align: center;

}

.content {
    display: inline-block;
    font-size: 32px;
    text-align: center;

}

.working-age em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    padding:  5%;

}

.working-hours {
    height: auto;
}

.working-hours em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    padding:  5%;
}

.work {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    padding: 5% 5%;
    text-align: center;
}

.time {
    display: inline-block;
    font-size: 32px;
    text-align: center;
}

.price {
    height: auto;
}

.price em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    padding:  5%;

}

.service {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    padding: 5% 5%;
    text-align: center;

}

.hourly-wage {
    display: inline-block;
    font-size: 32px;
    color: red;
    text-align: center;

}

.self-introduction {
    height: auto;
}

.self-introduction em{
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    padding:  5%;

}

.self {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    padding: 5%;
    text-align: center;
}

.information {
    display: inline-block;
    font-size: 28px;
    text-align: center;
    padding-left: 50%;

}

.contact-information {
    height: auto;
}

.respond {
    display: inline-block;
    float: left;
    border-style: solid;
    border-color: #5fc0cd;
    width: 45%;
    height: 80px;
    border-radius: 10px;
    /*margin: 10% 2%;*/
    margin-top: 10%;
    margin-right: 2%;

}

.respond p {
    text-align: center;
    color: #5fc0cd;
    font-size: 32px;
    margin-top: 17px;
}

.telephone {
    display: inline-block;
    background-color: #5fc0cd;
    float: right;
    width: 45%;
    height: 80px;
    border-radius: 10px;
    /*margin: 10% 2%;*/
    margin-top: 10%;
    margin-right: 2%;

}

.telephone p {
    text-align: center;
    color: white;
    font-size: 32px;
    margin-top: 17px;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=100%, initial-scale=1.0 ">
    <link rel="stylesheet" href="homepage.css">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="navigation">
        <img src="tupian/150%25%20返回.png" alt="返回">
        <p>个人页面</p>
    </div>
    <div class="background">
        <img class="picture" src="tupian/38a17cec12b0df5f8a4188382ba0e279e7c6e6def0df-X2hc7H.png" alt="背景">
        <img class="head-portrait" src="tupian/椭圆%201.png" alt="头像">
        <img class="location" src="tupian/Shape%204.png" alt="定位">
        <p class="name">高素雅</p>
        <p class="age">51岁</p>
        <p class="position">北京.通州.果园</p>
    </div>
    <div class="skill">
        <em>|</em>
        <p>专业技能</p>
    </div>
    <div class="introduce">
        <img class="dormitory" src="tupian/形状%204%20拷贝%203.png" alt="小图标">
        <p>住家</p>
        <em>|</em>
        <img class="restaurant" src="tupian/形状%204%20拷贝%204.png" alt="小图标">
        <p>不含餐</p>
    </div>
    <div class="working-age">
        <hr style="border: 1px solid #a6a6a6; margin-top: 27px; margin-left: 30px"/>
        <p class="demand">从业年龄</p>
        <em>|</em>
        <p class="content">0~3年</p>
    </div>
    <div class="working-hours">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="work">工作时间</p>
        <em>|</em>
        <p class="time">全天</p>
    </div>
    <div class="price">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="service">服务价格</p>
        <em>|</em>
        <p class="hourly-wage">25元/小时</p>
    </div>
    <div class="self-introduction">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="self">自我介绍</p>
        <em>|</em>
        <p class="information">可以洗衣、做饭、照顾老人。在护工方面有五年的经验，经验丰富。</p>
    </div>
    <div class="contact-information">
        <hr style="border: 1px solid #a6a6a6"/>
        <div class="respond">
            <p>留言</p>
        </div>
        <div class="telephone">
            <p>电话联系</p>
        </div>
    </div>
</div>
</body>
</html>