尝试制作淘宝的注册协议
第一次尝试写博客，内心紧张又激动，刚开始接触前端知识，希望这一篇是一个好的开始。废话不多说进入我们的正题：制作淘宝的注册协议，下面请看写协议的截图。当然不是这整个界面，只是这个中间的协议，哈哈哈希望小白的我以后能制作整个。
思路图如下
首先大家先看一下我的html具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝协议</title>
<style type="text/css">
.word_1{
font-size: 12px;
}
a{
font-weight: 700;
}
a.word_2{
text-decoration: underline;
}
p>a{
font-size: 14px;
color: #ff5b20;text-decoration: none;
}
p>a:hover{
text-decoration: underline;
}
</style>
</head>
<body style="font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;">
<center>
<br /><br /><br /><br /><br /><br />
<div style="width: 680px;height: 550px;
border: 2px solid #dedede;border-top: 2px solid #ff4a00;
padding: 20px" align="left">
<h3 style="font-size: 16px;">注册协议</h3>
<div class="word_1">
<a>
【审慎阅读】
</a>
您在申请注册流程中点击同意前，应当认真阅读以下协议。
<a class="word_2">
请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
</a><br /><br />
1、<a class="word_2">
与您约定免除或限制责任的条款；
</a><br /><br />
2、<a class="word_2">
您约定法律适用和管辖的条款；
</a><br /><br />
3、<a class="word_2">
其他以粗体下划线标识的重要条款。
</a><br /><br />
如您对协议有任何疑问，可向平台客服咨询。<br /><br />
<a>
【特别提示】
</a>
当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，
即表示您已充分阅读、理解并接受协议的全部内容。
如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。
如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。<br /><br />
<a class="word_2">
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。
</a>
<br />
<p>
<a href="#">淘宝平台服务协议</a><br><br />
<a href="#">隐私权政策</a><br><br />
<a href="#">法律声明</a><br><br />
<a href="#">支付宝及客户端服务协议</a><br><br />
</p>
<div align="center">
<button style="color: white;font-weight: 560;font-size: 16px;
width: 180px;height: 36px;background: #ff4001;border: 0;">同意协议</button>
</div>
</div>
</div>
</center>
</body>
</html>
1.第一步我们需要的考虑这个协议的框，它是一个灰色但上部分为橙色的小框，所以我们要制作一个盒子，因为是个单独的大盒子所以我直接用了内联样式，经过我的测量和检视量出它宽680px高550px，边框为2px颜色为#ff4a00，而边框顶部颜色为#ff4a00，，整体居右，便写下如下代码在body中。
<div style="width: 680px;height: 550px;
border: 2px solid #dedede;border-top: 2px solid #ff4a00;
padding: 20px" align="left"><div>
2.第二步我们看一下整体的字样，有5种字样：标题字样、黑的字体、黑的带下划线的字体、普通字体、橙色字体，大体分为这五种，我们先写出标题的样式，如下代码
<h3 style="font-size: 16px;">注册协议</h3>
因为标题是个相对单独的字样所以我直接用了内敛样式，如检视的修改了它的大小。
接下来是黑色的字体和普通字体穿插的文本，我便用a标签包裹着所有需要变黑的文字，经检视发现是改变它的font-weight为70，在内部样式中把要a中样式加粗，把那些a中需要加下划线的标签赋予相同的class选择器为word_2，并同样在内部样式中用a.class修改加上下划线，其中穿插这普通的文本，具体的代码如下
<style type="text/css">
a{
font-weight: 700;
}
a.word_2{
text-decoration: underline;
}
</style>
<a>
【审慎阅读】
</a>
您在申请注册流程中点击同意前，应当认真阅读以下协议。
<a class="word_2">
请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
</a><br /><br />
1、<a class="word_2">
与您约定免除或限制责任的条款；
</a><br /><br />
2、<a class="word_2">
您约定法律适用和管辖的条款；
</a><br /><br />
3、<a class="word_2">
其他以粗体下划线标识的重要条款。
</a><br /><br />
如您对协议有任何疑问，可向平台客服咨询。<br /><br />
<a>
【特别提示】
</a>
当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，
即表示您已充分阅读、理解并接受协议的全部内容。
如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。
如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。<br /><br />
<a class="word_2">
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。
</a>
接下来是橙色的文字，仔细看发现它有所不同，不仅字体不同并且有独立的超链接，鼠标碰上的时候还会有下划线出来，我便先用p标签把他们装起来，当然这些也被上面a选择器包含其中不过也确实需要加粗，然后每一排文字再用a标签赋予它单独的超链接，因为只是简单界面制作不设出具体的链接运用，所以链接中写，在内部样式中运用p>a字体修改大小颜色和去掉下划线，再应用hover伪类选择器把触碰时候的出现的下划线表达出，具体代码如下
<style type="text/css">
p>a{
font-size: 14px;
color: #ff5b20;text-decoration: none;
}
p>a:hover{
text-decoration: underline;
}
</style>
<p>
<a href="#">淘宝平台服务协议</a><br><br />
<a href="#">隐私权政策</a><br><br />
<a href="#">法律声明</a><br><br />
<a href="#">支付宝及客户端服务协议</a><br><br />
</p>
当我制作完这些字体后我发现字样还是和整体协议有所不同，经过我的检视发现了需要给所有字体和增加样式，当然我没太看懂这是个什么具体样式，不过我就直接就添加在body中了，哈哈哈，多研究研究，具体代码如下
<body style="font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;">
3.最后一个是制作橙色的同意按钮，因为只有一个我就直接用内联样式，把它包在一个div里面，运用button标签设为按钮，对照着检视后的结果改大小颜色和背景颜色代码如下
<div align="center">
<button style="color: white;font-weight: 560;font-size: 16px;
width: 180px;height: 36px;background: #ff4001;border: 0;">同意协议</button>
</div>
检查一下具体的代码和结果，最终制作完成，完成效果图如下
总的来说一个小项目完成还是有很多的成就感，还有很多前端的知识需要去学习，希望自己能在后来的学习中能保持初心和激情成为一个合格靠谱的前端程序员，在csdn中能发表出属于自己独特项目，哈哈哈真期待看到以后再回头看自己第一篇的样子。
END
