<BODY>

<div id="modify-data">

<form class="modify-data-form">
<ul>
<li>
<label>昵称</label>
<input type="text" value="一路小串走向胜利" onfocus="this.value=''" onblur="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;

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

form表单样式的更多相关文章

  1. 还不错的Table样式和form表单样式

    作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...

  2. element-ui的form表单样式改动

    造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...

  3. yii2的form表单样式怎么灵活控制呢？

    <?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> &qu ...

  4. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  5. bootstrap简单form表单样式-form-horizontal

    jsp代码: <div id="content" style="background-color: white;"> <form class= ...

  6. BootStrap的table表格，栅格系统，form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

  7. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  8. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  9. form 表单 和 jQuery HTML / CSS 方法（$().html 类似的样式）

    1 有关链接 :http://www.runoob.com/tags/tag-form.html https://www.cnblogs.com/Jxwz/p/4509618.html https:/ ...

随机推荐

  1. VSCode插件及用户设置

    第一部分:插件 VSCode内置"emmet"插件,"convert to utf-8"等插件效果!十分强大!代码提示功能特别强悍! 插件地址:点击此处! 推荐 ...

  2. 对datatable进行简单的操作

    筛选出datatable中c_level=1的数据 dataRow[] rows = dt.Select("c_level=0"); 克隆表dt的结构到表dt,并将dt的数据复制到 ...

  3. python爬虫(七)_urllib2：urlerror和httperror

    urllib2的异常错误处理 在我们用urlopen或opener.open方法发出一个请求时,如果urlopen或opener.open不能处理这个response,就产生错误. 这里主要说的是UR ...

  4. ChromeExtension那些事儿

    Chrome Extension是什么呢? 简而言之,就是Chrome扩展,它是基于Chrome浏览器的,我们可以理解它为一个独立运行在Chrome浏览器下的APP,当然核心编程语言就是JavaScr ...

  5. 五.Spring与RabbitMQ集成--HelloWorld

    spring对RabbitMQ做了很好的集成,我们称之为spring AMQP,其官方文档写得十分详尽,文档地址:https://docs.spring.io/spring-amqp/referenc ...

  6. JPA学习笔记（8）——映射双向一对多关联关系

    双向一对多关联关系 前面的博客讲的都是单向的,而本问讲的是双向的(双向一对多 = 双向多对一) 什么是双向? 我们来对照一下单向和双向 单向/双向 User实体类中是否有List< Order& ...

  7. Android之——ListView优化

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47209253 作为client.其最基本的任务就是最直观的和用户交互.从serve ...

  8. EularProject 43: 带条件约束的排列组合挑选问题

    Sub-string divisibility Problem 43 The number, 1406357289, is a 0 to 9 pandigital number because it ...

  9. List集合在遍历过程中的删除

    List集合在遍历过程中的删除:[1,1,2,3,4,5] for循环正续会漏掉一个1 for(int i=0;i<list.size();i++){ if(list.get(i).equals ...

  10. Freemarker页面静态化技术，activemq监听页面变动

    初步理解: 架构优化: 静态页面的访问速度优于从缓存获取数据的动态页面的访问速度: Freemarker: 导包 模板:hello.ftl <!DOCTYPE html> <html ...