表格布局留言板的网页设计如何制作，求代码？

Question

网页设计

网页布局

网页制作

网页

网页技术

表格布局留言板的网页设计如何制作，求代码？

[图片]

关注者

3

被浏览

18,909

2 个回答

大家好，今天给大家介绍一款，简洁实用的企业留言表单和联系我们介绍页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

带输入验证，包括空验证、手机号验证、邮箱验证（图2）

图2
源码完整，需要的朋友可以下载学习（图3）

图3
本模板编码：10109，需要的朋友，点击下面的链接后，搜索10109，即可获取。
「链接」

发布于 2022-04-04 11:30

浮沉 phper · Accepted Answer

根据你的图片简单写了一下,希望对你有帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            padding: 30px 0 10px 0;
            border-bottom:  2px solid rgba(0,0,0,.1);
        }
        .body-content .content-menu{
            padding: 5px;
            margin-top: 10px;
        }
        .body-content .content-menu .table{
            padding: 0;
            margin: 0;
        }
        .body-content .content-menu table th:nth-child(1){
            padding-left: 20px;
        }
        .body-content .content-menu  table td:nth-child(2){
            text-align: center;
        }
        .content-form{
            margin-top: 20px;
            padding: 5px;
        }
        .content-form form{
            background: #F8F8F8;
            padding: 10px;
            border-radius: 3px;
        }
        .content-form-title{
            padding: 10px 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
<div class="col-md-10 offset-md-1">
    <div class="header">
        <h3>网络书城新闻列表</h3>
    </div>

    <div class="body-content ">

        <div class="content-menu">
            <table class="table table-sm table-bordered">
                <tbody>
                <tr>
                    <th><a href="">2013书城10大关键字</a></th>
                    <td>[2020-03-30]</td>
                </tr>
                <tr>
                    <th><a href="">数量销量连续新高</a></th>
                    <td>[2020-03-30]</td>

                </tr>
                <tr>
                    <th><a href="">最新读者读书调查报告</a></th>
                    <td>[2020-03-30]</td>
                </tr>

                <tr>
                    <th><a href="">新书上架,购买从速</a></th>
                    <td>[2020-03-30]</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="content-form">

            <form action="" class="offset-md-2 col-md-8 ">

                <h4 class="content-form-title">留言板</h4>
                <div class="form-group mx-sm-3 mb-2 mt-4">
                    <label for="title">主题</label>
                    <input type="text" class="form-control" id="title"  placeholder="留言主题">
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="value">内容</label>
                    <textarea class="form-control" id="value" rows="3" placeholder="留言内容"></textarea>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name"  placeholder="请输入姓名">
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="title">邮箱</label>
                    <input type="email" class="form-control" id="email"  placeholder="请输入邮箱">
                </div>
                <div class="form-group mx-sm-3 mb-2 mt-4">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button type="button" class="btn btn-outline-secondary">重置</button>
                </div>


            </form>
        </div>

    </div>
</div>
</body>
</html>

界面布局按你图片所提供的,对于用户体验度不是很好,建议还按照下方图片进行布局

如果不懂得地可以私信

编辑于 2023-03-15 09:39