CSSHTML⼀个漂亮的⽤户举报页⾯（⽹址举报）样式先上效果图：
之前在⽹上的时候，发现没有⼏个举报页⾯的效果，后⾯⾃⼰做了⼀个简约风格的，备注那⼀⾏估计本来想做成验证码的，可以根据⾃⼰需求修改。后续更新带验证码的样式。
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>report</title>
<style type="text/css">
.Content-Main{
max-width: 500px;
margin: auto;
margin-top: 50px;
padding: 20px 30px 20px 30px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 1px #FFF;
border: 1px solid #DDD;
border-radius: 5px;
color: #888;
background: #FFF;
}
.Content-Main h1{
display: block;
padding: 0px 0px 10px 40px;
margin: -10px -30px 30px -30px;
font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
border-bottom: 1px solid #DADADA;
color: #888;
}
.Content-Main h1>span{
display: block;
font-size: 11px;
margin: 0px 0px 5px;
}
.Content-Main label>span{
float: left;
width: 20%;
padding-right: 10px;
margin-top: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;            font-weight: bold;
text-align: right;
color: #333;
}
.Content-Main input[type="text"],.Content-Main textarea{
width: 70%;
height: 20px;
padding: 5px 0px 5px 5px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
line-height: 15px;
border-radius: 4px;
border: 1px solid #CCC;
color: #888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);        }
.select1{
width: 71%;
height: 35px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
line-height: 15px;
padding: 5px 0px 5px 5px;
border-radius: 4px;
border: 1px solid #CCC;
color: #888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);        }
.select2{
width: 25%;
height: auto;
padding-top: 1px;
padding-bottom: 3px;
padding-left: 1px;
margin-top: 5px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #CCC;
color: #888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
html制作一个网页-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
height: 100px;
padding: 5px 0px 0px 5px;
}
#url{
width: 70%;
height: auto;
padding: 5px 0px 25px 5px;
}
#describe{
width: 70%;
height: auto;
padding: 5px 0px 80px 5px;
}
#email{
width: 70%;
height: auto;
padding: 5px 0px 5px 5px;
}
#verifiation code{
width: 20px;
height: auto;
}
.button{
padding: 10px 25px 10px 25px;
margin-left: 111px;
border-radius: 4px;
border:1px solid #CCC;
background: #FFF;
color: #333;
}
.button:hover{
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}
</style>
</head>
<body>
<div class="Content-Main">
<div class="Content-Main1">
<h1>举报</h1>
</div>
<form action="" method="post" class="form-report">
<label>
<span>Type:</span>
<select name="select2" class="select2">
<option value="">涉及</option>
<option value="">涉及侵权</option>
<option value="">虚假内容</option>
<option value="">垃圾信息</option>
<option value="">⾊情信息</option>
</select>
</label>
<label>
<span>URL:</span>
<textarea id="url" name="url" placeholder="请在此填写⽹站，需以http或https开头"></textarea>
</label>
<label>
<span>Describe:</span>
<textarea id="describe" name="describe" placeholder="详细填写举报理由，有利于审核，不得少于8个字"></textarea>        </label>
<span>Email:</span>
<textarea id="email" name="email" placeholder="请务必填写正确的邮箱地址"></textarea>        </label>
<label>
<span>备注：（验证码）</span>
<input type="text" id="verifiation code">
</label>
<label>
<input type="button" class="button" value="Send">
</label>
</form>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。