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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MIS问答平台</title>

</head>

<body bgcolor="yellow">

<h1 align="center">MIS问答平台</h1>

<p>校园新闻</p>

<h2 align="center">Welcome to 广州商学院</h2>

<hr color="red">

<a href="http://www.gzcc.cn/">广州商学院

<br>

<img src="http://www.gzcc.cn/2016/images/banner.png" width="900" height="80" alt="gzcc.cn" ></a>

<div></div>

<hr color="red">

<div id="container" style="width: 400px">

    <div id="header" style="background-color: chartreuse"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>

       <div id="content" style="background-color: aqua;height: 150px;width: 400px;float: left;">

           <form align="center">

           Username:<input type="text" name="username"placeholder="请输入用户名"><br><br>

           Password:<input type="Password" name="passname"placeholder="请输入密码"><br><br>

            <input type="radio" value="student">student

            <input type="radio" value="teacher">teacher<br>

            <input type="button" value="login">

            <input type="button" value="cancel">

            </form>

        </div>

<div id="footer" style="background-color:chartreuse;clear:both;text-align:center;">版权 © duym

     </div>

 </div>

<hr color="red">

<div id="container" style="width: 400px">

    <div id="header" style="background-color: darkred"><h2 align="center" style="margin-bottom: 0;">搜索</h2></div>

       <div id="content" style="background-color: cornflowerblue;height: 250px;width: 400px;float: left;">

        <form align="center">

            <select>

                <option>问答</option>

                <option>收藏</option>

                <option>选择</option>

    </select>

        </form>

           <ul>

                                <li>python</li>

                                <li>web</li>

            </ul>

            <ol>

                <li>HTML</li>

                <li>CSS</li>

            </ol>

           <dl>

               <dt>JAVA</dt>

               <dd>面向对象程序</dd>

               <dt>JSP</dt>

               <dd>编写代码</dd>

           </dl>

        </div>

<div id="footer" style="background-color:darkred;clear:both;text-align:center;">版权 © duym

     </div>

 </div>

</body>

</html>

web基础，用html元素制作web页面的更多相关文章

  1. 图片转web字体库，如何制作web字体库

    最近项目上用到了很多svg图,设计师经常频繁改版,苦不堪言,于是就想到了把图片转成字体库来使用. 使用图片的缺点: 1. 图片加载速度慢 2. 图片大小固定,无法调节 3. 当代码重构或者图片目录位置 ...

  2. 20145311 王亦徐 《网络对抗技术》 Web基础

    20145311 王亦徐 <网络对抗技术> Web基础 实验内容 简单的web前端页面(HTML.CSS等) 简单的web后台数据处理(PHP) Mysql数据库 一个简单的web登陆页面 ...

  3. 20145222 黄亚奇 《网络对抗》Exp8 Web基础

    20145222 黄亚奇 <网络对抗>Exp8 Web基础 实践具体要求 (1).Web前端HTML(1分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法 ...

  4. 2018-2019-2 20165315《网络对抗技术》Exp 8 Web基础

    2018-2019-2 20165315<网络对抗技术>Exp 8 Web基础 一.实验内容 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST ...

  5. 12.web基础与HTTP协议

    web基础与HTTP协议 目录 web基础与HTTP协议 web基础 域名概述 HTML概述 HTML基本标签 HTML语法规则 HTML文件结构 头标签中常用标签 内容标签中常用标签 静态网页与动态 ...

  6. 20155326《网路对抗》Exp8 WEB基础实践

    20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...

  7. 20155201 网络攻防技术 实验八 Web基础

    20155201 网络攻防技术 实验八 Web基础 一.实践内容 Web前端HTML,能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. We ...

  8. Golang友团无闻Go语言Web基础视频教程

    教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...

  9. Python全栈开发之17、tornado和web基础知识

    一.web基础知识 学习web框架之前,先来看一下web基础知识,首先要明白其本质就是socket,用户对应一个socket客户端,但是如果从socket开始开发web应用程序那么效率太了,正确的做法 ...

随机推荐

  1. mybatis获取批量插入的主键自增id

    一.写一个实体类 public class UserInfo { private long userId; private String userAccount; private String use ...

  2. Django 正向解析与反向解析

    正向解析就是按照顺序查找访问(urls.py---view--templates) 反向解析就是根据命名空间命名来调到指定的页面 用反向解析的原因: 随着功能的增加会出现更多的视图,可能之前配置的正则 ...

  3. 浏览器数据库 IndexedDB 入门教程

    一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...

  4. 函数 call、apply、bind的使用

    [优雅代码]深入浅出 妙用Javascript中apply.call.bind (转载而来)   这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: “对 ...

  5. CF1103D Professional layer dp

    正解:dp 解题报告: 传送门! 首先不难想到求个gcd,然后把gcd质因数分解成p1w1*p2w2*p3w3*...*pmwm 显然只要满足对每个p有一个ai%pj!=0就好,也就是说对每个pj找出 ...

  6. Laravel展示产品-CRUD之show

    上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller,文件是在/app/Http/Control ...

  7. ORACLE安装入门篇OEL5.4安装ORACLE11g

    一.安装ORACLE11g软件(11.2.0.0) (一)安装前的包支持 1.检测yum仓库是否已经配置好 yum list all 2.搭建yum仓库 1).挂载所需要的安装光盘 虚拟机挂载光盘: ...

  8. C# HtmlElement的GetAttribute("class") return ""

    用GetAttribute("className")代替GetAttribute("class")

  9. VUE设置浏览器icon图标

    一.将[logo.png]格式图片转换为[logo.bmp]格式 ps打开图片- 存储为 BMP格式 保存好的[logo.bmp] 格式的图片重命名为[logo.ico] 二.将[logo.ico]图 ...

  10. Vue-selller 饿了吗 - 准备工作

    安装脚手架vue-cli npm install -g vue-cli 建立项目 vue init webpack sell(sell是项目名称) 进入项目目录 cd sell 可以看目录结构: ls ...