欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 问答小程序开发《二》:提问页UI设计及前端代码编写

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

问答小程序开发《二》:提问页UI设计及前端代码编写

发布时间:2021-01-04  
微信小程序开发者社区()为您提供:问答小程序开发《二》:提问页UI设计及前端代码编写
相关的资讯,希望对您有帮助。

 

问答小程序开发《二》:提问页UI设计及前端代码编写

js部分似乎代码不全,所以本文仅供参考来自原文地址UI图:为方便用户使用,提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。index.wxss代码:/**index.wxss**/page{ background- ...

 

 

 

js部分似乎代码不全,所以本文仅供参考


UI图:

问答小程序开发《二》:提问页UI设计及前端代码编写

为方便用户使用,提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。

index.wxss代码:

 

/**index.wxss**/

page{

background-color:#efeff4;

}

.container{

padding:0px;

}

.container .tip{

width:100%;

background-color:#FFFFFF;

margin-bottom:10px;

}

.container .tip text{

display:block;

padding:10px;

text-align: center;

font-size:14px;

line-height:30px;

}

.container .form{

width:100%;

height:100%;

background-color:#FFFFFF;

}

.container .form form{

height:100%;

display: block;

padding:10px;

text-align: center;

}

.container .form form .section{

text-align: left;

margin:10px0px;

}

.section.upload{

margin:20px0px!important;

}

.img-upload{

height:100%;

width:100%;

position: relative;

}

.img-upload .img-icon-box{

display:inline-block;

margin:0px20px15px0px;

}

.img-upload icon{

position: absolute;

margin:-15px0pxauto80px;

}

.img-upload .img-box{

border:1px#eee solid;

}

.img-upload image{

width:80px;

height:80px;

}

input{

width:95%;

border-radius:5px;

border:1px#eee solid;

font-size:14px;

padding:2%;

}

textarea{

width:95%;

border-radius:5px;

border:1px#eee solid;

height:100px;

font-size:14px;

padding:2%;

}

.container .form form .btns{

width:100%;

}

/*版权*/

.copyright{

height:40px;

line-height:40px;

color:#8f8f94;

font-size:12px;

float: left;

bottom:20px;

}

/*字体图标*/

@font-face {

font-family:iconfont;

/*字体base64 https://transfonter.org/*/