1、编写一个注册用户信息页面；

需求：
（1）表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍；
（2）输入完用户名后校验只能是”admin”，否则弹框提示错误
（3）点击提交执行后执行事件，把自我介绍的内容弹框提示出来；

<``style``>
``.zhuce``{
``width``: ``400px``;
``height``: ``400px``;
``padding-top``: ``5%``;
``padding-left``: ``40%``;
}
``#txt2``{
``width``: ``60%``;
``height``: ``150px``;
}

``#tijiao``{
``width``: ``100%``;
``height``: ``37px``;
``background``: ``cornflowerblue``;
}
</``style``>
<``body`` ``>
``<``div`` ``class``=``"zhuce"``>
``<``h1``>``用户注册中心``</``h1``>

``<``form`` ``>``
``<!-- action="baidu" method="GET" -->
``<``p``>``用户名:
``<``input`` ``id``=``"txt1"`` ``name``=``"txt1"`` ``type``=``"text"`` ``value``=``""`` ``placeholder``=``"请输入账号···"`` ``/>
``<``input`` ``type``=``"button"`` ``value``=``"校验"`` ``onclick``=``"``getValue``();``"`` ``/>
``</``p``>``

``<``p``>``密码: ``<``input`` ``type``=``"password"``></``p``>
``<``p``>``性别:
``<``input`` ``type``=``"radio"`` ``name``=``"sex"``>``男
``<``input`` ``type``=``"radio"`` ``name``=``"sex"``>``女
``</``p``>
``<``p``>``学历:
``<``input`` ``type``=``"radio"`` ``name``=``"xueli"``>``本科
``<``input`` ``type``=``"radio"`` ``name``=``"xueli"``>``大专
``</``p``>
``<``p`` ``>``自我介绍:
``<``input`` ``id``=``"txt2"`` ``name``=``"txt2"`` ``type``=``"text"`` ``value``=``" "`` ``placeholder``=``"请输入自我介绍"`` ``>``
``<``br``>
``<``br``>
``<``input`` ``id``=``"tijiao"`` ``type``=``"button"`` ``value``=``"提交"`` ``onclick``=``"``getValue``();``"``>
``</``p``>

``</``form``>
</``div``>

``<``script``>

``function`` ``getValue``(){
``var`` ``val``=``document``.``getElementById``(``"txt1"``).``value``;
``if``(``val`` != ``"admin"``){
``alert``(``"输入错误"``+``val``);
}``else``{
``alert``(``"验证通过"``+``" √"``)
}
}

``function`` ``getValue``(){
``var`` ``vall`` =``document``.``getElementById``(``"txt2"``).``value``;
``alert``(``vall``);
}

``</``script``>
</``body``>

2.当当网首页效果图

<``style``>
``.zhuce``{
``width``:``800px``;
``height``:``800px``;
}
``.left-top``{
``padding-left``: ``2.9%``;
}
``.right-top``{
``padding-left``:``75%``;
}
``.daohang``{
``padding-top``: ``10px``;
``width``: ``100%``;
``position``: ``relative``;
}
``li``{

``list-style-type``: ``none``; ``/*取消黑标*/
``color``: ``white``; ``/*字体颜色*/
``background-color``: ``rgba``(``240``, ``77``, ``13``, ``0.808``); ``/*背景颜色*/
``width``: ``90px``; ``/*宽度*/
``text-align``: ``center``; ``/*居中显示*/
``float``: ``left``; ``/*纵向水平方向显示*/
``line-height``: ``40px``; ``/*行高*/
``font-size``: ``0.5em``; ``/*纵向水平*/

}
``/*悬浮操作*/
``li:hover``{
``background-color``: ``orange``;
``line-height``: ``50px``;
}

``.tushubang``{
``padding-left``: ``2.74%``;
``width``: ``100%``;
``position``: ``relative``;
``top``: ``10px``;
}
``.changxiaobang``{
``height``: ``400px``;
``width``: ``100%``;
``border``: ``2px`` ``solid`` ``rgb``(``44``, ``236``, ``92``);
``margin-left``: ``30%``;
``margin``: ``30px``;
}
``.c-left-top``{
``margin``: ``15px``;
``margin-left``: ``-14px``;
}


``.bookNo1``{
``/* // margin-top: 1px; */
``margin-left``: ``25px``;
``position``: ``relative``;
``position``:``absolute``;
}
``.book-01``{
``margin-top``: ``20px``;
``margin-left``:``3px``;

}
``.neirong``{
``font-size``: ``12px``;
``line-height``: ``10`` px;

``width``: ``210px``;
``margin-top``: ``-270px``;
``margin-left``: ``250px``;
}
``/* .tu-right{
float: right;
} */
``.bookNo2``{

``margin-left``: ``0px``;
``position``: ``relative``;
``position``:``absolute``;

}
``.book2``{
``margin-top``: ``-50px``;
``/* margin-left:3px; */
``margin-right``: ``200px``;
}
``.book2neirong``{
``font-size``: ``10px``;
``line-height``: ``2`` px;

``width``: ``210px``;
``margin-top``: ``-100px``;
``margin-left``: ``100px``;
}
``.tutwo``{
``margin-top``: ``-250px``;
}
``.tuthree``{
``margin-left``: ``75%``;
}
``.book3``{
``margin-top``: ``-20px``;
}
``.bookNo3``{
``position``: ``relative``;
``position``:``absolute``;
}
``.book3neirong``{
``font-size``: ``10px``;
``line-height``: ``2`` px;

``width``: ``210px``;
``margin-top``: ``-100px``;
``margin-left``: ``82%``;
}
</``style``>
<``body``>
<``div`` ``class``=``"zhuyemian"``>
``<``div`` ``class``=``"left-top"``>`` ``<``img`` ``src``=``"img\logo.jpg"`` ``>`` ``</``div``>``

