html 怎么设置漂亮的表单样式

html 怎么设置漂亮的表单样式,第1张

html 设置漂亮的表单样式,以下是代码:

1、编写一个from表单

<form id="payment">

<fieldset>

<legend>用户详细资料</legend>

<ol>

<li>

<label for="name">用户名称:</label>

<input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus>

</li>

<li>

<label for="email">邮件地址:</label>

<input id="email" name="email" type="email" placeholder="example@163.com" required>

</li>

<li>

<label for="phone">联系电话:</label>

<input id="phone" name="phone" type="tel" placeholder="010-12345678" required>

</li>

</ol>

</fieldset>

<fieldset>

<legend>家庭住址(收货地址):</legend>

<ol>

<li>

<label for="address">详细地址:</label>

<textarea id="address" name="address" rows="1" required></textarea>

</li>

<li>

<label for="postcode">邮政编码:</label>

<input id="postcode" name="postcode" type="text" required>

</li>

<li>

<label for="country">国家:</label>

<input id="country" name="country" type="text" required>

</li>

</ol>

</fieldset>

<fieldset>

<legend>付费方式</legend>

<ol>

<li>

<fieldset>

<legend>xyk类型</legend>

<ol>

<li>

<input id="visa" name="cardtype" type="radio">

<label for="visa">中国工商银行</label>

</li>

<li>

<input id="amex" name="cardtype" type="radio">

<label for="amex">中国人民银行</label>

</li>

<li>

<input id="mastercard" name="cardtype" type="radio">

<label for="mastercard">中国建设银行</label>

</li>

</ol>

</fieldset>

</li>

<li>

<label for="cardnumber">yhk号:</label>

<input id="cardnumber" name="cardnumber" type="number" required>

</li>

<li>

<label for="secure">验 证 码:</label>

<input id="secure" name="secure" type="number" required>

</li>

<li>

<label for="namecard">持 卡 人:</label>

<input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户!" required>

</li>

</ol>

</fieldset>

<fieldset>

<button type="submit">现在购买</button>

</fieldset>

</form>

2、编写css样式

<style type="text/css">

/*分别定义HTML中和标记之的距离样式*/

html, body, h1, form, fieldset, legend, ol, li {

margin: 0

padding: 0

}

/*定义<body>标记样式*/

body {

background: #ffffff

color: #111111

font-family: Georgia, "Times New Roman", Times, serif

padding-left: 20px

}

/*定义付费内容的样式*/

form#payment {

background: #9cbc2c

-webkit-border-radius: 5px

border-radius: 5px

padding: 20px

width: 400px

margin:auto

}

form#payment fieldset {

border: none

margin-bottom: 10px

}

form#payment fieldset:last-of-type { margin-bottom: 0}

form#payment legend {

color: #384313

font-size: 16px

font-weight: bold

padding-bottom: 10px

text-shadow: 0 1px 1px #c0d576

}

form#payment >fieldset >legend:before {

content: "Step " counter(fieldsets) ": "

counter-increment: fieldsets

}

form#payment fieldset fieldset legend {

color: #111111

font-size: 13px

font-weight: normal

padding-bottom: 0

}

form#payment ol li {

background: #b9cf6a

background: rgba(255, 255, 255, .3)

border-color: #e3ebc3

border-color: rgba(255, 255, 255, .6)

border-style: solid

border-width: 2px

-webkit-border-radius: 5px

line-height: 30px

list-style: none

padding: 5px 10px

margin-bottom: 2px

}

form#payment ol ol li {

background: none

border: none

float: left

}

form#payment label {

float: left

font-size: 13px

width: 110px

}

form#payment fieldset fieldset label {

background: none no-repeat left 50%

line-height: 20px

padding: 0 0 0 30px

width: auto

}

form#payment fieldset fieldset label:hover { cursor: pointer}

form#payment input:not([type=radio]), form#payment textarea {

background: #ffffff

border: #FC3 solid 1px

-webkit-border-radius: 3px

font: italic 13px Georgia, "Times New Roman", Times, serif

outline: none

padding: 5px

width: 200px

}

form#payment input:not([type=submit]):focus, form#payment textarea:focus {

background: #eaeaea

border: #F00 solid 1px

}

form#payment input[type=radio] {

float: left

margin-right: 5px

}

</style>

3、漂亮的表单生成。

材料/工具:wps2016

1、点击一个单元格,选中后边框呈绿色,就可以在里面输入文字或者数字

2、如果需要合并单元格,首先按住鼠标左键不放进行拖动,选好要合并的单元格的区域后放开鼠标左键

3、然后把鼠标放在选中区域上右键单击,选择“设置单元格格式”

4、然后点击上方“对齐”选项卡

5、单击一下“合并单元格”前的小方块,使方块打上“√ ”

6、最后点击“确定”就可以合并单元格了

1.来说下主程序MainActivity.java

public class MainActivity extends Activity {

private TableLayout table

private Button select

EmployeeDao dao = new EmployeeDao(this)

private Button add

private Button update

int selectedRow = 0

int ActivityID=1

List<Employee>list = new ArrayList<Employee>()

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

table = (TableLayout) this.findViewById(R.id.table)

table.setBackgroundColor(Color.GREEN)

//table.set

add = (Button) this.findViewById(R.id.add)

update = (Button) this.findViewById(R.id.update)

select = (Button) this.findViewById(R.id.select)

// 点击查询按钮处理事件

// Toast.makeText(this, "已查询过了!", Toast.LENGTH_SHORT).show()

select.setOnClickListener(new selectListener())

// 点击添加按钮事件处理,跳转到另一个activity

add.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent i = new Intent()

i.setClass(MainActivity.this, AddAndUpdateActivity.class)

Bundle bundle=new Bundle()

ActivityID=1

bundle.putInt("ID", ActivityID)

i.putExtras(bundle)

startActivity(i)

}

})

