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

时间:2022-11-29 15:04:03

用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页面