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隱藏圖片背景的文字內容