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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
</head>
<body>
<h1 align="left">登陆界面</h1>


 <div id="container" style="width: 400px">
     <div id="heads" style="background-color: aqua"><h2 style="background-color: chartreuse" align="center">登陆</h2></div>
     <div id="container" style="background-color: antiquewhite">
         <form>
             用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
             密码：<input type="password"><br>
             <input type="radio" name="role" value="stu">student
             <input type="radio" name="role" value="tea">teacher<br>
             <input type="checkbox" value="true"><span>记住密码</span><a href="https://123.sogou.com/?22574">登陆遇到问题</a><br>
             <input type="button" value="login" onclick="alert('登陆认证')"><br>
             <div>
              <select>
                  <option>收藏</option>
                  <option>拉黑</option>
                  <option>举报</option>
              </select>
          </div>
                <ol>
                    <li>汕头</li>
                    <li>茂名</li>
                    <li>汕尾</li>
                    <li>河北</li>
                </ol>
             <dl>
                 <dt>1</dt>
                 <dd>2</dd>
                 <dt>1</dt>
                 <dd>2</dd>
             </dl>
         </form>
         <div id="footer" style="background-color: antiquewhite">
           <p align="center"> <i>@版权</i></p>
         </div>


     </div>


 </div>
<div style="width: 400px">
<div style="background-color: cornflowerblue">
    <form>
                 热门点击
                 <a href="http://baike.sogou.com/v61756.htm?fromTitle=%E9%A9%AC%E4%BA%91"><ul>郑铭洲的创业事迹</ul></a>
                 <a href="http://www.hxnews.com/news/yl/mxbg/201709/06/1295014.shtml"><ul>郑明州出轨门</ul></a>
                 <a href=""><ul>郑命洲有3条腿</ul></a>
        </form>
             </div>
</div>

</body>
</html>

posted on 2017-10-17 14:43 201506050009曹艺健阅读(137) 评论(0) 编辑收藏举报