weixin_42343634
饭来
采纳率66.7%
2019-05-20 12:41

htnl5 怎么改可以让我的文字和图片适应窗口大小?

5
已采纳
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>home page</title>
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
    <style>
    a:link, a:visited {
        background-color: #fE7272;
        color: white;
        padding: 14px 25px;
        border-radius: 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }

    body{
        overflow-x: hidden;
        overflow-y: auto;
    }


    #logo1 {
        position:absolute;
        top:50px;
        left: 0px;



    }
    #logo2 {
        position:absolute;
        top:50px;
        right: 0px;



    }

    #background {
        background-image: url("background.jpg");
        height: 750px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .select-box {
        border-radius: 2px;
        padding: 10px;
        font-family: sans-serif;
        font-size: 18px;
        color: #60666d;
        }

    #slogon {
        padding-bottom: 40px;
        font-size: 60px;
        color: white;
        font-family: "Indie Flower", cursive;
    }

    .button {
        border-radius: 30px;
        width: 150px;
        height: 60px;
        font-size: 20px;
        background-color: #FE7272;
        border: none;
        color: white;
        text-align: center;
    }

    #text {
        text-align: center;     
        margin: auto;
        position: absolute;
        top: 25%;
        left: 0;
        right: 0;
        bottom: 0;
}

    #welcome {
        text-align: center;     
        margin: auto;
        position: absolute;
        top: 75%;
        left: 0;
        right: 0;
        bottom: 0;

}
   #welcome1 {
        font-family: Brush Script MT, Brush Script Std, cursive ;
        font-size: 400%;
        color: lightblue;


}

   #welcome2 {
    font-family: fantasy;
    font-size: 200%;
    color: #FFBD33;
}

  #rec1{
    text-align: center;     
    margin: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Comic Sans MS;
    color: #F6603F;


    border: 10px inset #72B2F3;

}
  #rec2{
    text-align: center;     
    margin: auto;
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Comic Sans MS;
    color: #F6603F;


    border: 10px inset #72B2F3;

}

  #rec3{
    text-align: center;     
    margin: auto;
    position: absolute;
    top: 180%;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Comic Sans MS;
    color: #F6603F;


    border: 10px inset #72B2F3;

}


    </style>
</head>

<body>
    <div id="background">


    <div style="float:right;">
        <a href="/svn/2019/s1/wdc/group/login.html">login</a>
        <a href="/register.html">register</a>
    </div>

    <div id="text">
        <div id="slogon">
        Explore the Best Restaurant
        </div>


        <div id="search">
        <label class="date">
        <input type="date"
               name="date"
               value="2019-05-18"
               min="2019-05-18"
               class="calendar"
               data-value-pre-filled="false"
               data-default-date="2019-05-18"
               data-show-no-specific-date-control=""
               autocomplete="off"
               id="Date-search-bar" />
        </label>
        <select class="select-box">
            <option value="breakfast">breakfast</option>
            <option value="lunch">lunch</option>
            <option value="dinner">dinner</option>  
        </select>



        <select class="select-box">
            <option value="1">1 people</option>
            <option value="2">2 people</option>
            <option value="3">3 people</option>
            <option value="4">4 people</option>
            <option value="5">5 people</option>
            <option value="6">6 people</option>
            <option value="7">7 people</option>
            <option value="8">8 people</option>
            <option value="9">9 people</option>
            <option value="10">10 people</option>
            <option value="11">11 people</option>
            <option value="12">12 people</option>
        </select>
        <input type="text" placeholder="Search..." class="select-box">
        <button value="search" class="button">search</button>
    </div>
</div>
    </div>
    <div id="welcome">

        <img id= "logo1" src="logo.png" alt="logo" style="width:300px; height:250px;">
        <img id= "logo2" src="logo.png" alt="logo" style="width:300px; height:250px;">


        <h2 id="welcome1">Welcome to Indulge</h2>
        <p id="welcome2">Haven't decide of anything to eat yet? Just slide down and you'll see more recommendations!</p>


    </div>
    <div id="rec1">
        <h1>Popular Restaurants</h1>

        <div>
        <img src="sushi.png" alt="restaurant pic" style="max-height: 200px; max-width: 250px;"><br>
        <a href="search.html">Japanese restaurant</a>
        </div>
    </div>

    <div id="rec2">
        <h1>Popular Dishes</h1>
        <p>Here will list the popular dishes</p>
    </div>

    <div id="rec3">
        <h1>Restaurants Nearby</h1>
        <p>Here will list the restaurants which are near the current location</p>
    </div>




</body>
</html>

全屏幕本来是这样的
图片说明

缩小就挤在一起了
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • lllomh lllomh 2年前

    你好,文字大小可以用 vw 跟 vh 单位。 百分比,rem 。em 都可以也可以试试, 图片大小可以用 width 100% 还有背景 background-size:100% 100%**

    希望采纳哟

    点赞 评论 复制链接分享