form表单样式

最新推荐文章于 2024-09-22 15:43:43 发布
最新推荐文章于 2024-09-22 15:43:43 发布
阅读量108 收藏
点赞数
原文链接：http://www.cnblogs.com/leshao/p/4651586.html
版权

 

<BODY>

<div id="modify-data">

<form class="modify-data-form">
<ul>
<li>
<label>昵称</label>
<input type="text" value="一路小串走向胜利" οnfοcus="this.value=''" οnblur="if(this.value==''){this.value='一路小串走向胜利'}" />
<i class="modify-data-form-redstar">*</i>
</li>

<li>
<label>开户行全称</label>
<input type="text" />
<i>开户银行全称格式为：xx银行xx分行xx支行；如果未正确填写开户银行全称，可能会使资金无法正常汇入您的银行卡内</i>
</li>

<li>
<label class="place">居住地</label>
<select id="province" name="province">
<option value="辽宁省">辽宁省</option>
<option value="北京">北京</option>
<option value="河北省">河北省</option>
</select>
<select id="city" name="city">
<option value="呼和浩特">呼和浩特</option>
<option value="包头">包头</option>
<option value="赤峰">赤峰</option>
</select>
</li>

<li>
<label class="gender">性别</label>
<select id="sex" name="province">
<option value="不详">不详</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</li>

<li class="long">
<label class="person-profile">个人简介</label>
<textarea></textarea>
</li>

<li class="modify-data-form-li">
<label></label>
<button class="modify-data-form-confirm">确定</button>
</li>
</ul>
</form>
<!---------b-i-moblie-test-form------------->

</div>
<!-----------modify-data部分----------------->

</BODY>

 

=============================================

 

#modify-data {
width: 850px;
height: 470px;
border: 1px #F5F5F5 solid;
/*#F5F5F5*/

