Html+Css:美食网页制作2（表单制作）

最新推荐文章于 2024-06-12 00:12:27 发布

小涛砸

最新推荐文章于 2024-06-12 00:12:27 发布

阅读量2.4k

点赞数 49

文章标签： html css 前端 html5

本文链接：https://blog.csdn.net/A0123abc_/article/details/134634779

版权

文章目录

前言
一总体框架
二、重要代码详解
- 1.轮播图（html+css）
- 2.表单
三、效果图
四.详细代码仅供参考
总结

前言

这是一个联系我们页面，当用户有留言需反馈时，只需点击首页“联系我们”字条即可弹出联系我们页面，将留言写进即可提交到相关人员手中。

一总体框架

由三个大div组成（.header .content .footer），header部分就只是一个标题列表+轮播图；comtent部分左边图片左浮，右边表单右浮。footer是最底端部分.

二、重要代码详解

1.轮播图（html+css）

轮播图html

   <div id="screen">
        <div id="tv">
          <img src="images/01.jpg" alt="" />
          <img src="images/02.jpg" alt="" />
          <img src="images/03.jpg" alt="" />
          <img src="images/04.jpg" alt="" />
        </div>
      </div>
    </div>

轮播图css

<style>
   #screen {
        width: 1500px;
        height: 500px;
        overflow: hidden;
      }
      #tv {
        width: 6000px;
        height: 500px;
        animation: swith 6s ease-out infinite;
      }
      #tv > img {
        margin-top: 10px;
        width: 1500px;
        height: 500px;
        float: left;
        margin-left: 0;
        border-radius: 10px;
      }
      @keyframes swith {
        0%,
        20% {
          margin-left: 0;
        }
        25%,
        45% {
          margin-left: -1500px;
        }
        50%,
        70% {
          margin-left: -3000px;
        }
        75%,
        100% {
          margin-left: -4500px;
        }
      }</style>

2.表单

表单内容

  <form action="">
        <ul>
          <li><input type="text" placeholder="请输入您的姓名"></li>
          <li><input type="text" placeholder="请输入您的联系方式"></li>
          <li><textarea name="suggestion" placeholder="请输入您的留言" cols="60" rows="10"></textarea></li>
          <li><input type="submit" value="提交" onclick="alert('谢谢您的反馈')"></li>
        </ul>
</form>

样式设计

<style>
 input[type='text']{
        width: 200px;
        height: 40px;
       border: 1px solid rgba(0, 0, 0, 0.107);
     }
     input[type='submit']{
      background-color:skyblue;
      border: 1px solid skyblue;
      width: 200px;
        height: 40px;

     }
     ul li{
      list-style: none;
      margin: 5px;
     }
 .content form{
      float: right;
     width: 600px;
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.107);
     border-radius: 10px;
  }

  </style>

三、效果图

在这里插入图片描述

四.详细代码仅供参考


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        background-color: rgba(49, 13, 5, 0.082);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .header {
        width: 1500px;
        height: 520px;
        border-radius: 10px;
        background-color: rgba(255, 51, 0, 0.871);
        margin: 0 auto;
      }
      .nav span {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        color: white;
        padding: 4px;
        line-height: 20px;
        font-family: "微软雅黑";
        font-weight: bold;
      }
      .nav-left {
        float: left;
        margin-left: 100px;
      }
      .nav-right {
        float: right;
        margin-right: 100px;
      }
      a {
        text-decoration: none;
        font-size: 15px;
        color: white;
        width: 70px;
        height: 20px;
        line-height: 20px;
        margin-left: 100px;
      }
      #screen {
        width: 1500px;
        height: 500px;
        overflow: hidden;
      }
      #tv {
        width: 6000px;
        height: 500px;
        animation: swith 6s ease-out infinite;
      }
      #tv > img {
        margin-top: 10px;
        width: 1500px;
        height: 500px;
        float: left;
        margin-left: 0;
        border-radius: 10px;
      }
      @keyframes swith {
        0%,
        20% {
          margin-left: 0;
        }
        25%,
        45% {
          margin-left: -1500px;
        }
        50%,
        70% {
          margin-left: -3000px;
        }
        75%,
        100% {
          margin-left: -4500px;
        }
      }
      .content {
        /* background-color: rgba(49, 13, 5, 0.082); */
        width: 1200px;
        height: 400px;
        padding: 20px;
        background: white;
        margin-top: 20px;
        border-radius: 10px;
        margin: 0 auto;
      }
      h3 {
        background-color: rgba(49, 13, 5, 0.071);
        margin-bottom: 15px;
      }
    
      h3 span {
        display: inline-block;
        width: 10px;
        height: 20px;
        margin-right: 10px;
        background-color: red;
      }
      input[type='text']{
        width: 200px;
        height: 40px;
       border: 1px solid rgba(0, 0, 0, 0.107);
     }
     input[type='submit']{
      background-color:skyblue;
      border: 1px solid skyblue;
      width: 200px;
        height: 40px;

     }
     ul li{
      list-style: none;
      margin: 5px;
     }
     .footer{
    width: 100%;
    height:30px;
    line-height: 30px;
    background-color: rgba(22, 18, 17, 0.692);
  text-align: center;
  margin-top: 20px;

  }
  .footer span{
    color: white;
  }
  .content img{
    float: left;
    width: 500px;
    border-radius: 10px;
  }
 .content form{
      float: right;
     width: 600px;
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.107);
     border-radius: 10px;
  }
  .content area{
    border: 1px solid rgba(0, 0, 0, 0.107);  
  }
    </style>
  </head>

  <body>
    <div class="header">
      <div class="nav">
        <div class="nav-left"><span>四川美食</span></div>
        <div class="nav-right">
          <table class="table1">
            <tr>
              <td><a href="主页.html"">首页</a></td>
              <td><a href="川菜介绍.html">川菜介绍</a></td>
              <td><a href="经典菜品.html">经典川菜</a></td>

              <td><a href="菜谱大全.html">菜谱大全</a></td>
              <td><a href="联系我们.html">联系我们</a></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="screen">
        <div id="tv">
          <img src="images/01.jpg" alt="" />
          <img src="images/02.jpg" alt="" />
          <img src="images/03.jpg" alt="" />
          <img src="images/04.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <h3><span></span>联系我们</h3>
      <img src="images/05.png" alt="">
      <form action="">
        <ul>
          <li><input type="text" placeholder="请输入您的姓名"></li>
          <li><input type="text" placeholder="请输入您的联系方式"></li>
          <li><textarea name="suggestion" placeholder="请输入您的留言" cols="60" rows="10"></textarea></li>
          <li><input type="submit" value="提交" onclick="alert('谢谢您的反馈')"></li>
        </ul>
</form>
    </div>
    <div class="footer">
      <span>copyRight&copy;四川美食</span>
    </div>
  </body>
</html>

总结

在写任何内容前先确定一个页面总体框架及布局，把大方面确定下来再去写详细的样式，表单的内容要写出来不难，重要的是如何让你的表单呈现的简洁舒服。

小涛砸

关注

49
点赞
踩
44

收藏

觉得还不错? 一键收藏
2
评论
Html+Css:美食网页制作2（表单制作）

由三个大div组成（.header .content .footer），header部分就只是一个标题列表+轮播图；comtent部分左边图片左浮，右边表单右浮。footer是最底端部分.轮播图html轮播图css2.表单表单内容样式设计三、效果图总结在写任何内容前先确定一个页面总体框架及布局，把大方面确定下来再去写详细的样式，表单的内容要写出来不难，重要的是如何让你的表单呈现的简洁舒服。
复制链接

扫一扫