如何使用CSS创建类似设计的布局？

huangapple
go评论92阅读模式
英文:

How to create a layout similar to this design with CSS?

问题

我正在尝试创建我的网站来展示我的工作，并且正在创建一个“联系我”表单。现在，我正在关注它的外观。我设计了它应该是什么样子，但上次我使用HTML和CSS工作已经有8年了。

这是设计:
设计

这是实际结果:
当前结果

  1. <!-- 开始代码片段：js隐藏:false控制台:falsebabel:false -->
  3. <!-- 语言：lang-css -->
  4. /* ---------- 页脚 ---------- */
  6. #contact {
  7.     margin: 10vh auto;
  8.     max-width: 1800px;
  9.     width: 90%;
  10.     padding: 2%;
  11.     border-radius: 10px;
  12. }
  14. .contact-highlight {
  15.     font-size: 1.5em;
  16. }
  18. .form-element {
  19.     display: flex;
  20.     flex-direction: column;
  21.     align-items: center;
  22. }
  24. .form-component {
  25.     font-family: Poppins, Arial, Helvetica, sans-serif;
  26.     border-radius: 5px;
  27.     border: none;
  28.     background-color: #DAD8DD;
  29.     color: #0D0221;
  30.     width: 25vw;
  31.     height: 5vh;
  32. }
  34. .form-text-area {
  35.     font-family: Poppins, Arial, Helvetica, sans-serif;
  36.     border-radius: 5px;
  37.     border: none;
  38.     background-color: #DAD8DD;
  39.     color: #0D0221;
  40.     width: 25vw;
  41.     height: 20vh;
  42. }
  44. .form-submit {
  45.     font-family: Poppins, Arial, Helvetica, sans-serif;
  46.     border-radius: 10px;
  47.     border: none;
  48.     background-color: #F50056;
  49.     color: #ffffff;
  50.     font-size: 1em;
  51.     width: 10vw;
  52.     height: 5vh;
  53. }
  55. .footer-text {
  56.     color: #ffffff;
  57.     text-align: center;
  58. }
  59. <!-- 语言：lang-html -->
  60. <!-- 页面页脚。 -->
  62. <footer>
  64.     <!-- 联系信息。 -->
  65.     <div id="contact" class="white-section">
  67.         <!-- 联系文本。 -->
  68.         <p class="highlight contact-highlight">如果您喜欢我的工作或只是想联系我，</p>
  69.         <p>您可以填写此表格。我会尽快回复！</p>
  71.         <!-- 联系表单。 -->
  72.         <form class="form-element" action="php/contact.php" method="post">
  74.             <p>名字<em class="highlight">*</em></p>
  75.             <input class="form-component" type="text" name="name" autocomplete="off" required>
  77.             <p>电子邮件<em class="highlight">*</em></p>
  78.             <input class="form-component" type="email" name="email" autocomplete="off" required>
  80.             <p>主题<em class="highlight">*</em></p>
  81.             <input class="form-component" type="text" name="subject" autocomplete="off" required>
  83.             <p>信息<em class="highlight">*</em></p>
  84.             <textarea class="form-text-area" name="message" autocomplete="off" required></textarea>
  86.             <input class="form-submit" type="submit" value="发送">
  88.         </form>
  90.     </div>
  92.     <!-- 页脚版权。 -->
  93.     <p class="footer-text">© Basset Etienne | 保留所有权利。</p>
  94. </footer>
  96. <!-- 结束代码片段 -->

我已经使用了“CSS grid”来创建“项目”部分，我了解“display: flex”是如何工作的，但我不知道如何解决这个问题。我尝试在线查找将元素按特定顺序排列的方法，但我担心响应式排列可能会很麻烦。

英文:

I'm trying to create my website to show my work, and I'm creating a "Contact Me" form. Now, I'm focusing on the aspect of it. I made a design of what it should look like, but last time I worked with HTML and CSS was like 8 years ago.

Here is the design:
The design

