网页web前端学习

维尔薇布丁

于 2024-07-05 23:06:56 发布

阅读量665

点赞数 17

文章标签：学习

本文链接：https://blog.csdn.net/v2vpuding/article/details/140219363

版权

实例一：

1.用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20。
2.密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20。
3.性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中。
4.爱好是三个多选按钮，名称为 like，值分别为写作、听音乐、体育。
5.省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi;Key:山西省
value:shanx;陕西省默认选中。
6.自我介绍为多行文本框，名称为 intro，宽 25，高5，默认值为“这个家伙什么也没留下”。
7.提交按钮，名称为“send”，标签为“提交”。
8.重置按钮，名称为“reset”，标签为“重置”。
9.参照图使用表格定位表单。

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>用户注册</title>
	</head>

	<style>
		table{
			background-color: #D3D3D3;
		}
	</style>

	<body>
		<table border="1" cellspacing="0" cellpadding="2">
			<tr>
				<td colspan="2" align="center" bgcolor="grey">用户注册</td>				
			</tr>

			<tr>
				<td align="right">用户名</td>
				<td><input type="text" name="UserName" value="" minlength="15" maxlength="20"/></td>
			</tr>

			<tr>
				<td align="right">密码</td>
				<td><input type="password" name="UserPass" minlength="15" maxlength="20"/></td>
			</tr>

			<tr>
				<td align="right">性别</td>
				<td><input type="radio" name="sex" value="男" checked/>男 
					<input type="radio" name="sex" value="女"/>女<br/></td>
			</tr>

			<tr>
				<td align="right">爱好</td>
				<td><input type="checkbox" name="like" value="写作"/>写作 
					<input type="checkbox" name="like" value="听音乐"/>听音乐 
					<input type="checkbox" name="like" value="体育"/>体育<br /></td>
			</tr>

			<tr>
				<td align="right">省份</td>
				<td>
					<select name="province" >
						<option value="shaanxi" selected>陕西省</option>
						<option value="shanx">山西省</option>
					</select>
				</td>
			</tr>

			<tr>
				<td align="right">自我介绍</td>
				<td><textarea name="intro" cols="25" rows="5">这个家伙很懒，什么也没留下</textarea>
				</td>
			</tr>
            
			<tr>
				<td colspan="2" align="center" bgcolor="grey">
					<input type="submit" name="send"/>
					<input type="reset" name="reset"/></td>
			</tr>
		</table>
    
    </body>
</html>

结果：

实例二：

完成以下页面的设计：

实现代码：

<!DOCTYPE html>
<html>
   <head>
	  <title>工商银行电子汇款单</title>
	  <meta charset="utf-8">
   </head>
   <body>
	  <h1>工商银行电子汇款单</h1>
      <table border="1" cellpadding="0" cellspacing="0" style="width: 900px">
             <tr>
             	<td colspan="2" style="width: 100px"><b>回单类型</b></td>
             	<td style="width: 400px">网上转账汇款</td>
             	<th colspan="2" ="width: 100px">指令序号</th>
             	<td style="width:  500px">HQH0000000000000013878172</td>
             </tr>

             <tr>
             	<th rowspan="4" style="width: 20px">收款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老牟</td>
             	<th rowspan="4" style="width: 20px">付款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老刘</td>
             </tr>

             <tr>
                 <td><b>卡号</b></td>
                 <td>000000000001</td>
                 <td><b>卡号</b></td>
                 <td>000000000002</td>
             </tr>

             <tr>
                 <td>地区</td>
                 <td>南京</td>
                 <td>地区</td>
                 <td>杭州</td>
             </tr>

             <tr>
                 <td><b>网点</b></td>  
                 <td>工商江苏南京业务处理中心</td>
                 <td><b>网点</b></td>
                 <td>江苏徐州业务中心</td>
             </tr>

             <tr>
                 <td colspan="2"><b>币种</b></td>
                 <td>人民币</td>
                 <td colspan="2"><b>钞汇标志</b></td>
                 <td><u>钞票</u></td>
             </tr>

             <tr>
                 <td colspan="2"><b>金额</b></td>
                 <td>1.00元</td>
                 <td colspan="2"><b>手续费</b></td>
                 <td>0.57元</td>
             </tr>

             <tr>
                 <td colspan="2"><b>合计</b></td>
                 <td colspan="4">人民币（大写）壹元整</td>
             </tr>

             <tr>
                 <td colspan="2"><b>交易时间</b></td>
                 <td>2017年6月1日</td>
                 <td colspan="2"><b>时间戳</b></td>
                 <td><i>2017-06-01-13.00.00。00000</i></td>
             </tr>
      </table>
             <div>票据打印时间：2017-06-01 15:00:12</div> 
             <div><del>票据打印单位：江苏徐州业务中心</del> </div>
             <div>操作员：大曾</div>

    </body>
</html>

结果：

实例三：

诗词网页设计：

实现代码：

<!DOCTYPE html>
<html>
<head>
	<title>古诗词</title>
	<meta charset="utf-8">
</head>
<body>
    <table>
        <tr colspan="2" align="center">
            <td>
            	<h1>
                   将进酒
                     <small>君不见黄河之水天上来</small>
                </h1>
            </td>
        </tr>

        <tr>
            <td rowspan="15">
               <img src="./李白.jpg" title="李白">
            </td>
            
        </tr>

        <pre>
            <tr>
                <td>君不见黄河之水天上来，奔流到海不复回。</td>
            </tr>
    
            <tr>
                <td>君不见高堂明镜悲白发，朝如青丝暮成雪。</td>
            </tr>
    
            <tr>
                <td>人生得意须尽欢，莫使金樽空对月。</td>
            </tr>
    
            <tr>
                <td>天生我材必有用，千金散尽还复来。</td>
            </tr>
    
            <tr>
                <td>烹羊宰牛且为乐，会须一饮三百杯。</td>
            </tr>
            <tr>
                <td>岑夫子，丹丘生，将进酒，杯莫停。</td>
            </tr>
    
            <tr>
                <td>与君歌一曲，请君为我侧耳听。</td>
            </tr>
    
            <tr>
                <td>钟鼓馔玉不足贵，但愿长醉不复醒。</td>
            </tr>
    
            <tr>
                <td>古来圣贤皆寂寞，惟有饮者留其名。</td>
            </tr>
    
            <tr>
                <td>陈王昔时宴平乐，斗酒十千恣欢谑</td>
            </tr>
    
            <tr>
                <td>主人何为言少钱，径须沽取对君酌</td>
            </tr>
    
            <tr>
                <td>五花马，千金裘，</td>
            </tr>
    
            <tr>
                <td>呼儿将出换美酒，与尔同销万古愁。</td>
            </tr>
        </pre>
    </table>
</body>
</html>