需要一个HTML模板，用来做简单的表单数据录入
本人要做一个简单的表单数据录入页面，想要一个好看点，效果好点的页面，请大家推荐一些给我~O(∩_∩)O谢谢...
本人要做一个简单的表单数据录入页面，想要一个好看点，效果好点的页面，
请大家推荐一些给我~O(∩_∩)O谢谢 展开
请大家推荐一些给我~O(∩_∩)O谢谢 展开
2个回答
展开全部
HTML做个数据录入的模板。如下参考：
1、首先新建一个html，点击<body></body>中间，先填入表格内容：
2.内容可根据要求编写，示例代码如下：
<table>
<p style="text-align:center ">功课表</p>
<tr>
<th>语文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>数学</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>英文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
</table>
3.然后在<head></head>中间输入样式表的样式，如下图：
4.样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：
<style type="text/css">
body
{
width:340px;
height:800px;
}
table
{
border-collapse:collapse;
}
th,td
{
width:100px;
height:40px;
border:1pxsolidblack;
font-size:12px;
text-align:center;
}
</style>
5.注意，此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。
6.预览结果如下图所示，一个制作简单的HTML模板。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> - PHP2WORD 邮件与信封生成 - </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
body{
font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:12px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized .sub{
clear:both;
margin-left:150px;
width:120px;
height:32px;
line-height:20px;
border:1px solid #8b9c56;
background:url("../images/bt_bg.gif") 0px -64px;
text-align:center;
color:#336600;
font-size:15px;
font-weight:bold;
cursor:pointer;
}
.red{
color:#ff0000;
}
.blue{
color:#0000FF;
}
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.php">
<h1>表单标题</h1>
<p>副标题以及需要<span class="red">注意的 </span> 和 <span class="blue">醒目的 </span>事项</p>
<label>用户名
<span class="small">就当他是用户名好了</span>
</label>
<input type="text" name="name" id="name" value="" />
<label>邮件地址
<span class="small">其他类似这样哦</span>
</label>
<input type="text" name="num" id="num" value="" />
<input class="sub" type="button" value="提交"/>
<div class="spacer"></div>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> - PHP2WORD 邮件与信封生成 - </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
body{
font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:12px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized .sub{
clear:both;
margin-left:150px;
width:120px;
height:32px;
line-height:20px;
border:1px solid #8b9c56;
background:url("../images/bt_bg.gif") 0px -64px;
text-align:center;
color:#336600;
font-size:15px;
font-weight:bold;
cursor:pointer;
}
.red{
color:#ff0000;
}
.blue{
color:#0000FF;
}
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.php">
<h1>表单标题</h1>
<p>副标题以及需要<span class="red">注意的 </span> 和 <span class="blue">醒目的 </span>事项</p>
<label>用户名
<span class="small">就当他是用户名好了</span>
</label>
<input type="text" name="name" id="name" value="" />
<label>邮件地址
<span class="small">其他类似这样哦</span>
</label>
<input type="text" name="num" id="num" value="" />
<input class="sub" type="button" value="提交"/>
<div class="spacer"></div>
</form>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
