H5实例3-登录框效果.doc登录框效果更深层次地应用Html5和CSS3的样式设置,可以将原来平淡的网页装饰得非常华丽。比如一个常见的登录框,如下:用户£乜I用户名 ——密码蕊密冯 —|"记住登录状态登录网页的HTML代码如下:<body><divid■冃DLcontainexR><C11V<!-登录禾里・•><forrecla^a-^cd-fom"accion^Hactionmethod-MpostM><divC14i5S-"fi!-ld3*t"><lal^elclas3="cd-<>fflP-S</la^el><la33-"cd-tex^-najr:e=,,usernaiLewtype=wtextRplaceholder35AfflPS99aurorocus>@/dxv><dxvclass-"ficldset"><lah£lclas3="ed-p31atelt<>®^</王afc€JL><la33="cd-pa33w,nairie=Mpa33wordwt>rpe=npa8swoxclf*placeholder--^</div><divclass-"fi-ldset"><inputC!lrpe«"checitbcxMidsMremeinber-nie,tchecked><lafcel>记住登录状态</lafcel></div><dxvclass—"fi=ldset"><inputcla33«"cd-SLit«L£t"cype»w3LLt«nitnVallie^11登录”〉</div></fonr></div></dlv></body>所用到的HTML5的特性:placeholder-输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失required-指定该输入元索是否必须提供autofocus-指定输入框是否在页面加载完毕口动获取输入焦点type=”password”-指定密码输入(非HTML5专有)注意里面四个Sdivclass=nfieldsetn>|)是将表单分为四个平行的区域,分别放用户名输入框、密码输入框、记住状态单选框、登录按钮。网页代码就是这样,其它工作全部在样式表里完成,在网页头部加上样式表链接。<linkrel="stylesheetMhref=Mcss/"type="text/cssH/>,放在网站的css文件夹里,样式表屮的设计主要如下:第1步:body和最外面的名为DL_container的div的样式大{overflow:hidden;list-style-type:none;}body{font:12px/180%Arial,Helvetica,sans-serif,"新宋体”;}div#DL_container{margin:lOemauto;width:30em; |}*农示对所有标签要求的格式:不许溢岀占别的标签的位置,里而的所有项ri符号z类的全不可见。最外面的登录div容器是宽30个默认字符,离body顶端10个字符距离,左右居中。第2步:登录区域的div(类名为cd-login)样式divtcd・log丄n(width:90%;max-widLh:3Oem;margin:3emau^o;cursor:pointer;border-radius:0•5em;ba
H5实例3-登录框效果 来自淘豆网m.daumloan.com转载请标明出处.
