CSS表单美化之直接输入的Excel表格

2020-03-24 16:31:35

字体：大中小

来源：转载

供稿：网友

表单是我们在web开发中与客户交互必须要用到的，本文通过CSS可以让表单更加美观。我们将要实现下图的效果：

html
head
title CSS表单美化之直接输入的Excel表格 /title
style
!--
table.formdata{
border:1px solid #5F6F7E;
border-collapse:collapse;
font-family:Arial;
}
table.formdata caption{
text-align:left;
padding-bottom:6px;
}
table.formdata th{
border:1px solid #5F6F7E;
background-color:#E2E2E2;
color:#000000px;
text-align:left;
font-weight:normal;
padding:2px 8px 2px 6px;
margin:0px;
}
table.formdata td{
margin:0px;
padding:0px;
border:1px solid #ABABAB;/* 单元格边框 */
}
table.formdata input{
width:100px;
padding:1px 3px 1px 3px;
margin:0px;
border:none;/* 输入框不要边框 */
font-family:Arial;
}
.btn{
border:1px solid #0083f2;
font-family:Arial;
}
--
/style
style type="text/css"
!--
body{
background-color:#f8ffd3;
margin:0px; padding:0px;
}
table.banner{
background:url(banner_bg.jpg) repeat-x;
width:100%;
}
table.btn{
background:url(button1_bg.jpg) repeat-x;
width:100%;
}
#navigation{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#navigation li{
text-align:center; width:130px; height:32px;
background:url(button1.jpg) repeat-x;
float:left;
}
#navigation li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
color:#FFFFFF;
background:url(button2.jpg) no-repeat;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
--
/style /head
body
form method="post"
table
caption
公司销售统计表 2006～2009
/caption
tr
th /th
th scope="col" 2006 /th
th scope="col" 2007 /th
th scope="col" 2008 /th
th scope="col" 2009 /th
/tr
tr
th scope="row" 硬盘(Hard Disk) /th
td input type="text" name="harddisk2004" id="harddisk2004" /td
td input type="text" name="harddisk2005" id="harddisk2005" /td
td input type="text" name="harddisk2006" id="harddisk2006" /td
td input type="text" name="harddisk2007" id="harddisk2007" /td
/tr
tr
th scope="row" 主板(Mainboard) /th
td input type="text" name="mainboard2004" id="mainboard2004" /td
td input type="text" name="mainboard2005" id="mainboard2005" /td
td input type="text" name="mainboard2006" id="mainboard2006" /td
td input type="text" name="mainboard2007" id="mainboard2007" /td
/tr
tr
th scope="row" 内存条(Memory Disk) /th
td input type="text" name="memory2004" id="memory2004" /td
td input type="text" name="memory2005" id="memory2005" /td
td input type="text" name="memory2006" id="memory2006" /td
td input type="text" name="memory2007" id="memory2007" /td
/tr
tr
th scope="row" 机箱(Case) /th
td input type="text" name="case2004" id="case2004" /td
td input type="text" name="case2005" id="case2005" /td
td input type="text" name="case2006" id="case2006" /td
td input type="text" name="case2007" id="case2007" /td
/tr
tr
th scope="row" 电源(Power) /th
td input type="text" name="power2004" id="power2004" /td
td input type="text" name="power2005" id="power2005" /td
td input type="text" name="power2006" id="power2006" /td
td input type="text" name="power2007" id="power2007" /td
/tr
tr
th scope="row" CPU风扇(CPU Fan) /th
td input type="text" name="cpufan2004" id="cpufan2004" /td
td input type="text" name="cpufan2005" id="cpufan2005" /td
td input type="text" name="cpufan2006" id="cpufan2006" /td
td input type="text" name="cpufan2007" id="cpufan2007" /td
/tr
tr
th scope="row" 总计(Total) /th
td input type="text" name="total2004" id="total2004" /td
td input type="text" name="total2005" id="total2005" /td
td input type="text" name="total2006" id="total2006" /td
td input type="text" name="total2007" id="total2007" /td
/tr
/table
p input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data"
input type="reset" value="Reset All" /p
/form
/body
/htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：DIV+css完美实现Textarea效果

下一篇：怎样用CSS隐藏图片背景的文字内容