web基础，用html元素制作web页面

用div,form制作登录页面，尽可能做得漂亮。

<div  id="container" style="350px " >
    <div id="header" style="background-color:skyblue;"><h2 align="center" style="margin-bottom:0;">用户登录</h2></div>

    <div id="content" style="background-color:#EEEEEE;height:150px;350px;float:left;">
        <form action="">
            Username:<input type="text" name="username"><br>
            Password:<input type="password" name="password">
            <br>
            <input type="button" value="注册">
            <input type="button" value="登录">
            <input type="button" value="清除">
        </form>
        </form>
            <select>
             <ul>
              <li>  <option>选择</option></li>
              </li>   <option>学生</option></li>
              </li>   <option>教师</option></li>
                </li> <option>访客</option></li>
</ul>
            </select>
        </form>
            </div>
    <div id="footer" style="background-color:pink;clear:both;text-align:center;">版权 © duym</div>

</div>

练习使用下拉列表选择框，无序列表，有序列表，定义列表。

      </form>
            <select>
             <ul>
              <li>  <option>选择</option></li>
              </li>   <option>学生</option></li>
              </li>   <option>教师</option></li>
                </li> <option>访客</option></li>
</ul>
            </select>
        </form>

观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。

<div class="m-logobar">
    <h1><a href="http://reg.163.com/" target="_blank"><em>网易帐号中心</em><img src="/images2/logo.png?201503301558" alt="网易帐号中心" title="网易帐号中心" /></a></h1><i>|</i>
    <h2 class="f-ff1">登录</h2>
    <div class="notice"></div>
</div>
    </div></div>
    <div class="g-bd">
        <div class="g-in" style="position:relative; padding:46px 0;  height: 420px;">

            <iframe id="advList" frameBorder="0" scrolling="no" marginheight="0px" marginwidth="0px"
                style="display: block; 990px;height: 512px;position: absolute;bottom: 0px;left: 0px;"
                src="//g.163.com/r?site=netease&affiliate=reg&cat=login&type=logo990x512&location=1">
            </iframe>

            <div class="m-tab m-tab-small">
                <div class="tabHd">
                    <ul class="f-cbli">
                        <li rel="#loginByAccount" class="z-on"><a href="javascript:void(0);">普通登录</a></li>
                        <li rel="#loginByCode" style="position:relative; "><a href="javascript:void(0);">二维码登录</a><span class="u-new"></span></li>
                    </ul>
                </div>
                <div class="tabBd" style="position:relative;">
                    <div id="loginByAccount">
                        <!-- WebComponent -->
                        <style>body{height: auto;}  .tabBd{height:auto !important;min-height:280px !important;padding-bottom: 0 !important;}  #loginByAccount{margin: 0 !important;} #loginByCode{height: 290px !important;} .zj-login{height: 200px; padding-top: 35px;}  .loginLinks{padding-top:10px;padding-bottom:15px;padding-left:42px !important;text-align:left !important;color:#cecece !important;}</style>
                        <div class="zj-login" id="if-lg"></div>
                        <!-- END WebComponent -->
                    </div>
                    <div id="loginByCode" class="f-dn">
                        <form id="codeLoginForm" method="post" action="https://reg.163.com/services/ticketlogin" autocomplete="off" target="_self">
                            <input type="hidden" name="product" value="urs" />
                            <input type="hidden" name="noRedirect" value="1" />
                            <input type="hidden" id="ticket" name="ticket" value="" />
                            <div id="qrBox">
                                        <p class="qrMsg">