注册界面设计（01）——精美电子商务网站赏析
【出处】http://www.globalzoo.de/globalzoo/registrieren.php
一、效果
二、HTML
<!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> <title>无标题页</title> <link href="App_Themes/NetShop/reset.css" rel="stylesheet" type="text/css" /> <link href="App_Themes/NetShop/StyleSheet.css" rel="stylesheet" type="text/css" /></head><body><div class="start-left"><table cellpadding="8" cellspacing="0" class="border-top"> <tr> <td class='label'> Benutzername<br /> <span class='font-optional'>[nicht ver?nderbar]</span> </td> <td class='formelement'> <input type='text' class='s-large' name='nick' value='' maxlength='18' /> </td> </tr> <tr> <td class='label'> E-Mail-Adresse<br /> <span class='font-optional'>[wird nie angezeigt]</span> </td> <td class='formelement'> <input type='text' class='s-large' name='acc_email' value='' maxlength='120' /> </td> </tr> <tr class='trenner'> <td class='label'> Wirklicher Name </td> <td class='formelement'> <input type='text' class='s-large' name='name' value='' maxlength='100' /> </td> </tr> <tr> <td class='label'> Geburtstag </td> <td class='formelement'> <input type='text' class='middle' name='geburtstag' value='01.01.1985' id='in1a5a265' /><input type='button' value=' ' onclick='displayCalendar(document.getElementById("in1a5a265"),"dd.mm.yyyy",this)' class='calendar-icon' /> </td> </tr> <tr> <td class='label'> Geschlecht </td> <td class='formelement'> <input type='radio' class='no-border' value='0' name='geschlecht' checked='checked' />m?nnlich <input type='radio' class='no-border' value='1' name='geschlecht' />weiblich </td> </tr> <tr> <td class='label'> Meine Heimat </td> <td class='formelement'> <select name='land'> <option value='-1' selected='selected'>Bitte w?hlen</option> <option value='0'>Deutschland</option> <option value='1'>- Baden-Württemberg</option> <option value='2'>- Bayern</option> <option value='3'>- Berlin</option> <option value='4'>- Brandenburg</option> <option value='5'>- Bremen</option> <option value='6'>- Hamburg</option> <option value='7'>- Hessen</option> <option value='8'>- Mecklenburg-Vorpommern</option> <option value='9'>- Niedersachsen</option> <option value='10'>- Nordrhein-Westfalen</option> <option value='11'>- Rheinland-Pfalz</option> <option value='12'>- Saarland</option> <option value='13'>- Sachsen</option> <option value='14'>- Sachsen-Anhalt</option> <option value='15'>- Schleswig-Holstein</option> <option value='16'>- Thüringen</option> <option value='17'>?sterreich</option> <option value='18'>Schweiz</option> <option value='19'>Anderes Land</option> </select> </td> </tr> <tr> <td class='label'> Momentan bin ich in </td> <td class='formelement'> <script type="text/javascript">Event.observe(window, 'load', function(e){ // instances of core classes var gc1781099 = new GeonameCompleter('geonameNotSet1781099','geonameSet1781099', 'geonameResults1781099', {'isset':false}); //GMload();}); </script> <div id="geonameNotSet1781099"> <input class="large" value="Ort oder Land eingeben" onfocus="this.select();if(this.value==this.defaultValue){ this.value=''; }" onblur="if(this.value==''){ this.value=this.defaultValue;}" style="width: 160px;" type="text" /> <div class="indicator"> <img src="http://www.globalzoo.de/pix/ajaxindicator.gif" alt="bitte warten" /> Bitte warten..</div> <div class="trigger"> <a href="#">best?tigen</a></div> </div> <div id="geonameSet1781099"> <span></span> <input type="hidden" name="geo_combined" value="" /> <a href="#">[?ndern]</a> </div> <div id="geonameResults1781099" class="ajaxupdate" style="display: none;"> </div> </td> </tr> <tr> <td class='label'> Passwort<br /> <span class='font-optional'>[2 Mal eingeben]</span> </td> <td class='formelement'> <input type='password' class='middle' name='acc_pw' style='width: 95px;' /> <input type='password' class='middle' name='acc_pw_2' style='width: 95px;' /> </td> </tr> <tr> <td class='label'> </td> <td class='formelement'> <input name="agb_ok" type="checkbox" value="1" class="no-border" /> Ja, ich habe die <a href="../popup/rechtliches.php" onclick="new_window2('target','540','520')" target="target" rel="nofollow">Nutzungsbedingungen</a> und <a href="../popup/rechtliches-f1.php" onclick="new_window2('target','540','520')" target="target" rel="nofollow">Datenschutz-Hinweise</a> gelesen und akzeptiert. </td> </tr> <tr> <td class="label"> </td> <td class="formelement"> <input name="" value="Jetzt Mitglied werden" type="submit" class="submit s-large submit-large" /> </td> </tr></table></div></body></html>
二、CSS
body{ background: #f3f0ea url(../pix/bg-nav.gif) repeat-x; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; padding: 0; margin: 0; border: 0; color: #413f3b; line-height: 1.4em;}a:link, a:visited{ color: #fa0d3a; text-decoration: none; font-weight: bold;}a:active, a:hover{ color: #fa0d3a; text-decoration: underline;}.start-left{ width: 465px; float: left;}/* Tables ######################################################### */table{ margin: 0; width: 100%; font-size: 1em;}table tr td{ border-bottom: 1px solid #e2e2e2; border-top: 1px solid #fff;}table tr{ background: #f5f4f2;}tr.hovered{ background: #eceae6;}table.border-top{ margin-top: 15px; border-top: 1px solid #e2e2e2;}td.right{ text-align: right;}tr.trenner td{ border-top: 10px solid #fff;}td.label{ width: 30%; font-weight: bold;}td.formelement{ width: 70%;}input.calendar-icon{ border: 0; background-color: transparent; margin: 0 0 2px 2px; background: url(../pix/icons-admin/calendar.gif) no-repeat; width: 16px; height: 16px; font-size: 0.01em; cursor: pointer;}input.s-large, select.s-large{ width: 280px;}input.middle{ width: 80px;}input.large{ width: 150px;}input.submit{ background: #fa1842 url(../pix/bg-nav-aktiv.gif) center repeat-x; border-top: 1px solid #FFF; border-left: 1px solid #FFF; border-bottom: 1px solid #000; border-right: 1px solid #000; font: 0.9em Arial, Helvetica, sans-serif; color: #FFF; font-weight: bold; padding: 0 5px; cursor: pointer;}input.submit-large{ padding-top: 4px; padding-bottom: 4px;}.font-optional{ color: #a4a4a4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; vertical-align: baseline; position: relative; bottom: 0.33em;}.no-border{ border: none;}div.trigger, div.indicator{ display: inline;}