简单网页设计前端(入门)

简单网页设计前端(入门)

按照下面的成品设计网页:


其中包括: 
文本框
密码框
提示文字
单选按钮
复选按钮
上传文件
上传图片
等。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
#name,#psd{
	background-color:#09F;
	background:#FC9;
}
fieldset{
	width:180px;}

</style>

</head>

<body>
<form action="mailto:418280718@qq.com" method="get" name="myform">
	
    账 号: <input  type="text" name="name" id="name"/> <br />
    <hr  width=210px/ align="left">
    密 码: <input  type="password" name="psd" id="psd" /><br />
    <hr  width=210px/ align="left">
    <br />
    <fieldset>
    <legend>性别:</legend>
   <label for="man"> <input  type="radio" name="sex" id="man"/>    男 </label>
    <label for="woman"><input  type="radio" name="sex" id="woman"/>女</label>
    </fieldset>
    <hr  width=210px/ align="left">
    <fieldset>
    <legend>专业:</legend>
    <label for="app"><input  type="radio" name="pro" id="app"/>软件编程</label>
    <label for="dw"><input  type="radio" name="pro" id="dw"/>网页设计</label>
    </fieldset><br />
    <fieldset>
    <legend>兴趣爱好(多选):</legend>
    <label for="box1">  <input type="checkbox" name="swim"  id="box1"/ align="middle">游   泳</label>
    <br />
    <label for="box2">  <input type="checkbox" name="run"  id="box2"/>跑   步</label>
    <br />
    <label for="box3">  <input type="checkbox" name="ball"  id="box3"/>打   球</label>
    <br />
    </fieldset>
    
    <input type="image" value="上传图片" />
    <input type="file" value="上传文件"  />
    <br /><hr  width=210px/ align="left">
    <input type="submit" value="提交按钮" />
    <input type="button" value="普通按钮" />
    <input type="reset" value="重按钮置" />
    <br />
    
    
</form>
</body>
</html>


下面是简单成品图:

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页