<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/Registered.css"/>
</head>
<body>
<section>
<div class="center-box">
<ul>
<li><p><img src="img/logo.png"/></P></li>
<li class="height-1"> </li>
<li> </li>
<li class="height-text">注册小米账号</li>
<li> </li>
<li> </li>
<li class="height-text-size">国家/地区</li>
<li class="nav-search-box">
<div class="nav-search-box-top" style="border: none;">
<select name="check" class="top" style="border: none;" onChange="location.replace(this.options[this.selectedIndex].value)">
<option value="Registered.html">中国</option>
<option value="Registered-巴西.html">巴西</option>
<option value="Registered-智利.html">智利</option>
</select>
</div>
</li>
<li class="height-text-size-2">成功注册帐号后,国家/地区将不能被修改!</li>
<li class="height-text-size-3">手机号码</li>
<li class="nav-search-box">
<select name="check" onChange="location.replace(this.options[this.selectedIndex].value)">
<option value="Registered.html">+86</option>
<option value="Registered-巴西.html">+55</option>
<option value="Registered-智利.html">+56</option>
</select>
<input type="text" placeholder="请输入手机号码" />
</li>
<li> </li>
<li><input type="button" value="立即注册" class="demo" style="border: none;" /></li>
<li> </li>
<li> </li>
<li> </li>
<li class="height-text-size-4">已阅读并同意:小米<a href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html" target="_blank">用户协议</a>
和<a href="https://privacy.mi.com/miaccount/zh_CN/" target="_blank">隐私政策</a></li>
</ul>
</div>
</section>
<iframe src="footer-01.html" frameborder="0" class="footer"></iframe>
</body>
</html>
典型的注册界面只需要注意精灵图的插入与布局。
效果图如下: