• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

简练纯洁的CSS表单规划实例

来历: www.tbea-hb.com 修正:织梦吧 时刻:2018-09-19点击:


许多CSS爱好者不喜爱HTML表格,尤其是在制造表单的时分,尽管现在已经是XHTML+CSS的时代,但表单的规划大多还在选用table来布局。那 么,有没有更好的运用纯语义化XHTML+CSS规划表单办法呢?今日让咱们一起来测验这种更契合语义化的办法来替代Table嵌套的表单元素吧!

在这里我要说,并不是要彻底摒弃table的运用,它有它的语义化布局效果,尤其是在存储数据的时分。我在大多数情况下会运用纯CSS来规划表单, 可是,我也很喜爱表格,只需咱们能在正确的当地运用正确的元素就能够了,不要过分寻求所谓的DIV+CSS。直接运用table要比运用CSS来”模仿” (display:table;)表格更便利更快速。下面暴风彬彬将共享一种运用纯CSS替代HTML表格元素规划表单的办法。

您能够下载源代码并运用在自己的网站项目中。

第一步:HTML代码

创立一个新页面index.html,然后仿制并张贴以下代码到

标签内。

 


    

        

Sign-up form


        

This is the basic look of my form without table


        
       
      
      
      
      
      
      
 

    

 

  经过上面的代码,你是否能看出它的视觉款式呢?下面是咱们的CSS表单结构图示:

我为每个input元素运用了

第二步:CSS代码

仿制并张贴以下代码到你页面中的

标签中的 内。(也能够独自存储到CSS文件中)

body{
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
    margin:0 auto;
    width:400px;
    padding:14px;
}
/* ———– stylized ———– */
#stylized{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}
#stylized p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;
    font-weight:bold;
    text-align:right;
    width:140px;
    float:left;
}
#stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
}
#stylized button{
    clear:both;
    margin-left:150px;
    width:125px;
    height:31px;
    background:#666666 url(img/button.png) no-repeat;
    text-align:center;
    line-height:31px;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
}

以上仅仅是表单布局的一种办法,您也能够依照您的喜好来修正源代码并从头运用它。
假如您关于CSS表单布局有其它不同的或更好的主张的话,欢迎在此留下您名贵的谈论.

 

原文:
翻译:

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,