``<``div`` ``class``=``"right-top"``>``

``<``div`` ``class``=``"top"``>`` ``<``img`` ``src``=``"img\icon_count.png"`` ``></``div``>
``<``div`` ``class``=``"down"``>
``<!-- <ul class="biaoqian">
<li >尾品会</li>
<li >当当优品</li>
<li>数字馆</li>
<li>都看阅器</li>

</ul> -->
``</``div``>

``</``div``>
``<``div`` ``class``=``"daohang"``>
``<``p`` ``class``=``"dao"``>
``<``ul``>
``<``li``>``首页``</``li``>
``<``li``>``音像``</``li``>
``<``li``>``图书``</``li``>
``<``li``>``童装``</``li``>
``<``li``>``鞋靴``</``li``>
``<``li``>``运动``</``li``>
``<``li``>``箱包``</``li``>
``<``li``>``美妆``</``li``>
``<``li``>``珠宝``</``li``>
``<``li``>``家居``</``li``>
``<``li``>``食品``</``li``>
``<``li``>``酒``</``li``>
``<``li``>``手机``</``li``>
``<``li``>``数码``</``li``>
``<``li``>``电脑``</``li``>
``<``li``>``家电``</``li``>
``</``ul``>
``</``p``>
``</``div``>
``<``div`` ``class``=``"tushubang"``>
``<``img`` ``src``=``"img\banner.png"``/>
``</``div``>
``<``div`` ``class``=``"changxiaobang"``>
``<``div`` ``class``=``"c-left-top"``>
``<``img`` ``src``=``"img/bg_bang.gif"`` ``>
``</``div``>
``<``div`` ``class``=``"left"``>
``<``div`` ``class``=``"b-left-top-No1"``>
``<``div`` ``class``=``"bookNo1"``>
``<``img`` ``src``=``"img/bookNo1.gif"`` ``>
``</``div``>
``<``div`` ``class``=``"book-01"``>
``<``img`` ``src``=``"img/book-01.jpg"`` ``>
``</``div``>

``<``div`` ``class``=``"neirong"``>
``<``h5`` ``style``=``"``color: blue;``"``>``偷影子的人``</``h5``>``
``<``p``>``作者：[法] 马克·李维（Marc Levy）著``</``p``>
``<``p``>``出版社：湖南文艺出版社``</``p``>
``<``p``>``当当价：￥17.90``</``p``>
``<``p``>``不知道姓氏的克蕾儿。就这事你在我生命里的角色，我同年的小女孩，
今日蜕变成了女人，一段青梅竹马的回忆，一个事件之神没有应允的愿望
一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”

``</``p``>
``</``div``>
``</``div``>
``</``div``>
``<``div`` ``class``=``"tu-right"``>
``<``div`` ``class``=``"right-top"``>
``<``div`` ``class``=``"tutwo"``>
``<``div`` ``class``=``"bookNo2"``>
``<``img`` ``src``=``"img/bookNo2.gif"``>
``</``div``>
``<``div`` ``class``=``"book2"``>
``<``img`` ``src``=``"img/book-02.jpg"`` ``>
``</``div``>
``</``div``>
``<``div`` ``class``=``"book2neirong"``>
``<``h5`` ``style``=``"``color: blue;``"``>``看见（央视知名记者，主持人柴静：十年个人成长的告白，中国社会变迁的备忘）``</``h5``>
``<``p``>``作者：柴静 著``</``p``>
``<``p``>``出版社：广西师法大学出版社``</``p``>
``<``p``>``￥29.4 7.4折``</``p``>

``</``div``>

``</``div``>
``<``div`` ``class``=``"right-down"``>
``<``div`` ``class``=``"tuthree"``>
``<``div`` ``class``=``"bookNo3"``>
``<``img`` ``src``=``"img/bookNo3.gif"`` ``>
``</``div``>
``<``div`` ``class``=``"book3"``>
``<``img`` ``src``=``"img/book-03.jpg"`` ``>
``</``div``>
``</``div``>
``<``div`` ``class``=``"book3neirong"`` ``>
``<``h5`` ``style``=``"``color: blue;``"``>``改变海自先改变自己``</``h5``>
``<``p``>``作者：贾蓉滔 贾毅 著``</``p``>
``<``p``>``出版社：作家出版社``</``p``>
``<``p``>``￥22.2 7.4折``</``p``>
``</``div``>

``</``div``>
``</``div``>
``</``div``>
``<``div`` ``class``=``"dibu"`` ``style``=``"``text-align: center;``"``>
Copyriht (C)当当网 2014-2017，All rights Reserved ``<``img`` ``src``=``"img/validate.gif"`` ``>
京ICP证041189号出版物经营许可证 新出发京批字第0673号
``</``div``>
</``div``>
</``body``>