汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

CSS代替表单并对字段分组

作者:admin 发布时间:2019-08-11

CSS代替表单并对字段分组fieldset legend标签

如果对网页有特殊的要求,可以直接摒弃表格,用CSS来代替它,但是这显然要麻烦一些,但是还是可以实现的,观察ZBLOG,是全CSS布局的,今天我来做个实验。

CSS代码:

style type= text/css

!--

body{

background-color:#FFFFFF;

color:#000000;

font-size:90%;

}

form{

width:500px;

background-color:#FFFFFF;

border:1px solid #CCCCCC;

padding:0.5em;

border-collapse:collapse;

}

form div{

clear:left;

margin-top:0.3em;

}

form label{

padding-top:3px;

float:left;

text-align:left;

width:100px;

font:bold Arial, Helvetica, sans-serif;

}

form ledgend{

font:bold 110% Arial, Helvetica, sans-serif;

}

form fieldset{

border:1px dashed #CCCCCC;

}

 

--

/style

HTML代码:

form id= form1 name= form1 method= post action= fieldset legend id and password

/legend

    div

label for= id id /label

    input type= text name= id id= id >

/div

    div

label for= textfield password /label

    input type= password name= psw id= psw >

/div

/fieldset

 

fieldset legend personal /legend

div

label for= textfield name /label

input type= text name= textfield2 id= textfield2 >

/div

div

label for= textfield sex /label

  input type= radio name= sex value= 单选 /

    male

  input type= radio name= sex value= 单选 /

    female

/div

div

label for= textfield E-Mail /label

input type= text name= textfield id= textfield >

/div

div

label for= address address /label

input type= text name= address id= address >

/div

/fieldset

/form

运行效果截图:

CSS代替表单并对字段分组

CSS代替表单并对字段分组fieldset legend标签

我觉得这种效果是非常的棒,而且还可以更加细致话的定义其样式。相关:。

网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1