仿微信投诉页源码

栀蓝网络科技

于 2024-11-02 16:30:35 发布

阅读量642

点赞数 3

分类专栏： html 投诉页源码文章标签： html 前端

本文链接：https://blog.csdn.net/m0_72775474/article/details/143452587

版权

源码同时被 3 个专栏收录

3 篇文章

订阅专栏

html

1 篇文章

订阅专栏

投诉页

1 篇文章

订阅专栏

一、概述

本文主要介绍一个模仿微信投诉页面风格而设计的微信投诉页 HTML 源码。通过这个源码，可以构建出一个具有基本投诉功能的前端页面，包括选择投诉类型、描述投诉内容、上传证据（简单示例）和提交投诉等功能

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投诉选项</title>
    <style>
        *{
            margin: 0;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            height: 100vh;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            overflow: hidden;
        }
        h2 {
            font-size: 14px;
            margin-bottom: 5px;
            margin-top: 20px;
            color: #999;
            padding-inline: 16px;
            font-weight: 500;
            opacity: 0.9;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            font-size: 16px;
            padding: 14px 16px;
            background-color: #fff;
            cursor: pointer;
            position: relative;
            display: flex ;
            align-items: center;
            justify-content: space-between;
        }
        li>a{
            color: #333;
            text-decoration: none;
            width: 100%;
            height: 100%;

        }
        li::before{
            content: '';
            width: calc(100% - 16px);
            height: 1px;
            background-color: #f5f5f5;
            position: absolute;
            bottom: 0;
            left: 16px;
        }
        li::after{
            content: '';
            display: inline-block;
            width: 10px ;
            height: 10px;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            transform: rotate(45deg);

        }
        p {
            font-size: 14px;
            color: #007bff;
            cursor: pointer;
            margin-top: 20px;
            text-align: center;
        }
        p>a{
            text-decoration: none;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>请选择投诉该网页的原因：</h2>
        <ul>
            <li><a href="./examine.html">网页包含欺诈信息(如:假红包)</a></li>
            <li><a href="./examine2.html">网页包含违法信息</a></li>
            <li><a href="./examine.html">网页可能包含谣言信息</a></li>
            <li><a href="./examine3.html">网页包含诱导分享/关注性质的内容）</a></li>
            <li><a href="./examine.html">网页包含(虚假/抽奖性质/欺诈)拼团信息</a></li>
            <li><a href="./examine.html">网页包含虚拟支付信息</a></li>
            <li><a href="./examine4.html">网页包含不适当的内容对我造成骚扰</a></li>
            <li><a href="./examine.html">网页包含有偿投票信息</a></li>
            <li><a href="./examine.html">网页包含隐私泄露风险</a></li>
        </ul>
        <p><a href="./tip.html">投诉须知</a></p>
    </div>
</body>
</html>