table+css与xhtmL+css实现同一登陆框（代码片段）-优快云博客

本文介绍了一种使用XHTML和CSS实现的简洁登录框样式。作者通过学习XHTML对该样式进行了改进，并分享了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、从网上下载了一个不错的登录框样式（table结合css布局）；
2、初学xhtmL，自己改写了一下，希望有用。 下载代码示例

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >form表单—xhtml_css表示 </ title >
< style type ="text/css" >

    body,h2,h3,p,img,dl,dd,ul, ol,li { margin : 0 ; padding : 0 ; border : none ; font-size : 12px ; color : #666 }
    body { margin : 0 auto ; font-family : verdana, tahoma, sans-serif ; }
    ul,ol,li { list-style : none }
    a { text-decoration : none ; color : #666 }
    a:hover { color : #F60 ; }

    .login { width : 180px ; padding : 15px 10px ; }
    .login fieldset { border : 0 ; margin : 0px ; padding : 0px ; }
    .login legend { display : none }
    .login_title,.login_item,.login_footer { margin-top : 8px ; }
    .login_title p,.login_item .input_user,.login_item .input_pwd,.login_footer .login_btn { margin-top : 6px ; }


    .login_title h3 { height : 20px ; padding-top : 5px ; font-size : 10px ; font-weight : bold ; background-color : #F4F4F4 }
    .login_title img { width : 16px ; height : 16px ; }
    .login_title p { font-size : 12px ; color : #666666 }

    .login_item label { display : block ; }
    .login_item input { background : #FFFFFF ; border : 1px solid #CCCCCC ; color : #000000 ; font-size : 0.95em ; }
    .login_item .input_user { background-image : url(images/username.gif) ; background-position : 1px 1px ; background-repeat : no-repeat ; padding-left : 20px ; height : 20px ; FONT-SIZE : 12px ; }
    .login_item .input_pwd { background-image : url(images/password.gif) ; background-position : 1px 1px ; background-repeat : no-repeat ; padding-left : 20px ; height : 20px ; FONT-SIZE : 12px ; }

    .login_footer p { font-size : 10px ; color : #F60 }
    .login_footer .login_btn { width : 85px ; }

</ style >
</ head >
< body >
< div class ="login" >

     < form id ="" name ="" action ="" method ="post" >
         < fieldset >
             < legend >登陆 </ legend >
             < div class ="login_title" >
                 < h3 >< b >+用户登录 </ b ></ h3 >
                 < P >< img src ="images/warning.gif" align ="absmiddle" >请输入登陆的用户和密码 </ P >
             </ div >
             < div class ="login_item" >
                 < label for ="form_user" >用户名： </ label >
                 < input type ="text" class ="input_user" name ="form_user" id ="form_user" value ="" tabindex ="1" />
             </ div >
             < div class ="login_item" >
                 < label for ="form_pwd" >密   码： </ label >
                 < input type ="text" class ="input_pwd" name ="form_pwd" id ="form_pwd" value ="" tabindex ="2" />
             </ div >
             < div class ="login_footer" >
                 < p >忘记密码？ </ p >
                 < input type ="submit"   class ="login_btn" value ="登  录" tabindex ="3" />
             </ div >
         </ fieldset >

     </ form >

</ div >

</ body >
</ html >

转载于:https://www.cnblogs.com/lijinyong/archive/2011/12/07/2279828.html