// 更新员工信息

update.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent i = new Intent()

i.setClass(MainActivity.this, AddAndUpdateActivity.class)

Bundle bundle=new Bundle()

ActivityID=2

bundle.putInt("ID", ActivityID)

bundle.putInt("emID", selectedRow)

i.putExtras(bundle)

startActivity(i)

}

})

}

// 查询信息监听类

private class selectListener implements View.OnClickListener {

@Override

public void onClick(View v) {

list = dao.getAll()

if (list.size() != 0) {

for (int i = 0i <list.size()i++) {

TableRow row = new TableRow(MainActivity.this)

Employee em = list.get(i)// 查找所有员工信息

// 设置行标记

row.setId(em.getId())

row.setPadding(6, 1, 6, 1)

row.setGravity(Gravity.CENTER)

row.setBackgroundColor(Color.WHITE)

TextView view1 = new TextView(MainActivity.this)

view1.setText(Integer.toString(em.getId()))

view1.setGravity(Gravity.CENTER)//文本居中

view1.setTextSize((float) 18)文本大小

view1.setTextColor(Color.RED)

view1.setPadding(10, 2, 10, 2)//边框左、上、右、下

row.addView(view1)添加一行

TextView view2 = new TextView(MainActivity.this)

view2.setText(em.getName())

view2.setTextSize((float) 18)

view2.setPadding(10, 2, 10, 2)

row.addView(view2)

TextView view3 = new TextView(MainActivity.this)

view3.setText(Integer.toString(em.getAge()))

view3.setTextSize((float) 18)

view3.setGravity(Gravity.CENTER)

view3.setPadding(10, 2, 10, 2)

row.addView(view3)

TextView view4 = new TextView(MainActivity.this)

view4.setText(em.getPosition())

view4.setTextSize((float) 18)

view4.setPadding(10, 2, 10, 2)

row.addView(view4)

TextView view5 = new TextView(MainActivity.this)

view5.setText(em.getDepartment())

view5.setTextSize((float) 18)

view5.setPadding(10, 2, 10, 2)

row.addView(view5)

TextView view6 = new TextView(MainActivity.this)

view6.setText(em.getWorkdate())

view6.setTextSize((float) 18)

view6.setPadding(10, 2, 10, 2)

row.addView(view6)

TextView view7 = new TextView(MainActivity.this)

SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd")

Date date = null

try {

date = format.parse(em.getWorkdate())

} catch (ParseException e) {

e.printStackTrace()

}

float d= (float)((new Date().getTime()-date.getTime())/(24*60*60*1000)/365)//计算工龄

String dd=Integer.toString((int) d+1)

view7.setText(dd)

view7.setTextSize((float) 18)

view7.setPadding(10, 2, 10, 2)

row.addView(view7)

table.addView(row)

row.setOnClickListener(new View.OnClickListener() {//点击某行触发事件

@Override

public void onClick(View v) {

System.out.println("行标记:" + v.getId())

for (int i = 0i <table.getChildCount()i++) {

if (table.getChildAt(i).getId() != v.getId())

table.getChildAt(i).setBackgroundColor(Color.WHITE)

// 选中时,高亮显示即设置背景色

v.setBackgroundColor(Color.YELLOW)

}

selectedRow = v.getId()

AlertDialog.Builder dialog = new AlertDialog.Builder(

MainActivity.this)

dialog.setTitle("请确认:")

dialog.setMessage("是否删除这条记录?")

dialog.setPositiveButton("确定",

new DialogInterface.OnClickListener() {

@Override

public void onClick(

DialogInterface dialog,int which) {

EmployeeDao dao = new EmployeeDao(MainActivity.this)

dao.delete(selectedRow)

Toast.makeText(MainActivity.this,

"删除成功", Toast.LENGTH_SHORT).show()

Intent i = new Intent()

i.setClass(MainActivity.this,MainActivity.class)

startActivity(i)

}

})

dialog.setNegativeButton("取消",

new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog,

int which) {

dialog.cancel()

} })

dialog.show()

}

})

}

}

}

}

}

2.然后是添加和更新的界面,两个功能使用同一个xml文件布局

<RelativeLayout

android:background="#2691f2"

tools:context=".AddAndUpdateActivity" >

<TextView

android:id="@+id/t"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:textSize="25sp"

android:text="@string/addinfo"

android:textColor="#bc4b86" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:layout_below="@+id/t"

android:orientation="vertical" >

<TextView

android:layout_width="wrap_content"

android:layout_height="30dp" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/name" />

<EditText

android:id="@+id/nm"

android:inputType="text"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:layout_marginLeft="25dp" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/age" />

<EditText

android:id="@+id/ag"

android:inputType="text"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:layout_marginLeft="25dp" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/position" />

<EditText

android:id="@+id/pzs"

android:inputType="text"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:layout_marginLeft="25dp" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/dptmt" />

<EditText

android:id="@+id/dptmt"

android:inputType="text"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:layout_marginLeft="25dp" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/date" />

<EditText

android:id="@+id/wkdt"

android:inputType="text"

android:layout_width="150dp"

android:layout_height="wrap_content" />

</LinearLayout>

<TextView

android:layout_width="wrap_content"

android:layout_height="20dp" />

<Button

android:id="@+id/addnew"

android:layout_width="60dp"

android:layout_height="40dp"

android:layout_gravity="center_horizontal"

android:text="@string/add" >

</Button>

</LinearLayout>

</RelativeLayout>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11471038.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存