Here is the actual result:
The result right now

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

  1. /* ---------- Footer ---------- */
  2. #contact {
  3. margin: 10vh auto;
  4. max-width: 1800px;
  5. width: 90%;
  6. padding: 2%;
  7. border-radius: 10px;
  8. }
  9. .contact-highlight {
  10. font-size: 1.5em;
  11. }
  12. .form-element {
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. }
  17. .form-component {
  18. font-family: Poppins, Arial, Helvetica, sans-serif;
  19. border-radius: 5px;
  20. border: none;
  21. background-color: #DAD8DD;
  22. color: #0D0221;
  23. width: 25vw;
  24. height: 5vh;
  25. }
  26. .form-text-area {
  27. font-family: Poppins, Arial, Helvetica, sans-serif;
  28. border-radius: 5px;
  29. border: none;
  30. background-color: #DAD8DD;
  31. color: #0D0221;
  32. width: 25vw;
  33. height: 20vh;
  34. }
  35. .form-submit {
  36. font-family: Poppins, Arial, Helvetica, sans-serif;
  37. border-radius: 10px;
  38. border: none;
  39. background-color: #F50056;
  40. color: #ffffff;
  41. font-size: 1em;
  42. width: 10vw;
  43. height: 5vh;
  44. }
  45. .footer-text {
  46. color: #ffffff;
  47. text-align: center;
  48. }

<!-- language: lang-html -->

  1. &lt;!-- The page&#39;s footer. --&gt;
  2. &lt;footer&gt;
  3. &lt;!-- The contact infos. --&gt;
  4. &lt;div id=&quot;contact&quot; class=&quot;white-section&quot;&gt;
  5. &lt;!-- Contact text. --&gt;
  6. &lt;p class=&quot;highlight contact-highlight&quot;&gt;Si vous aimez mes travaux ou souhaitez simplement me contacter,&lt;/p&gt;
  7. &lt;p&gt;vous pouvez remplir ce formulaire. Je vous r&#233;pondrais aussi vite que possible !&lt;/p&gt;
  8. &lt;!-- Contact form. --&gt;
  9. &lt;form class=&quot;form-element&quot; action=&quot;php/contact.php&quot; method=&quot;post&quot;&gt;
  10. &lt;p&gt;Pr&#233;nom-Nom&lt;em class=&quot;highlight&quot;&gt;*&lt;/em&gt;&lt;/p&gt;
  11. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; name=&quot;name&quot; autocomplete=&quot;off&quot; required&gt;
  12. &lt;p&gt;Email&lt;em class=&quot;highlight&quot;&gt;*&lt;/em&gt;&lt;/p&gt;
  13. &lt;input class=&quot;form-component&quot; type=&quot;email&quot; name=&quot;email&quot; autocomplete=&quot;off&quot; required&gt;
  14. &lt;p&gt;Objet&lt;em class=&quot;highlight&quot;&gt;*&lt;/em&gt;&lt;/p&gt;
  15. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; name=&quot;subject&quot; autocomplete=&quot;off&quot; required&gt;
  16. &lt;p&gt;Message&lt;em class=&quot;highlight&quot;&gt;*&lt;/em&gt;&lt;/p&gt;
  17. &lt;textarea class=&quot;form-text-area&quot; name=&quot;message&quot; autocomplete=&quot;off&quot; required&gt;&lt;/textarea&gt;
  18. &lt;input class=&quot;form-submit&quot; type=&quot;submit&quot; value=&quot;Send&quot;&gt;
  19. &lt;/form&gt;
  20. &lt;/div&gt;
  21. &lt;!-- Footer credits. --&gt;
  22. &lt;p class=&quot;footer-text&quot;&gt;&#169; Basset Etienne | All rights reserved.&lt;/p&gt;
  23. &lt;/footer&gt;

<!-- end snippet -->

I already used "CSS grid" to create the Projects part, and I understand how "display: flex" works, but I don't know how to approach this problem. I tried to check online for a way to put elements in a certain order, but I'm afraid it would be a pain to put it responsive.

答案1

得分: 0

我会这样做：
在表单内放一个 div 作为 flexbox 容器，然后放另外两个 div，一个用于姓名、邮箱和主题字段，另一个用于消息字段。

英文:

I would do like this:
Inside the form put a div to be a flexbox container, then put two other divs, one for the name, email and object fields and the other for the message field

答案2

得分: 0

