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

html 设置漂亮的表单样式，以下是代码：

1、编写一个from表单

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

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

<ol>

<li>

<legend>xyk类型</legend>

<ol>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ol>

</fieldset>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

</fieldset>

</form>

2、编写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、漂亮的表单生成。

CSS制作好看的网页表格

如果数据表格对于视力没有问题用户都难以阅读的话，那么想像一个那些用辅助技术(掌上设备)的人来说，它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.

1.summary 和 caption

第一元素是表格的caption，它基本上用做表格的标题.尽管这不是必须有的元素，但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签，用来描述表格的内容.与image的alt文本属性相似.

2.thead, tbody, tfoot

thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如，可以将所有列标题放在thead元素中，这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.

3.col 和 colgroup

行与列标题应该使用th标记而不是td，但是如果某些内容既是标题又是数据，那么它仍然使用td.表格标题可以设置为row或col的scope属性，定义它们是行标题还是列标题.

虽然tr元素使开发人员能够整行应用样式，但是很难整列应用样式.为了解决这个问题。

<!DOCTYPE html>

<title>Table</title>

</head>

<body>

<div id="toprectangle">学习目标一览</div>

<li>今天的内容&nbsp&&nbsp剩余</li>

<li>学习时间&nbsp&&nbsp限定时间</li>

<li>学习材料进度&nbsp&&nbsp剩余</li>

<li>达成个数&nbsp&&nbsp总数目</li>

</ul>

<li class="special">while...</li>

<li>50什么不认识</li>

</ul>

</div>

</body>

</html>

下面是CSS文件

* {

margin: 0

padding: 0

font-size: 15px

font-family: Arial, "Microsoft Yahei", "Arial Black"

font-weight: bold

text-shadow: 0px 0px 4px #666

letter-spacing: 1px

}

body {

background-color: #333

}

#maxcontainer {

position: relative

margin: 60px auto 0

width: 600px

height: 374px

border-radius: 4px

background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa))

background: -moz-linear-gradient(top, #eee, #aaa)

background: -o-linear-gradient(top, #eee, #aaa)

background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1)

}

#toprectangle {

position: relative

margin: 2px auto

top: 4px

width: 592px

height: 36px

line-height: 36px

text-align: center

text-shadow: 0px 0px 4px #aaa

box-shadow: 0px 0px 4px #333

border-radius: 4px

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D6D0FF), to(#9C8AFF))

background: -moz-linear-gradient(top, #D6D0FF, #9C8AFF)

background: -o-linear-gradient(top, #D6D0FF, #9C8AFF)

background: -ms-linear-gradient(#D6D0FF 0%,#9C8AFF 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D6D0FF',endColorstr='#9C8AFF',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D6D0FF',endColorstr='#9C8AFF',grandientType=1)

}

ul li {

position: relative

margin: 2px 0

float: left

height: 50px

line-height: 50px

color: white

text-align: center

box-shadow: 2px 0px 6px #333

border-radius: 4px

}

ul li:active {

box-shadow: inset 2px 2px 4px #666

}

#leftul, #rightul {

position: relative

list-style: none

float: left

margin: 2px

top: 2px

height: 252px

}

#leftul {

left: 2px

width: 166px

}

#rightul {

width: 426px

}

#leftul li {

width: 166px

background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffa34b), to(#ff6f00))

background: -moz-linear-gradient(top, #ffa34b, #ff6f00)

background: -o-linear-gradient(top, #ffa34b, #ff6f00)

background: -ms-linear-gradient(#ffa34b 0%,#ff6f00 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa34b',endColorstr='#ff6f00',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa34b',endColorstr='#ff6f00',grandientType=1)

}

#rightul li {

margin: 2px

width: 209px

text-align: left

text-indent: 8px

text-shadow: #999 0px 0px 4px

background: -webkit-gradient(linear, 0 0, 0 100%, from(#BCC5D1), to(#949EAC))

background: -moz-linear-gradient(top, #BCC5D1, #949EAC)

background: -o-linear-gradient(top, #BCC5D1, #949EAC)

background: -ms-linear-gradient(#BCC5D1 0%,#949EAC 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCC5D1',endColorstr='#949EAC',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCC5D1',endColorstr='#949EAC',grandientType=1)

}

#rightul .special {

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D9D7DD), to(#B2AEBD))

background: -moz-linear-gradient(top, #D9D7DD, #B2AEBD)

background: -o-linear-gradient(top, #D9D7DD, #B2AEBD)

background: -ms-linear-gradient(#D9D7DD 20%,#B2AEBD 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D9D7DD',endColorstr='#B2AEBD',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D9D7DD',endColorstr='#B2AEBD',grandientType=1)

}

#buttoncontainer {

position: relative

margin: 0px auto 0px

width: 356px

height: 60px

}

.btn1 {

position: relaive

float: left

width: 40%

height: 60px

border: 0px

border-radius: 4px

color: white

box-shadow: 0px 4px 8px #333

background: -webkit-gradient(linear, 0 0, 0 100%, from(#AD9BFF), to(#8B79EE))

background: -moz-linear-gradient(top, #AD9BFF, #8B79EE)

background: -o-linear-gradient(top, #AD9BFF, #8B79EE)

background: -ms-linear-gradient(#AD9BFF 0%,#8B79EE 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AD9BFF',endColorstr='#8B79EE',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AD9BFF',endColorstr='#8B79EE',grandientType=1)

}

.btn1:active {

line-height: 62px

text-indent: 2px

text-shadow: 0px 0px 4px #333

}

.btn2 {

position: relaive

float: right

width: 40%

height: 60px

border: 0px

border-radius: 4px

box-shadow: 0px 2px 8px #333

text-shadow: 0px 0px 4px #CCC

background: -webkit-gradient(linear, 0 0, 0 100%, from(#DBD5FF), to(#AD9BFF))

background: -moz-linear-gradient(top, #DBD5FF, #AD9BFF)

background: -o-linear-gradient(top, #DBD5FF, #AD9BFF)

background: -ms-linear-gradient(#DBD5FF 0%,#AD9BFF 100%)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBD5FF',endColorstr='#AD9BFF',grandientType=1)

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBD5FF',endColorstr='#AD9BFF',grandientType=1)

}

.btn2:active {

line-height: 62px

text-indent: 2px

text-shadow: 0px 0px 4px #ccc

}

.clear {

line-height: 0px

clear: both

}

以上，是完整的代码。用到了CSS3，所以浏览的时候用比较新的版本的浏览器效果会更好。

下面是在Chrome下浏览的截图：

渐变效果 CSS HACK 参考：琼台博客《CSS3实现背景颜色线性渐变gradient》

文章的链接地址：http://www.qttc.net/201304316.html

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7060670.html

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

发表评论

评论列表（0条）