码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-10-17 15:41:50      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:登录   back   span   二手   org   col   role   baidu   nbsp   


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


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


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


 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<a ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508221888488&di=b80076d16252e53d3f6424dac0940423&imgtype=0&src=http%3A%2F%2Fimg.sucaifengbao.com%2Fvector%2Flogosjbz%2F31_242_bl.jpg" width="400" height="100" ></a>


<div id="container" style="width: 400px" align="center">
    <div id="header" style="background-color: darkorange"><h2 align="center">58同城</h2></div>
    <div id="content"></div>
    <form action="">
       <p> 账号&nbsp:<input type="text" placeholder="手机号码/qq/微信"></p>
           密码&nbsp:<input type="password"><br>
         <p> <input type="radio" name="role" value="stu">手机
             <input type="radio" name="role" value="stu">qq
             <input type="radio" name="role" value="tea">微信<br>
        </p>
         <h6> <input type="checkbox" >下次自动登录</h6>
         <h1><input type="button" value="登录" ></h1>
</form>
 <a href="https://passport.58.com/reg/?PGTID=0d000000-0000-0e6d-aa35-c0f66c071493&ClickID=5"title="注册">立即注册</a>
 <a href="//passport.58.com/forgetpassword" class="passwordonclick=">忘记密码</a>
    <div id="footer"  style="background-color: darkorange"><h2 align="center">版权@mis</h2></div>
</div>
<div>
     <select>
     <option>收藏</option>
     <option>点赞</option>
     <option>评论</option>
     </select>
  <ul>
    <a href="http://gz.58.com/job.shtml?PGTID=0d100000-0000-3633-7367-ea4a46f74c60&ClickID=1"><li>招聘</li></a>
      <ol>
          <li>全职</li>
          <li>兼职</li>
          <li>简历</li>
      </ol>
     <a href="http://gz.58.com/house.shtml?PGTID=0d100000-0000-3633-7367-ea4a46f74c60&ClickID=3"><li>房产</li></a>
      <ol>
          <li>租房</li>
          <li>二手房</li>
          <li>公寓</li>
      </ol>
      <li>二手车</li>
      <ol>
          <li>三万内</li>
          <li>SUV</li>
          <li>货车</li>
      </ol>
      <li>二手市场</li>
 </ul>

</div>
</body>
</html>

技术分享

技术分享

 

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

标签:登录   back   span   二手   org   col   role   baidu   nbsp   

原文地址:http://www.cnblogs.com/zhuyinyinyin/p/7680133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!