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

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

时间:2017-10-13 20:16:55      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:http   场景   idt   logs   ima   span   oct   set   nta   

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

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

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

截图为基础代码 

技术分享

 运行结果:

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教务系统</title>
</head>
<body>




<hr>

<div id="container" style="width: 400px">
    <div id="header" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
            <select>
              <option>校内入口</option>
              <option>校外入口</option>


          </select><br>
      账号:<input type="text" name="账号"placeholder="请输入学号"><br>
            密码:<input type="password" name="密码"placeholder="请输入密码">
            <br>
        <input type="radio"name="role"value="stu">学生
            <input type="checkbox"name="vehicle"value="tea">教师<br>

            <input type="button" value="登录">
            <input type="button" value="取消">
            <input type="button" value="刷新">

    </form>





<div id="container" style="width: 400px">
    <div id="header" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;"></h2></div>

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
        <ul>
            <li>交通指南</li>
            <li>人才招聘</li>
            <li>合作院校</li>
            <li>信息公开</li>
      </ul>
        <dl>
         
            </div>
</div>

</body>
</html>

技术分享

 

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

标签:http   场景   idt   logs   ima   span   oct   set   nta   

原文地址:http://www.cnblogs.com/1244581939cls/p/7660405.html

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