margin: 50px auto;
}
.modify-data-form {
width: 650px;
height: 360px;
margin: 50px auto 0;
margin-left: 85px;
}
.modify-data-form li {
height: 60px;
line-height: 60px;
}
.modify-data-form li.long {
height: 90px;
margin-top: 15px;
}
.modify-data-form li label {
float: left;
width: 100px;
height: 36px;
line-height: 36px;
text-align: right;
font-size: 14px;
margin-right: 10px;
}
.modify-data-form li input {
float: left;
margin-left: 10px;
width: 190px;
border: 1px #D2D2D2 solid;
background: url(../images/login-password.png) repeat-x;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #999999;
text-indent: 10px;
}
.modify-data-form .modify-data-form-li {
height: 32px;
line-height: 32px;
margin-top: 20px;
margin-left: 10px;
}
.modify-data-form li .modify-data-form-confirm {
padding: 3px 8px;
background: #E12319;
border: none;
color: #ffffff;
font-family: "微软雅黑";
font-size: 18px;
border-radius: 4px;
cursor: pointer;
width: 82px;
height: 32px;
}
.modify-data-form li .modify-data-form-redstar {
/*width: 7px;
height: 8px;
line-height: 8px;
display: inline-block;
background:url(../images/red-star.png) no-repeat ;
float: left;
margin-top: 13px;
margin-left: 10px;*/

color: #F00;
font-family: "SimSun";
width: 11px;
height: 14px;
font-style: normal;
font-weight: normal;
font-size: 14px;
margin-top: 6px;
float: left;
margin-left: 10px;
}
.modify-data-form li i {
font-style: normal;
font-size: 12px;
color: #666666;
height: 22px;
line-height: 22px;
width: 325px;
display: inline-block;
margin-top: -4px;
margin-left: 10px;
}
.modify-data-form li .place {
margin-top: 10px;
margin-right: 18px;
}
.modify-data-form li .gender {
margin-top: 10px;
margin-right: 18px;
}
.modify-data-form li .person-profile {
margin-top: 10px;
margin-right: 18px;
}
.modify-data-form li #province {
min-width: 90px;
border: 1px #D2D2D2 solid;
background: url(../images/login-password.png) repeat-x;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333333;
margin-right: 22px;
}
.modify-data-form li #city {
min-width: 90px;
border: 1px #D2D2D2 solid;
background: url(../images/login-password.png) repeat-x;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333333;
}
.modify-data-form li #sex {
min-width: 90px;
border: 1px #D2D2D2 solid;
background: url(../images/login-password.png) repeat-x;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333333;
}
.modify-data-form li textarea {
width: 490px;
height: 90px;
background: url(../images/textarea-bg.png) repeat;

 

 

=====================

 

 

 

转载于:https://www.cnblogs.com/leshao/p/4651586.html

R芮R
关注
表单的一些样式以及属性
qq_52908359的博客
04-22 566
1.form表单元素的type类型： text 文本框 password 密码（显示密文） radio 单选 checkbox 复选 button 按钮 submit 提交 reset 重置 file 文件 hidden 隐藏 注：在使用submit按钮时，点击它会将表单新题提交到指定的位置，而button不能实现这一功能 2. （1）.下拉选择框：select/option （2）.文本域：t..
form表单中的各种样式
anjichan4261的博客
11-30 694
表单外观的美化 　　很多时候，我们仅仅为了实现数据采集这个功能来使用表单，常看到的表单都是“千人一面”、毫无生气，本专题尝试着来改变这一现象，试图赋予表单一个丰富多彩的面貌。 表单的外观，也是最为直接的花样，可以通过改变它来实现特效，本文分两个出发点来讲述：CSS魔法和图像魔法。 　　1、CSS魔法 CSS，就是大家知道的层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和...
前端——表单标签样式
最新发布
qq_53256193的博客
09-22 545
method: 表单提交格式 https网络协议请求格式: post/get等 通常: post方式是发送数据 而get是拿取数据。e.button 空按钮 如果需要设置按钮名字 那就设置value。target: 提交完表单之后 你的新页面在哪里打开。- button按钮标签 专门来当按钮的。- value属性 输入控件里面的值。- value属性 输入控件里面的值。- name属性 控件名称。- name属性 控件名称。name: 表单的名称。
自己比较满意的Form表单样式
03-01
写了好多表单样式 ，这个表单样式是我比较满意的Form表单样式
基于django源码自定义前端form表单样式
weixin_43700349的博客
05-18 1548
在项目中，我们通常会用django中的modelform帮助我们快速生成前端的样式，提升开发效率。但是有时，当我们需要让一些字段，显示一些特殊的样式时，就需要对modelform中的默认样式，手动进行一些修改： 选择颜色 示例 颜色选项，本来在数据库中是choices字段(字段名直接使用css样式中的颜色代码，方便后面自定义操作)，在modelfrom自动渲染是一个select标签，如下图 通过自定义的修改标签样式，可以改变标签的类型，并配合前端的一些技巧，最终修改后的效果如下。 新建widgets.p
使用layui前端框架弹出form表单以及提交的示例
01-21
skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , icon: 6 // icon , yes: function () { //layer.msg('确定') $....
微信小程序 表单Form实例详解（附源码）
12-29
form表单，将组件内输入的”switch”,”input”,”checkbox”,”slider”,”radio”,”picker”的值进行提交,数据的格式为：name:value，所以表单中控件都需要添加name属性，否则找不到对应控件的值。其主要属性： ...
40多款漂亮的form表单设计
05-26
本文将深入探讨“40多款漂亮的form表单设计”，这些设计不仅美观，而且注重用户体验，旨在提高用户参与度和数据提交效率。 表单设计的首要原则是清晰易懂。设计师必须确保表单布局直观，让用户一眼就能识别出每个...
表单样式form.css
weixin_30561177的博客
10-24 804
/**附件样式表。*/div.attachement{ float:left; overflow:hidden; padding:3px 0 0 15px; white-space:nowrap; } span.attachement-span{ float:left; background:#f5f6f4; border:1px solid #e1e1e1; margin:...
最酷的Form表单样式，能很好很方便的加入到你的UI中。
12-11
关于Form表单的美化，能比较方便、比较简单的加入到你的UI中，主要美化的内容有select radio checkbox 等，能够使你的UI更加漂亮美观，并能够自己定制样式。
一个很漂亮的表单样式，用div+css实现
04-14
1.有各种很漂亮的表单样式， 2，表单用div+css，还有js控制实现很炫的效果
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
form表单样式自定义
weixin_34128534的博客
01-25 3721
2019独角兽企业重金招聘Python工程师标准>>> ...
表单样式
weixin_45165848的博客
07-20 1388
表单元素的样式 表单元素中除了可以设置简单的尺寸大小的样式 文本框类的元素可以设置边框等简单的样式修饰外 是做不了更复杂的，所以单复选框 单选框 需要复杂样式修饰的时候 需要借助其他标签来实现. 实现的办法可以是在元素外层加上一个标签然后调整父元素的样式 将单元框或者复选框的透明度设置成0 select只能设置宽高 边框等样式 所以想做复杂样式 可借助框架中提供的组件的样式 行内元素 内联元素 ...
如何设置好看的form表单样式_HTML表格表单
weixin_39842918的博客
11-20 4408
https://www.zhihu.com/video/1243668780129435648每日测验""" 答案1. ascii:8位一个字节,1个字节表示一个字符.即: 2 ** 8 = 256,所以ASCII码最多只能表示256个字符.只有英文和一些符号 unicode：俗称万国码,把所有的语言统一到一个编码里.解决了ascii码的限制以及乱码的问题.unicode码一般是用两个字节表示一个...
Web前端之 HTML入门第二天
xiaobao3306的博客
10-13 261
**总结:** 1. `<thead></thead>`：用于定义表格的头部。`<thead>` 内部必须拥有 `<tr> `标签。 一般是位于第一行。 2. `<tbody></tbody>`：用于定义表格的主体，主要用于放数据本体 。 3. 以上标签都是放在 `<table></table>` 标签中。
普通弹出框table表单样式和form表单常见样式：一行两个
m0_62823653的博客
09-28 1412
第一部分：表单样式第一部分：表单样式vue中弹出框table表单样式第二部分：colgroup。
form表单样式模板
05-27
以下是一个基本的表单样式模板： ``` form { max-width: 500px; margin: auto; } label { display: block; margin-bottom: 10px; font-weight: bold; } input[type="text"], input[type="email"], input...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值