Sure, here's the translated content:

  1. .display: grid 是你需要的。
  3. 通过观察，我们可以看到我们的网格有四行和两列，如下所示（不按比例显示）：
  5. ```none
  6. ┌───────────┬───────────────┐
  7. │ 输入：     │ 文本框：      │
  8. │ ┌───────┐ │ ┌───────────┐ │
  9. │ └───────┘ │ │           │ │
  10. ├───────────┤ │           │ │
  11. │ 输入：     │ │           │ │
  12. │ ┌───────┐ │ │           │ │
  13. │ └───────┘ │ │           │ │
  14. ├───────────┤ │           │ │
  15. │ 输入：     │ │           │ │
  16. │ ┌───────┐ │ │           │ │
  17. │ └───────┘ │ └───────────┘ │
  18. ├───────────┴───────────────┤
  19. │        ┌─────────┐        │
  20. │        │ 按钮    │        │
  21. │        └─────────┘        │
  22. └───────────────────────────┘

这可以翻译成HTML和CSS（为了便于解释而简化）：

  1. &lt;div id=&quot;contact&quot;&gt;
  2.   &lt;form class=&quot;form-element&quot;&gt;
  4.     &lt;!-- 使用 &lt;label&gt; 来标记字段，而不是 &lt;div&gt; --&gt;
  5.     &lt;label class=&quot;form-field&quot;&gt;
  6.       &lt;span&gt;Pr&#233;nom-Nom&lt;/span&gt;
  7.       &lt;input type=&quot;text&quot; required&gt;
  8.     &lt;/label&gt;
  10.     &lt;label class=&quot;form-field&quot;&gt;
  11.       &lt;span&gt;Email&lt;/span&gt;
  12.       &lt;input type=&quot;email&quot; required&gt;
  13.     &lt;/label&gt;
  15.     &lt;label class=&quot;form-field&quot;&gt;
  16.       &lt;span&gt;Objet&lt;/span&gt;
  17.       &lt;input type=&quot;text&quot; required&gt;
  18.     &lt;/label&gt;
  20.     &lt;label class=&quot;form-field&quot;&gt;
  21.       &lt;span&gt;Message&lt;/span&gt;
  22.       &lt;textarea name=&quot;message&quot; required&gt;&lt;/textarea&gt;
  23.     &lt;/label&gt;
  25.     &lt;div class=&quot;form-field&quot;&gt;
  26.       &lt;input type=&quot;submit&quot; value=&quot;Send&quot;&gt;
  27.     &lt;/div&gt;
  28.   &lt;/form&gt;
  29. &lt;/div&gt;
  1. .form-element {
  2.   display: grid;
  3.   /* 四行，高度相同 */
  4.   grid-template-rows: repeat(4, 1fr);
  5.   /* 右列是左列的两倍宽度 */
  6.   grid-template-columns: 1fr 2fr;
  7. }

消息框位于第二列，跨越3行，而提交字段跨越两列。我们在CSS中也指定了这一点：

  1. .form-field:has([name=&quot;message&quot;]) {
  2.   grid-row: 1 / span 3; /* 从第1行开始，跨越3行 */
  3.   grid-column: 2; /* 从第2列开始，默认跨越1列 */
  4. }
  6. .form-field:has([type=&quot;submit&quot;]) {
  7.   grid-row: 4; /* 从第4行开始，默认跨越1行 */
  8.   grid-column: 1 / -1; /* 从第1列开始，跨越到最后一列 */
  9.   /* 或 1 / 3, 1 / span 2 */
  10. }

试一下：

<!-- 开始片段：js 隐藏：true -->

<!-- 语言：lang-css -->

  1. .form-element {
  2. display: grid;
  3. grid-template-rows: repeat(4, 1fr);
  4. grid-template-columns: 1fr 2fr;
  5. gap: 1em 2em;
  6. }
  7. .form-field:has([name=&quot;message&quot;]) {
  8. grid-row: 1 / span 3;
  9. grid-column: 2;
  10. }
  11. .form-field:has([type=&quot;submit&quot;]) {
  12. grid-row: 4;
  13. grid-column: 1 / -1;
  14. }
  15. /* 仅演示用 */
  16. #contact {
  17. margin: 1em auto;
  18. width: min(90%, 1000px);
  19. font-family: system-ui;
  20. }
  21. .form-element &gt; .form-field {
  22. display: flex;
  23. flex-direction: column;
  24. gap: 0.5em;
  25. }
  26. .form-element &gt; .form-field &gt; span:has(+ :required)::after {
  27. content: &#39;*&#39;;
  28. color: #f20b62;
  29. }
  30. .form-component,
  31. .form-text-area {
  32. border: none;
  33. border-radius: 5px;
  34. background-color: #dad8dd;
  35. color: #0d0221;
  36. }
  37. .form-component,
  38. .form-submit {
  39. padding: 0.5em 1em;
  40. }
  41. .form-text-area {
  42. flex: 1;
  43. padding: 1em;
  44. resize: none;
  45. }
  46. .form-submit {
  47. align-self: center;
  48. border: none;
  49. border-radius: 10px;
  50. background-color: #f50056;
  51. color: #fff;
  52. font-size: 1em;
  53. }

<!-- 语言：lang-html -->

  1. &lt;footer&gt;
  2. &lt;div id=&quot;contact&quot;&gt;
  3. &lt;form class=&quot;form-element&quot;&gt;
  4. &lt;label class=&quot;form-field&quot;&gt;
  5. &lt;span&gt;Pr&#233;nom-Nom&lt;/span&gt;
  6. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; required&gt;
  7. &lt;/label&gt;
  8. &lt;label class=&quot;form-field&quot;&gt;
  9. &lt;span&gt;Email&lt;/span&gt;
  10. &lt;input class=&quot;form-component&quot; type=&quot;email&quot; autocomplete=&quot;off&quot; required&gt;
  11. &lt;/label&gt;
  12. &lt;label class=&quot;form-field&quot;&gt;
  13. &lt;span&gt;Objet&lt;/span&gt;
  14. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; autocomplete=&quot;off
英文:

display: grid is what you need.

By observation, we can see that our grid have four rows and two columns, as visualized below (not to scale):

  1. ┌───────────┬───────────────┐
  2. │ Input:    │ Textarea:     │
  3. │ ┌───────┐ │ ┌───────────┐ │
  4. │ └───────┘ │ │           │ │
  5. ├───────────┤ │           │ │
  6. │ Input:    │ │           │ │
  7. │ ┌───────┐ │ │           │ │
  8. │ └───────┘ │ │           │ │
  9. ├───────────┤ │           │ │
  10. │ Input:    │ │           │ │
  11. │ ┌───────┐ │ │           │ │
  12. │ └───────┘ │ └───────────┘ │
  13. ├───────────┴───────────────┤
  14. │        ┌─────────┐        │
  15. │        │ Button  │        │
  16. │        └─────────┘        │
  17. └───────────────────────────┘

This can be translated to HTML and CSS as (simplified for ease of explanation):

  1. &lt;div id=&quot;contact&quot;&gt;
  2.   &lt;form class=&quot;form-element&quot;&gt;
  4.     &lt;!-- Use &lt;label&gt; to mark a field instead of &lt;div&gt; --&gt;
  5.     &lt;label class=&quot;form-field&quot;&gt;
  6.       &lt;span&gt;Pr&#233;nom-Nom&lt;/span&gt;
  7.       &lt;input type=&quot;text&quot; required&gt;
  8.     &lt;/label&gt;
  10.     &lt;label class=&quot;form-field&quot;&gt;
  11.       &lt;span&gt;Email&lt;/span&gt;
  12.       &lt;input type=&quot;email&quot; required&gt;
  13.     &lt;/label&gt;
  15.     &lt;label class=&quot;form-field&quot;&gt;
  16.       &lt;span&gt;Objet&lt;/span&gt;
  17.       &lt;input type=&quot;text&quot; required&gt;
  18.     &lt;/label&gt;
  20.     &lt;label class=&quot;form-field&quot;&gt;
  21.       &lt;span&gt;Message&lt;/span&gt;
  22.       &lt;textarea name=&quot;message&quot; required&gt;&lt;/textarea&gt;
  23.     &lt;/label&gt;
  25.     &lt;div class=&quot;form-field&quot;&gt;
  26.       &lt;input type=&quot;submit&quot; value=&quot;Send&quot;&gt;
  27.     &lt;/div&gt;
  28.   &lt;/form&gt;
  29. &lt;/div&gt;
  1. .form-element {
  2.   display: grid;
  3.   /* Four rows with the same height. */
  4.   grid-template-rows: repeat(4, 1fr);
  5.   /* The right column is twice as wide as the left one. */
  6.   grid-template-columns: 1fr 2fr;
  7. }

The message box lies on the second column and span 3 rows, while the submit field span both columns. We specify that in our CSS as well:

  1. .form-field:has([name=&quot;message&quot;]) {
  2.   grid-row: 1 / span 3; /* Starts at row 1, span 3 rows */
  3.   grid-column: 2; /* Starts at column 2, span 1 by default */
  4. }
  6. .form-field:has([type=&quot;submit&quot;]) {
  7.   grid-row: 4; /* Starts at row 4, span 1 by default */
  8.   grid-column: 1 / -1; /* Starts at column 1, span through the last column */
  9.   /* or 1 / 3, 1 / span 2 */
  10. }

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

  1. .form-element {
  2. display: grid;
  3. grid-template-rows: repeat(4, 1fr);
  4. grid-template-columns: 1fr 2fr;
  5. gap: 1em 2em;
  6. }
  7. .form-field:has([name=&quot;message&quot;]) {
  8. grid-row: 1 / span 3;
  9. grid-column: 2;
  10. }
  11. .form-field:has([type=&quot;submit&quot;]) {
  12. grid-row: 4;
  13. grid-column: 1 / -1;
  14. }
  15. /* Demo only */
  16. #contact {
  17. margin: 1em auto;
  18. width: min(90%, 1000px);
  19. font-family: system-ui;
  20. }
  21. .form-element &gt; .form-field {
  22. display: flex;
  23. flex-direction: column;
  24. gap: 0.5em;
  25. }
  26. .form-element &gt; .form-field &gt; span:has(+ :required)::after {
  27. content: &#39;*&#39;;
  28. color: #f20b62;
  29. }
  30. .form-component,
  31. .form-text-area {
  32. border: none;
  33. border-radius: 5px;
  34. background-color: #dad8dd;
  35. color: #0d0221;
  36. }
  37. .form-component,
  38. .form-submit {
  39. padding: 0.5em 1em;
  40. }
  41. .form-text-area {
  42. flex: 1;
  43. padding: 1em;
  44. resize: none;
  45. }
  46. .form-submit {
  47. align-self: center;
  48. border: none;
  49. border-radius: 10px;
  50. background-color: #f50056;
  51. color: #fff;
  52. font-size: 1em;
  53. }

<!-- language: lang-html -->

  1. &lt;footer&gt;
  2. &lt;div id=&quot;contact&quot;&gt;
  3. &lt;form class=&quot;form-element&quot;&gt;
  4. &lt;label class=&quot;form-field&quot;&gt;
  5. &lt;span&gt;Pr&#233;nom-Nom&lt;/span&gt;
  6. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; required&gt;
  7. &lt;/label&gt;
  8. &lt;label class=&quot;form-field&quot;&gt;
  9. &lt;span&gt;Email&lt;/span&gt;
  10. &lt;input class=&quot;form-component&quot; type=&quot;email&quot; autocomplete=&quot;off&quot; required&gt;
  11. &lt;/label&gt;
  12. &lt;label class=&quot;form-field&quot;&gt;
  13. &lt;span&gt;Objet&lt;/span&gt;
  14. &lt;input class=&quot;form-component&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; required&gt;
  15. &lt;/label&gt;
  16. &lt;label class=&quot;form-field&quot;&gt;
  17. &lt;span&gt;Message&lt;/span&gt;
  18. &lt;textarea class=&quot;form-text-area&quot; name=&quot;message&quot; autocomplete=&quot;off&quot; required&gt;&lt;/textarea&gt;
  19. &lt;/label&gt;
  20. &lt;div class=&quot;form-field&quot;&gt;
  21. &lt;input class=&quot;form-submit&quot; type=&quot;submit&quot; value=&quot;Send&quot;&gt;
  22. &lt;/div&gt;
  23. &lt;/form&gt;
  24. &lt;/div&gt;
  25. &lt;/footer&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月11日 01:30:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75979278.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定