堆棧內存溢出
  簡體   English   中英

如何使這個 html 和 css 代碼成為響應式網頁設計

[英]how to make this html and css code as responsive web design

 原文  2021-11-13 17:45:49  6   1    html/ css/ responsive-design

問題描述

如何將以下 CSS 代碼轉換為響應式網頁設計。 我只做桌面設計我希望它作為一個響應式網站。 我嘗試了媒體查詢，但它看起來不像響應式設計。 所以我做了哪些改變來制作響應式網頁設計。 

 <html> <head> <title>LogIn</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> *{ box-sizing: border-box; } body{ background-image: url('login_background.jpg'); background-repeat: no-repeat; background-size: cover; } .wrapper{ background-color: white; overflow: hidden; display: block; height:500px; width: 400px; margin: auto; margin-top: 100px; } h1{ color:rgb(19, 211, 211); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-top: 10px; margin-bottom: 10px; text-align: center; text-transform: uppercase; } .input{ display: block; margin:auto; } .text{ width: 390px; height:50px; margin:30px auto 30px auto; border: none; border-bottom: 1px solid rgb(19, 211, 211); } .input[placeholder]{ text-align: center; color:rgb(19, 211, 211); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: medium; } .text:focus{ text-align: center; color:rgb(19, 211, 211); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: medium; border-bottom: 1px solid rgb(19, 211, 211); outline: none; } .button{ margin:30px auto 30px auto; width: 100px; height: 40px; color:rgb(19, 211, 211); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: medium; font-weight: bold; } .button:hover{ background-color:rgb(19, 211, 211) ; margin:30px auto 30px auto; width: 100px; height: 40px; color:white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: medium; font-weight: bold; border:1px solid white; } .ref{ margin:30px auto 30px 5px; color:rgb(19, 211, 211); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: medium; font-weight: bold; text-decoration: none; } @media only screen and (max-width: 768px){ [class="wrapper"]{ width:100%; } } </style> <body> <div class="wrapper"> <form id='form1'> <h1>LogIn</h1> <input type="text" class="input text" placeholder="UserName"> <input type="password" class="input text" placeholder="Password"> <a href="#" class="ref">Forgot Password</a> <input type="button" class="input button" value="LogIn"> <a href="#" class="ref">Don't Have Account? Sign Up</a> </form> </div> </body> </html>

如何將以下 CSS 代碼轉換為響應式網頁設計。 我只做桌面設計我希望它作為一個響應式網站。 我嘗試了媒體查詢，但它看起來不像響應式設計。 所以我做了哪些改變來制作響應式網頁設計。

1 個解決方案

解決方案1
 0  2021-11-13 18:56:01

在此處輸入圖片說明

這里有個問題...

可能的解決方案之一：

<html>
<head>
    <title>LogIn</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    *{
        box-sizing: border-box;
    }
    body{
        background-image: url('login_background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
    .wrapper{
        background-color: white;
        overflow: hidden;
        display: block;
        height:500px;
        width: 400px;
        margin: auto;
        margin-top: 100px;
    }
    h1{
        color:rgb(19, 211, 211);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        text-transform: uppercase;
    }
    .input{
        display: block;
        margin:auto;
    }
    .text{
        width: 390px;
        height:50px;
        margin:30px auto 30px auto;
        border: none;
        border-bottom: 1px solid rgb(19, 211, 211);
    }
   
    .input[placeholder]{
        text-align: center;
        color:rgb(19, 211, 211);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
    }
    .text:focus{
        text-align: center;
        color:rgb(19, 211, 211);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
        border-bottom: 1px solid rgb(19, 211, 211);
        outline: none;
    }
    .button{
        margin:30px auto 30px auto;
        width: 100px;
        height: 40px;
        color:rgb(19, 211, 211);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
        font-weight: bold;
    }
    .button:hover{
        background-color:rgb(19, 211, 211) ;
        margin:30px auto 30px auto;
        width: 100px;
        height: 40px;
        color:white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
        font-weight: bold;
        border:1px solid white;
    }
    .ref{
        margin:30px auto 30px 5px; 
        color:rgb(19, 211, 211);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
        font-weight: bold;
        text-decoration: none;
    }
    @media only screen and (max-width: 768px){
        [class="wrapper"]{
            width:100%; 
            text-align: center;
        }
        
        .text{
            max-width: 300px;
        }   
        
        .wrapper {
            margin-top: 20px; height: auto;
        }
    }
</style>
<body>
    <div class="wrapper">
        <form id='form1'>
            <h1>LogIn</h1>
            <input type="text" class="input text" placeholder="UserName">
            <input type="password" class="input text" placeholder="Password">
            <a href="#" class="ref">Forgot Password</a>
            <input type="button" class="input button" value="LogIn">
            <a href="#" class="ref">Don't Have Account? Sign Up</a>
        </form>
    </div>
</body>

... 可以解決這個問題：

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使響應式CSS + HTML設計 CSS 中的響應式 Web 設計 CSS/HTML 響應式設計 HTML/CSS 響應式設計 CSS - 如何根據此設計制作響應式 slider 如何使html代碼響應 在所有瀏覽器中使用 HTML 和 CSS 進行響應式網頁設計 同一部分中用於HTML堆棧列的CSS響應式Web設計 如何使用 HTML,CSS 使用移動應用程序 UI 設計制作響應式網站 使用Bootstrap CSS進行響應式Web設計
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM