英文:
The content of my form is not entirely visible
问题
I understand your request, and it seems you want me to focus on the HTML and CSS code without translation. Here is the HTML and CSS code you provided:
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<!-- Rest of your HTML content here -->
</div>
</form>
</section>
</body>
CSS:
/* Your CSS styles here */
Please let me know if you have any specific questions or if you need assistance with any part of the code.
英文:
I'm a beginner in CSS and I attempted to create a form using Flexbox. However, I'm facing an issue where my content is not being fully displayed. Currently, the header form is not visible when the website is viewed on a tablet or desktop. The situation is even worse on mobile view as some of the input fields are not visible, despite being scrollable. Could you please assist me in identifying what is missing in my code?
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input type="text" placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input type="text" placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input type="email" placeholder="Enter your email address">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Password </label>
<input type="password" placeholder="Enter your your password">
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" placeholder="Enter your password again">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Gender</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
Male
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
Female
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other"> Other
</label>
</div>
</div> <!-- .radio-group -->
</div> <!-- .input-group -->
<div class="input-group">
<label for="">Hobbies</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
Music
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="cooking" id="cooking">
Cook
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="travel" id="travel">
Travel
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="movies" id="movies">
Movie
</label>
</div>
</div>
</div> <!-- .checkbox-group -->
</div><!-- .input-group -->
<div class="row">
<div class="input-group">
<label for="">Source of Income</label>
<select>
<option>Employed</option>
<option>Self-Employed</option>
<option>Unemployed</option>
</select>
</div>
<div class="input-group">
<label>Income</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>Upload Profile Picture</label>
<input type="file">
</div>
<div class="input-group">
<label>Age</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Bio</label>
<textarea> </textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">Create</button>
</div>
</div>
</form>
</section>
</body>
CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
height: 100vh;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.signup-form {
flex: 1;
max-width: 600px;
background-color: #EFF0F1;
border-radius: 10px;
border: 1px solid #999;
}
.form-header {
padding: 15px 0;
border-bottom: 1px solid #cccccc;
}
.form-header h1 {
font-size: 28px;
text-align: center;
color: #666;
}
.row {
display: flex;
flex-direction: row;
}
.input-group {
flex:1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 10px 5px;
}
label {
color: #1BBA93;
font-size: 17px;
font-weight: 500;
padding-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
font-size: 18px;
height: 34px;
padding: 0px 10px;
color: #666;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.form-body {
background: white;
padding: 5px 10px;
}
.radio-group,
.checkbox-group,
.range-group {
display: flex;
}
.radio-group div,
.checkbox-group div,
.range-group input {
flex: 1 ;
}
.radio-group label,
.checkbox-group label{
color:#666;
cursor:pointer;
}
.range-group label {
margin-left: 10px;
background-color: #1BBA93;
color: white;
border-radius: 5px;
padding: 5px;
font-size: 17px;
text-align: center;
}
textarea {
resize: none;
height: 100px;
}
.form-footer {
display:flex;
justify-content: flex-end;
}
.btn {
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
@media only screen and (max-width: 500px) {
.row{
flex-direction:column;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
height: 100vh;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.signup-form {
flex: 1;
max-width: 600px;
background-color: #EFF0F1;
border-radius: 10px;
border: 1px solid #999;
}
.form-header {
padding: 15px 0;
border-bottom: 1px solid #cccccc;
}
.form-header h1 {
font-size: 28px;
text-align: center;
color: #666;
}
.row {
display: flex;
flex-direction: row;
}
.input-group {
flex:1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 10px 5px;
}
label {
color: #1BBA93;
font-size: 17px;
font-weight: 500;
padding-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
font-size: 18px;
height: 34px;
padding: 0px 10px;
color: #666;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.form-body {
background: white;
padding: 5px 10px;
}
.radio-group,
.checkbox-group,
.range-group {
display: flex;
}
.radio-group div,
.checkbox-group div,
.range-group input {
flex: 1 ;
}
.radio-group label,
.checkbox-group label{
color:#666;
cursor:pointer;
}
.range-group label {
margin-left: 10px;
background-color: #1BBA93;
color: white;
border-radius: 5px;
padding: 5px;
font-size: 17px;
text-align: center;
}
textarea {
resize: none;
height: 100px;
}
.form-footer {
display:flex;
justify-content: flex-end;
}
.btn {
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
@media only screen and (max-width: 500px) {
.row{
flex-direction:column;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input type="text" placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input type="text" placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input type="email" placeholder="Enter your email address">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Password </label>
<input type="password" placeholder="Enter your your password">
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" placeholder="Enter your password again">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Gender</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
Male
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
Female
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other"> Other
</label>
</div>
</div> <!-- .radio-group -->
</div> <!-- .input-group -->
<div class="input-group">
<label for="">Hobbies</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
Music
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="cooking" id="cooking">
Cook
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="travel" id="travel">
Travel
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="movies" id="movies">
Movie
</label>
</div>
</div>
</div> <!-- .checkbox-group -->
</div><!-- .input-group -->
<div class="row">
<div class="input-group">
<label for="">Source of Income</label>
<select>
<option>Employed</option>
<option>Self-Employed</option>
<option>Unemployed</option>
</select>
</div>
<div class="input-group">
<label>Income</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>Upload Profile Picture</label>
<input type="file">
</div>
<div class="input-group">
<label>Age</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Bio</label>
<textarea> </textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">Create</button>
</div>
</div>
</form>
</section>
</body>
</html>
<!-- end snippet -->
My goal is to ensure that the complete form is displayed correctly, regardless of the device used, whether it is a desktop, tablet, or mobile.
答案1
得分: 2
我修复了多个问题，我将为您逐一介绍：
- 首先，您为注册表单设置了固定宽度为600px。这不适用于移动设备，所以您应该使用min表达式以适应移动设备。我使用了min(600px, 100%)，因为在移动设备上，屏幕的100%小于600px，其他内容会溢出。（您也可以为小屏幕和大屏幕制定更好的条件，但如果您满意大屏幕上最大为600px，那也可以。）
- 对于页眉问题，您只需移除注册页面中的100vh条件。
- 最好为您的注册表单添加一些边距，以使其在较小设备上不与屏幕的边缘分离。
- 最后，我在注册表单中设置了 "overflow: hidden"，以使底部的圆形边框半径显示为其被子元素溢出。只要注册表的高度保持默认值（自动），这将很好，但如果您固定了高度，可以改为使用底部填充或为注册表中的最后一个子元素添加底边距。
如果有任何不清楚的地方，请随时在评论中提问！
英文:
I fixed mutliple problems that I will walk you through:
- First, you a fixed width for the signup form to 600px. This wouldn't work for mobile devices, so you should use min expression for satisfy mobile devices. For your problem, I used min(600px, 100%) since in mobile devices, 100% of the screen is less than 600 px, other content would overflow. (You could also make better conditions for both small and big devices, but if you are satisfied with max 600 px in big devices, that's ok.)
- For the header problem, you just remove the 100vh condition in registration-page.
- You better add some margin for your sign-up form, so it doesn't its edges are separated from those of the screen in smaller devices.
- Finally, I set "overflow: hidden" in the signup form so that the bottom circular border radius appears as it's overflowed by the children. This will be good as long as the height of signup for is the default which is auto, but if you fixed it's height,you could put padding bottom instead or put bottom margin for the last child in the signup-form.
Feel free to ask in the comments if something is unclear!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
min-height: 100vh;
}
#registration-page {
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
}
.signup-form {
flex: 1;
/* max-width: 600px; */
background-color: #EFF0F1;
border: 1px solid #999;
border-radius: 10px;
/* The overflow condition to make bottom
borders appear circular, as the borders of
last children of signup-form
are overflowing the edges making it appear sharp*/
overflow: hidden;
max-width: min(100%, 600px);
width: 50vw;
margin: 8px;
}
.form-header {
padding: 15px 0;
border-bottom: 1px solid #cccccc;
}
.form-header h1 {
font-size: 28px;
text-align: center;
color: #666;
}
.row {
display: flex;
flex-direction: row;
}
.input-group {
flex:1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 10px 5px;
}
label {
color: #1BBA93;
font-size: 17px;
font-weight: 500;
padding-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
font-size: 18px;
height: 34px;
padding: 0px 10px;
color: #666;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.form-body {
background: white;
padding: 5px 10px;
}
.radio-group,
.checkbox-group,
.range-group {
display: flex;
}
.radio-group div,
.checkbox-group div,
.range-group input {
flex: 1 ;
}
.radio-group label,
.checkbox-group label{
color:#666;
cursor:pointer;
}
.range-group label {
margin-left: 10px;
background-color: #1BBA93;
color: white;
border-radius: 5px;
padding: 5px;
font-size: 17px;
text-align: center;
}
textarea {
resize: none;
height: 100px;
}
.form-footer {
display:flex;
justify-content: flex-end;
}
.btn {
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
@media only screen and (max-width: 500px) {
.row{
flex-direction:column;
}
}
<!-- language: lang-html -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input type="text" placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input type="text" placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input type="email" placeholder="Enter your email address">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Password </label>
<input type="password" placeholder="Enter your your password">
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" placeholder="Enter your password again">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Gender</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
Male
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
Female
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other"> Other
</label>
</div>
</div> <!-- .radio-group -->
</div> <!-- .input-group -->
<div class="input-group">
<label for="">Hobbies</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
Music
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="cooking" id="cooking">
Cook
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="travel" id="travel">
Travel
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="movies" id="movies">
Movie
</label>
</div>
</div>
</div> <!-- .checkbox-group -->
</div><!-- .input-group -->
<div class="row">
<div class="input-group">
<label for="">Source of Income</label>
<select>
<option>Employed</option>
<option>Self-Employed</option>
<option>Unemployed</option>
</select>
</div>
<div class="input-group">
<label>Income</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>Upload Profile Picture</label>
<input type="file">
</div>
<div class="input-group">
<label>Age</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Bio</label>
<textarea> </textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">Create</button>
</div>
</div>
</form>
</section>
</body>
<!-- end snippet -->
答案2
得分: 1
你已将页面限制为仅为100vh：
#registration-page {
height: 100vh;
}
html {
height: 100vh;
}
移除这些属性，页面应该可以正常工作（或者在你的500px媒体查询中将高度设置为auto）。
如果需要进一步帮助，请告诉我。
英文:
You have restricted the page to be only 100vh:
#registration-page {
height: 100vh;
}
html {
height: 100vh;
}
Remove these properties and it should work fine (alternatively set the height to auto in your 500px media query):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
height: 100vh;
}
#registration-page {
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
height: 100vh;
}
.signup-form {
flex: 1;
max-width: 600px;
background-color: #EFF0F1;
border-radius: 10px;
border: 1px solid #999;
}
.form-header {
padding: 15px 0;
border-bottom: 1px solid #cccccc;
}
.form-header h1 {
font-size: 28px;
text-align: center;
color: #666;
}
.row {
display: flex;
flex-direction: row;
}
.input-group {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 10px 5px;
}
label {
color: #1BBA93;
font-size: 17px;
font-weight: 500;
padding-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
font-size: 18px;
height: 34px;
padding: 0px 10px;
color: #666;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.form-body {
background: white;
padding: 5px 10px;
}
.radio-group,
.checkbox-group,
.range-group {
display: flex;
}
.radio-group div,
.checkbox-group div,
.range-group input {
flex: 1;
}
.radio-group label,
.checkbox-group label {
color: #666;
cursor: pointer;
}
.range-group label {
margin-left: 10px;
background-color: #1BBA93;
color: white;
border-radius: 5px;
padding: 5px;
font-size: 17px;
text-align: center;
}
textarea {
resize: none;
height: 100px;
}
.form-footer {
display: flex;
justify-content: flex-end;
}
.btn {
padding: 10px 20px;
background-color: #1BBA93;
font-size: 17px;
border: none;
border-radius: 5px;
color: #bcf5e7;
cursor: pointer;
}
@media only screen and (max-width: 500px) {
.row {
flex-direction: column;
}
html,
#registration-page {
height: auto;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input type="text" placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input type="text" placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input type="email" placeholder="Enter your email address">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Password </label>
<input type="password" placeholder="Enter your your password">
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" placeholder="Enter your password again">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Gender</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
Male
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
Female
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other"> Other
</label>
</div>
</div>
<!-- .radio-group -->
</div>
<!-- .input-group -->
<div class="input-group">
<label for="">Hobbies</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
Music
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="cooking" id="cooking">
Cook
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="travel" id="travel">
Travel
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="movies" id="movies">
Movie
</label>
</div>
</div>
</div>
<!-- .checkbox-group -->
</div>
<!-- .input-group -->
<div class="row">
<div class="input-group">
<label for="">Source of Income</label>
<select>
<option>Employed</option>
<option>Self-Employed</option>
<option>Unemployed</option>
</select>
</div>
<div class="input-group">
<label>Income</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>Upload Profile Picture</label>
<input type="file">
</div>
<div class="input-group">
<label>Age</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Bio</label>
<textarea> </textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">Create</button>
</div>
</div>
</form>
</section>
</body>
</html>
<!-- end snippet -->
答案3
得分: 1
以下是代码部分的中文翻译：
@media only screen and (max-width: 500px) {
.row {
flex-direction: column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: block;
justify-content: center;
align-items: center;
position: relative;
padding-right: 25px;
padding-left: 25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 900px) and (min-width: 501px) {
.row {
flex-direction: column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding-right: 25px;
padding-left: 25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
}
CSS 和 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>创建帐户</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>名字</label>
<input type="text" placeholder="输入您的名字">
</div>
<div class="input-group">
<label>姓氏</label>
<input type="text" placeholder="输入您的姓氏">
</div>
</div>
<div class="row">
<div class="input-group">
<label>电子邮件</label>
<input type="email" placeholder="输入您的电子邮件地址">
</div>
</div>
<div class="row">
<div class="input-group">
<label>密码</label>
<input type="password" placeholder="再次输入您的密码">
</div>
<div class="input-group">
<label>确认密码</label>
<input type="password" placeholder="再次输入您的密码">
</div>
</div>
<div class="row">
<div class="input-group">
<label>性别</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
男性
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
女性
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other">
其他
</label>
</div>
</div>
</div>
<div class="input-group">
<label>兴趣爱好</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
音乐
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="hobbies" id="cooking">
做饭
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="hobbies" id="travel">
旅行
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="hobbies" id="movies">
电影
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label for="income-source">收入来源</label>
<select id="income-source">
<option>受雇</option>
<option>自雇</option>
<option>失业</option>
</select>
</div>
<div class="input-group">
<label>收入</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>上传个人照片</label>
<input type="file">
</div>
<div class="input-group">
<label>年龄</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label>个人简介</label>
<textarea></textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">创建</button>
</div>
</div>
<div class="form-header-bottom"></div>
<div id="blank-bottom"></div>
</form>
</section>
</body>
</html>
希望这有帮助！如果您需要任何进一步的翻译或帮助，请告诉我。
英文:
EDIT: I added below codes to media query 500px section and now works at all screen sizes. Additionally I added some divs (form-header-bottom and blank-bottom) to html file. And gave the signup-form class max-height:100vh;
@media only screen and (max-width: 500px) {
.row{
flex-direction:column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: block;
justify-content: center;
align-items: center;
position:relative;
padding-right: 25px;
padding-left:25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 900px) and (min-width: 501px){
.row{
flex-direction:column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
position:relative;
padding-right: 25px;
padding-left:25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
}
}
CSS & HTML Codes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color: #78a7ba;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
height:100vh;
}
#registration-page {
height: 100%;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
padding-top:50px;
}
.form-header-bottom {
height: 59px;
background: #EFF0F1;
display: flex;
position:relative;
justify-content: center;
align-items: center;
border-bottom-left-radius:10px;
border-bottom-right-radius: 10px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
}
.signup-form {
flex: 1;
max-width: 600px;
max-height:100vh;
background-color: #EFF0F1;
border-radius: 10px;
}
.form-header {
padding: 15px 0;
border-bottom: 1px solid #cccccc;
}
.form-header h1 {
font-size: 28px;
text-align: center;
color: #666;
}
.row {
display: flex;
flex-direction: row;
}
.input-group {
flex:1;
display: flex;
flex-direction: column;
min-width: 0;
margin: 10px 5px;
}
label {
color: #1BBA93;
font-size: 17px;
font-weight: 500;
padding-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
font-size: 18px;
height: 34px;
padding: 0px 10px;
color: #666;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.form-body {
background: white;
padding: 5px 10px;
}
.radio-group,
.checkbox-group,
.range-group {
display: flex;
}
.radio-group div,
.checkbox-group div,
.range-group input {
flex: 1 ;
}
.radio-group label,
.checkbox-group label{
color:#666;
cursor:pointer;
}
.range-group label {
margin-left: 10px;
background-color: #1BBA93;
color: white;
border-radius: 5px;
padding: 5px;
font-size: 17px;
text-align: center;
}
textarea {
resize: none;
height: 100px;
}
.form-footer {
display:flex;
justify-content: flex-end;
}
.btn {
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
@media only screen and (max-width: 500px) {
.row{
flex-direction:column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: block;
justify-content: center;
align-items: center;
position:relative;
padding-right: 25px;
padding-left:25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 900px) and (min-width: 501px){
.row{
flex-direction:column;
}
#registration-page {
height: 100vh;
background: #78a7ba;
display: flex;
justify-content: center;
align-items: center;
position:relative;
padding-right: 25px;
padding-left:25px;
}
#blank-bottom {
height: 59px;
background: #78a7ba;
display: flex;
position:relative;
justify-content: center;
align-items: center;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section id="registration-page">
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input type="text" placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input type="text" placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input type="email" placeholder="Enter your email address">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Password </label>
<input type="password" placeholder="Enter your your password">
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" placeholder="Enter your password again">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Gender</label>
<div class="radio-group">
<div>
<label for="male">
<input type="radio" name="gender" id="male">
Male
</label>
</div>
<div>
<label for="female">
<input type="radio" name="gender" id="female">
Female
</label>
</div>
<div>
<label for="other">
<input type="radio" name="gender" id="other"> Other
</label>
</div>
</div> <!-- .radio-group -->
</div> <!-- .input-group -->
<div class="input-group">
<label for="">Hobbies</label>
<div class="checkbox-group">
<div>
<label for="music">
<input type="checkbox" name="hobbies" id="music">
Music
</label>
</div>
<div>
<label for="cooking">
<input type="checkbox" name="cooking" id="cooking">
Cook
</label>
</div>
<div>
<label for="travel">
<input type="checkbox" name="travel" id="travel">
Travel
</label>
</div>
<div>
<label for="movies">
<input type="checkbox" name="movies" id="movies">
Movie
</label>
</div>
</div>
</div> <!-- .checkbox-group -->
</div><!-- .input-group -->
<div class="row">
<div class="input-group">
<label for="">Source of Income</label>
<select>
<option>Employed</option>
<option>Self-Employed</option>
<option>Unemployed</option>
</select>
</div>
<div class="input-group">
<label>Income</label>
<div class="range-group">
<input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
<label id="rangeValue">10</label>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<label>Upload Profile Picture</label>
<input type="file">
</div>
<div class="input-group">
<label>Age</label>
<input type="number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Bio</label>
<textarea> </textarea>
</div>
</div>
<div class="form-footer">
<button class="btn">Create</button>
</div>
</div>
<div class="form-header-bottom">
</div>
<div id="blank-bottom"></div>
</form>
</section>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论