css 我在响应方面遇到了一些问题

shstlldc 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(181)

我只是用HTML和CSS重新创建这个页面（https://appbrewery.github.io/capstone-2-example）。
顶部的英雄部分在给定的链接中是响应的。他们没有使用任何媒体查询来调整响应。
我也做了同样的事情，但我的一个没有响应，我不知道哪里出错了。我的云正在移动，当我调整屏幕大小时，我可以看到右手边的小设备有白色空间。这是我的git hub链接（https://yaswanthkumar7201.github.io/naga-demo/）。
英雄节是不是响应作为原始网站，我的云图像移动，我不知道为什么云不移动后，一定的最大宽度在appbrewery网站。

type here
``
    <section class="head-body">
       <img class="top-cloud" src="./images/cloud.png" alt="cloud">
        <h1>I'm Angela.</h1>
        <h2>a <span style="text-decoration: underline;">pro</span>grammer.</h2>
         <img class="bottom-cloud" src="./images/cloud.png" alt="cloud">
        <img src="./images/mountain.png" alt="mountain">
    </section>

``
*{
    box-sizing: border-box;
    clear: both;
    margin: 0;
    

}

`.head-body{
    background-color:#e4f9f5;
    position: relative;
    padding-top: 100px;
    text-align: center;
}
h1{
    font-family: "Sacramento", cursive;
    font-size:  5rem;
    color: #66bfbf;
    margin: 50px auto 0 auto;
}

section.head-body img > h1,h2{
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
    color: #66bfbf;
    font-weight: bold;
    padding-bottom: 20px;
    text-align: center;
}
.top-cloud{
    position: absolute;
    right: 300px;
    top: 40px;
}
.bottom-cloud{
    position: absolute;
    left: 250px;
    bottom: 300px;
}
`

字符串

css

来源：https://stackoverflow.com/questions/77768382/i-am-having-some-problem-with-responsiveness

1条答案

按热度按时间

lf5gs5x21#

* {
    box-sizing: border-box;
    margin: 0;
}

.head-body {
    background-color: #e4f9f5;
    position: relative;
    padding-top: 100px;
    text-align: center;
    max-width: 800px; 
    margin: auto;
}

h1 {
    font-family: "Sacramento", cursive;
    font-size: 5vw; 
    color: #66bfbf;
    margin-top: 50px;
}

h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 2.5vw; 
    color: #66bfbf;
    font-weight: bold;
    padding-bottom: 20px;
}

.top-cloud, .bottom-cloud {
    max-width: 100%; 
    height: auto; 
}

.top-cloud {
    position: absolute;
    right: 10%; 
    top: 40px;
}

.bottom-cloud {
    position: absolute;
    left: 10%; 
    bottom: 20%;
}

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 我在响应方面遇到了一些问题

1条答案

相关问题

热门标签

最新问答