刚学html+css不到两周，自助制作的淘宝注册静态界面，效果还行，给自己鼓励一下。
源代码如下：
<!DOCTYPE html>
<html>
<head>
<title>淘宝网-用户注册</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
}
a:link,a:visited{
color:#6C6C6C;
text-decoration: none;
}
a:hover{
color:red;
}
.yetou{
background-color: #F5F5F5;
font-size: 15px;
width: 1430px;
height: 25px;
padding-top: 8px;
}
.qin1{
color:red;
}
.ytz{
margin-left: 80px;
color:#6C6C6C;
}
.yty{
margin-left: 300px;
color: #6C6C6C;
}
.taobao{
margin-top:12px;
margin-left: 70px;
border: 1px none red;
width: 300px;
height: 80px;
}
.yonghu{
position: relative;
font-size: 22px;
top:-20px;
font-family:"微软雅黑";
color:#3C3C3C;
}
.massage{
margin-left: 100px;
margin-top:30px;
font-size: 20px;
color:black;
}
.shuzi1{
border: 1px solid red;
width:80px;
height:80px;
border-radius: 100%;
padding-top:2px;
padding-bottom:2px;
padding-left:7.5px;
padding-right:7.5px;
background-color:#ff4000;
color:#fff;
margin-left:220px;
}
.shuzi2,.shuzi3,.shuzi4{
border: 1px solid #bbb;
width:80px;
height:80px;
border-radius: 100%;
padding-top:2px;
padding-bottom:2px;
padding-left:7.5px;
padding-right:7.5px;
background-color:#bbb;
color:#fff;
margin-left:30px;
}
.zhong{
margin-top:50px;
margin-left:450px;
width:600px;
height:420px;
border:1px solid #fff;
}
.shuxian{
font-size:15px;
color:#909099;
position: relative;
top:10px;
margin-left:5px;
}
</style>
</head>
<body>
<div class="yetou">
<span class="ytz"><span class="qin1" ><a href="https://login.taobao.com/member/login.jhtml?spm=a2145.7268393.1997563269.1.oZfdQv&f=top&redirectURL=https%3A%2F%2Freg.taobao.com%2Fmember%2Freg%2Ffill_mobile.htm" style="color:red;">亲，请登录</a></span>
<span><a href="https://reg.taobao.com/member/reg/fill_mobile.htm">免费注册</a></span>
<span><a href="https://mpage.taobao.com/hd/download.html?spm=a2145.7268393.1997563273.1.qPvvWC">手机逛淘宝</a></span>
<span class="yty">
<span><a href="https://www.taobao.com/?spm=a2145.7268393.1581860521.1.rIkVSW" style="color:red;">淘宝网首页</a></span>
<span>
<select style="border:1px none;font-size:15px;color:#3C3C3C;
background:#f5f5f5; width:82px;">
<option>我的淘宝</option>
<option>已买到的宝贝</option>
<option>我的足迹</option>
<option>爱逛街</option>
<option>淘宝达人</option>
<option>新欢</option>
</select>
</span>
<span>
<select style="border:1px none;font-size:15px;color:#3C3C3C;
background:#f5f5f5; width:79px;">
<option><a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&style=&sub=true&redirect_url=http%3A%2F%2Fshoucang.taobao.com%2Fshop_collect_list_n.htm%3Fspm%3Da21bo.50862.1997525053.1.hEgFJ5">购物车0</a></option>
</select>
</span>
<span>
<select style="border:1px none;font-size:15px;color:#3C3C3C;
background:#f5f5f5; width:70px;">
<option>收藏夹</option>
<option>收藏的宝贝</option>
<option>收藏的店铺</option>
</select>
</span>
<span><a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&style=&sub=true&redirect_url=http%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm%3Fspm%3Da2145.7268393.1997525053.1.6EpFhm">购物车</a></span>
<span><a href="https://www.taobao.com/markets/tbhome/market-list?spm=a2145.7268393.1997563209.1.JKzfVI">商品分类</a></span>
<span>
<select style="border:1px none;font-size:15px;color:#3C3C3C;
background:#f5f5f5; width:95px;">
<option>| 卖家中心</option>
<option>免费开店</option>
<option>已卖出的宝贝</option>
<option>出售中的宝贝</option>
<option>卖家服务市场</option>
<option>卖家培训中心</option>
</select>
</a></span>
<span>
<select style="border:1px none;font-size:15px;color:#3C3C3C;
background:#f5f5f5; width:90px;">
<option>联系客服</option>
<option>消费者客服</option>
<option>卖家客服</option>
</select>
</a></span>
<span><a href="https://www.taobao.com/sitemap.php?spm=a2145.7268393.1997525077.1.NP2jx5&id=sitemap2">网站导航</a></span>
</div>
<div class="taobao">
<span><img src="taobao.png"></span>
<span class="yonghu">用户注册</span>
</div>
<div class="massage">
<span class="shuzi1">1</span><b style="margin-left:5px">设置登录名</b>
<span class="shuzi2">2</span><b style="color:#000;margin-left:5px">填写账户信息</b>
<span class="shuzi3">3</span><b style="color:#000;margin-left:5px">设置支付方式</b>
<span class="shuzi4">4</span><b style="color:#000;margin-left:5px">注册成功</b>
<span style="border:1px solid #bbb;font-size:10px; padding:3px;margin-left:235px;">中文</span><span style="font-size:10px; margin-left:3px;">|<span style="border:1px solid #bbb;font-size:10px; padding:3px;margin-left:3px">English</span>
</div>
<hr style="width:1260px; margin-left:70px;position: relative;top:10px;" color="#bbb">
<b><hr style="width:160px; margin-left:310px;position: relative;top:7px;" color="ff4000"></b>
<div class="zhong">
<span><span>所在国家/地区</span>
<select style="border:1px solid #ccc;font-size:15px;color:black;
background:#fff; width:120px;border-radius:5px;padding:1px;">
<option>中国大陆</option>
</select>
</span>
<div style="padding-top:30px;padding-left:30px"">手机号码
<input type="text" name="" placeholder="+86" style="width:50px;height:35px;font-size:18px;padding-top:5px;padding-left:15px;background:#EDEDED;border:1px solid #bbb;" disabled>
<input type="text" name="" style="width:200px;height:37px;font-size:18px;background:#fff;position: relative;left:-10px;top:-2px;">
</div>
<div style="padding-top:20px;padding-left:30px">手机号码
<input type="text" name="" placeholder="+86" style="width:50px;height:35px;font-size:18px;padding-top:5px;padding-left:15px;background:#EDEDED;border:1px solid #bbb;" disabled>
<input type="text" name="" style="width:200px;height:37px;font-size:18px;background:#fff;position: relative;left:-10px;top:-2px;">
</div>
<div style="padding-top:20px;padding-left:30px"">手机号码
<input type="text" name="" placeholder="+86" style="width:50px;height:35px;font-size:18px;padding-top:5px;padding-left:15px;background:#EDEDED;border:1px solid #bbb;" disabled>
<input type="text" name="" style="width:200px;height:37px;font-size:18px;background:#fff;position: relative;left:-10px;top:-2px;">
</div>
<div style="padding-top:20px;padding-left:50px">验证码
<input type="text" name="" style="width:150px;height:37px;font-size:18px;background:#fff;position: relative;left:-10px;top:-2px;">
<img src="https://passport.baidu.com/cgi-bin/genimage?jxG2106f41f5d7ee20f02ae1486fd01b4ccba06de0606013833" style=" position: relative;left:10px;top:10px;width:150px;height:37px;">
<span style="color:red"><a href="file:///C:/Users/%E5%BC%A0%E9%9C%87/Desktop/%E6%B7%98%E5%AE%9D%E7%99%BB%E9%99%86%E7%95%8C%E9%9D%A2/%E6%B7%98%E5%AE%9D%E7%99%BB%E9%99%86%E7%95%8C%E9%9D%A2.html">看不清？换张图片</a></span>
</div>
<div style="padding-top:20px;padding-left:110px">
<input type="checkbox" name=""><span style="font-size:13px; position: relative;left:5px;top:-2px;">同意<span><a href="https://www.taobao.com/go/chn/member/agreement.php?spm=a2145.7275745.0.0.slo1Fr" style="color:red"><<淘宝服务协议>></a></span></span>
</div>
<div>
<input type="submit" name="" value="下一步" style="font-size:20px; font-weight:bold;position: relative;left:110px;top:30px;width:200px;height:40px;color:#fff;background:red; border:1px;border-radius:5px;">
</div>
</div>
<hr style="width:1260px; margin-left:70px;position: relative;top:10px;" color="#ccc">
<div style="border:1px solid #fff;margin-top:15px;font-size:13px;">
<span style="position: relative;top:10px;color:#909092;margin-left:70px;margin-top:50px;margin-bottom:50px font-size:5px;"><a href="http://www.alibabagroup.com/cn/global/home">阿里巴巴集团</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.alibaba.com/?spm=a2145.7268393.0.0.90NELq">阿里巴巴国际站</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.1688.com/?spm=a2145.7268393.0.0.Msm4Yq">阿里巴巴中国站</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.aliexpress.com/?spm=a2145.7268393.0.0.Nu3SzS">全球速卖通</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.taobao.com/?spm=a2145.7268393.0.0.5TlYvh">淘宝网</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.tmall.com/?spm=a2145.7268393.0.0.GciCHZ">天猫</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://ju.taobao.com/?spm=a2145.7268393.0.0.tWKd9p">聚划算</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="http://www.etao.com/?spm=a2145.7268393.0.0.aBZ2pO">一淘</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="http://www.alimama.com/index.htm?spm=a2145.7268393.0.0.aCVXOX">阿里妈妈</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.aliyun.com/?spm=a2145.7268393.0.0.FmOwhw">阿里云计算</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.yunos.com/?spm=a2145.7268393.0.0.CgaXAj">云OS</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://wanwang.aliyun.com/?spm=a2145.7268393.0.0.dXnYOX">万网</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.alipay.com/">支付宝</a></span>
</div>
<hr style="width:1260px; margin-left:70px;position: relative;top:25px;" color="#ccc">
<div>
<div style="font-size:13px;margin-top:20px;">
<span style="position: relative;top:10px;color:#909092;margin-left:70px;margin-top:50px;margin-bottom:50px font-size:5px;"><a href="https://www.taobao.com/about/?spm=a2145.7268393.0.0.NZB3Jf">关于淘宝</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.taobao.com/about/?spm=a2145.7268393.0.0.NZB3Jf">合作伙伴</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="http://pro.taobao.com/index.htm?spm=a2145.7268393.0.0.ed8qKp">营销中心</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://service.taobao.com/support/main/service_route.htm?spm=a2145.7268393.0.0.xyIAL5">联系客服</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://open.taobao.com/?spm=a2145.7268393.0.0.X8eEnd">开放平台</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://job.alibaba.com/zhaopin/index.htm">诚征英才</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.taobao.com/about/contact.php?spm=a2145.7268393.0.0.cMN5Pj">联系我们</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.taobao.com/sitemap.php?spm=a2145.7268393.0.0.TQ0uQt">网站地图</a></span><span class="shuxian">|</span>
<span style="position: relative;top:10px;color:#909092;margin-left:5px;margin-top:50px;margin-bottom:50px "><a href="https://www.taobao.com/go/chn/tb-fp/2014/law.php?spm=a2145.7268393.0.0.RXGIAi">法律声明</a></span>
<span style="font-size:15px;color:#5E5F5F;position: relative;top:10px;left:50px;">© 2016 Taobao.com 版权所有</span>
</div>
<span style="font-size:15px;color:#5E5F5F;position: relative;top:20px;left:70px;">网络文化经营许可证：<span><a href="https://img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a></span> | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号</span>
<div style="border:1px solid #fff;margin-top:500px">></div>
</body>
</html>
