一款手机版的意见反馈网页模板演示代码

2021-05-21 作者：匿名阅读：1222次

前言

一款手机版的意见反馈网页模板演示代码

首先上html静态代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>意见反馈</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">意见反馈</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-sys"></i>
                </a>
            </header>
            <section class="aui-scrollView">
                <div class="aui-view-box">
                    <div class="aui-view-box-item">
                        <h2>您的问题或建议:</h2>
                        <textarea>输入个人意见反馈,字数在200字以内</textarea>
                    </div>
                    <div class="aui-view-box-item">
                        <h2>您的联系方式:</h2>
                        <input type="text" placeholder="输入电话号码">
                        <input type="text" placeholder="输入电子邮箱">
                    </div>
                    <div class="aui-view-box-item">
                        <p>留下您的联系方式,以便我们了解问题后及时反馈和结果，紧急问题请联系客服。</p>
                    </div>
                    <div class="aui-btn-submit">
                        <button>提交建议</button>
                    </div>
                </div>
            </section>
            <footer class="aui-footer aui-footer-fixed">
                <p>
                    <span>
                        遇到问题了？ 点击 <em>在线客服</em>
                    </span>
                </p>
            </footer>
        </section>
    </body>
</html>

以下是css样式代码：

html,body {
	color:#333;
	margin:0;
	height:100%;
	font-family:"Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-weight:normal;
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
a {
	text-decoration:none;
	color:#000;
}
a,label,button,input,select {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img {
	border:0;
}
body {
	background:#fff;
	color:#666;
}
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,button,fieldset,form,input,legend,textarea,th,td {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
	color:#08acee;
}
button {
	outline:0;
}
img {
	border:0;
}
button,input,optgroup,select,textarea {
	margin:0;
	font:inherit;
	color:inherit;
	outline:none;
}
li {
	list-style:none;
}
a {
	color:#666;
}
.clearfix::after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}
.clearfix {
	}/* 必要布局样式css */
.aui-flexView {
	width:100%;
	height:100%;
	margin:0 auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
}
.aui-scrollView {
	width:100%;
	height:100%;
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	position:relative;
	margin-top:0;
}
.aui-navBar {
	height:44px;
	position:relative;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	z-index:1002;
	background:#fff;
	padding-bottom:20px;
}
.aui-navBar-item {
	height:44px;
	min-width:25%;
	-webkit-box-flex:0;
	-webkit-flex:0 0 25%;
	-ms-flex:0 0 25%;
	flex:0 0 25%;
	padding:0 0.9rem;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	font-size:0.7rem;
	white-space:nowrap;
	overflow:hidden;
	color:#a0a0a0;
	position:relative;
}
.aui-navBar-item:first-child {
	-webkit-box-ordinal-group:2;
	-webkit-order:1;
	-ms-flex-order:1;
	order:1;
	margin-right:-25%;
	font-size:0.9rem;
	font-weight:bold;
}
.aui-navBar-item:last-child {
	-webkit-box-ordinal-group:4;
	-webkit-order:3;
	-ms-flex-order:3;
	order:3;
	-webkit-box-pack:end;
	-webkit-justify-content:flex-end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}
.aui-center {
	-webkit-box-ordinal-group:3;
	-webkit-order:2;
	-ms-flex-order:2;
	order:2;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	height:44px;
	width:50%;
	margin-left:25%;
}
.aui-center-title {
	text-align:center;
	width:100%;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	font-size:0.95rem;
	color:#333;
}
.icon {
	width:20px;
	height:20px;
	display:block;
	border:none;
	float:left;
	background-size:20px;
	background-repeat:no-repeat;
}
.icon-return {
	background-image:url("data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII=");
}
.aui-view-box {
	padding:1rem;
}
.aui-view-box-item h2 {
	font-size:0.8rem;
	color:#484848;
	padding:0.8rem 0;
}
.aui-view-box-item textarea {
	background:#f4f4f4;
	border-radius:5px;
	padding:0.8rem;
	border:none;
	width:100%;
	font-size:0.8rem;
	resize:none;
	height:10rem;
}
.aui-view-box-item input {
	background:#f4f4f4;
	border-radius:5px;
	padding:0.8rem;
	border:none;
	width:100%;
	font-size:0.8rem;
	resize:none;
	margin-bottom:0.8rem;
}
.aui-view-box-item p {
	color:#bdbdbd;
	font-size:0.8rem;
	padding-bottom:1rem;
}
.aui-btn-submit button {
	text-align:center;
	position:relative;
	border:none;
	pointer-events:auto;
	width:100%;
	display:block;
	font-size:0.8rem;
	height:3rem;
	line-height:3rem;
	margin-top:0.5rem;
	border-radius:50px;
	background:#17bd88;
	color:#fff;
}
.aui-footer {
	width:100%;
	position:relative;
	z-index:100;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	padding:.104rem 0 .07rem;
	background-color:rgba(255,255,255,0.96);
}
.aui-footer-fixed {
	position:fixed;
	bottom:0;
	left:0;
	z-index:49;
}
.aui-footer p {
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	color:#979797;
}
.aui-footer p {
	color:#999;
	font-size:0.8rem;
	padding-bottom:15px;
}
.aui-footer p em {
	color:#17bd88;
	font-style:normal;
}

请输入密码后继续：