<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. Jarvis OJ - [XMAN]level1 - Writeup——简单shellcode利用

    100分的pwn 简单查看一下,果然还是比较简单的 放到ida中查看一下,有明显的溢出函数,并且在函数中打印出了字符串的地址,并且字符串比较长,没有NX保护 所以我们很容易想到构造shellcode, ...

  2. 解析XML文件之使用SAM解析器

    XML是一种常见的传输数据方式,所以在开发中,我们会遇到对XML文件进行解析的时候,本篇主要介绍使用SAM解析器,对XML文件进行解析. SAX解析器的长处是显而易见的.那就是SAX并不须要将全部的文 ...

  3. 通过c# 实现mysql 数据库的备份和附加

    近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...

  4. 介绍一个法国的时间戳server

    特别说明: 以下介绍的法国时间戳server已经停止服务了.我曾发Email给相关站点的管理员.对方回复说他也不知道什么时候能恢复服务,有可能就是遥遥无期了.所以以下的内容仅有參考价值.没法实践了. ...

  5. NPOI：处理xls文件中的合并行

    /// <summary> /// NPOI根据路径获取文件转换成DataTable /// </summary> /// <param name="FileP ...

  6. Web前端开发好学吗？谈谈一位学姐的前端工程师之路

    我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...

  7. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路--验证码

    上一篇博客我们已经基本完成了部署工作,目前发现了验证码出现500错误,分析其代码,我们可以看到验证码使用的是System.Drawing命名空间下的类库, GDI+ 位图,这个在肯定是平台相关的,所以 ...

  8. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  9. fuser命令使用心得

    fuser命令可用于查看正使用指定file, file system, socket port的进程信息.使用-k参数可将这些进程杀掉,-i则在杀掉进程前给出提示 例子: [root@bogon ~] ...

  10. SP的封装(数据持久化方式一)

    1.先看一段描述: Interface for accessing and modifying preference data returned by Context.getSharedPrefere ...