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

html做个表格的步骤如下：

1、首先新建一个html，点击<body></body>中间，先填入表格内容；

2、内容根据需求来写即可，示例代码如下：

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

3、然后在<head></head>中间输入样式表的样式；

4、样式也根据个人的需求来设置即可，设置单元格的宽度高度，合并单元格，位置，颜色等等，示例代码如下：

body

{

width:340px

height :800px

}

table

{

border-collapse :collapse

}

th,td

{

width:100px

height:40px

border :1px solid black

font-size:12px

text-align :center

}

</style>

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。

<!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

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

原文地址: http://outofmemory.cn/zaji/6177850.html

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

发表评论

评论列表（0条）