【网页设计】前端代码练习（五）

于 2024-07-17 12:07:39 发布
阅读量338 收藏 3
点赞数 1
分类专栏： 网页设计 文章标签： 前端 开发语言 css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_64077978/article/details/140490121
版权

Css美化表单

<!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 type="text/css">
*{padding:0;margin:0;}
div{width:420px;background:#000;color:#FFF;height:240px;margin:100px auto;}
fieldset{width:380px;height:220px;margin-left:20px;}
legend{color:#FFF;}
table{text-align:right;margin:60px 50px;}
td{padding-bottom:15px;}
.one{background:url(images/btn.jpg) no-repeat 67px;}
</style>
</head>

<body>
<div>
<fieldset>
	<legend>个人注册</legend>
    <table>
    <tr>
    	<td>用户账号：</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
    	<td>密码：</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
    	<td></td>
        <td class="one"><input type="button"/></td>
    </tr>      
    </table>
</fieldset>
</div>
</body>
</html>

 

班级日志

<!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 type="text/css">
*{padding:0;margin:0;list-style:none;}
.one,.four{width:570px;height:130px;margin:0 auto;}
.two li{margin-bottom:10px;color:#4A5F4D;width:230px;height:24px;padding-top:8px;padding-left:5px;font-size:14px;}
.t{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-1.png);}
.w{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-2.png);}
.o{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-3.png);}
.two{float:left;}
.three{float:right;width:220px;}
.three li{color:#4A5F4D;font-size:14px;height:24px;padding-left:5px;line-height:24px;}
.a{float:left;background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-1.png);}
.b{float:left;background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-2.png);}
.c{float:left;background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-3.png);}
.five{padding-left:100px;}
.six{padding-left:180px;}
</style>
</head>

<body>
<div class="one">
	<ul class="two">
    	<li class="t">班级首页</li>
        <li class="w">班级日志</li>
        <li class="o">个人风采</li>
    </ul>
    <div class="three">
	<ul>
    	<li class="a">班级首页</li>
        <li class="b">班级日志</li>
        <li class="c">个人风采</li>          
	</ul>
    </div>
</div>	
   <div class="four">
   		<c class="five">页面垂直导航</c>
   		<c class="six">页面水平导航</c>
   </div>
</body>
</html>

 

下面就开始在线报名吧

<!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 type="text/css">
div{width:660px;height:600px;border:1px solid #000;padding:20px;margin:50px auto 0;}
h2{font-size:22px;padding-bottom:30px;}
span{font-size:12px;}
.left{text-align:right;width:78px;padding-right:8px;}
.txt01{background:url(images/name.png) no-repeat 2px center;}
.txt02{background:url(images/phone.png) no-repeat 2px center;}
.txt01,.txt02{font-size:12px;width:264px;height:12px;border:1px solid #000;color:#CCC;padding:3px 3px 3px 26px;}
.txt03{font-size:12px;width:122px;height:12px;padding:3px 3px 3px 26px;background:url(images/email.png) no-repeat 2px center;}
.course{width:184px;}
.me{width:432px;height:164px;font-size:12px;padding:3px;color:#CCC;}
</style>
</head>

<body>
<div>
    <h2>下面就开始在线报名吧<span>（以下信息是报名传智播客的重要依据，请认真填写）</span></h2>
<form>
	<table>
	<tr>
    	<td class="left">姓名*</td>
    	<td><input type="text" value="报名的重要依据，请认真填写" class="txt01"/></td>
    </tr>
	<tr>
    	<td class="left">电话*</td>
    	<td><input type="text" value="报名的重要依据，请认真填写" class="txt02"/></td>
    </tr>
    <tr>
    	<td class="left">性别*</td>
    	<td><input type="radio" name="sex" id="man" />
        <label for="man">男</label>
        <input type="radio" name="sex" id="woman" />
        <label for="woman">女</label></td>
    </tr>
    <tr>
    	<td class="left">邮箱*</td>
    	<td><input type="text" class="txt03"/></td>
    </tr>
    <tr>
    	<td class="left">意向课程*</td>
    	<td>
        <select class="course">
        	<option>网页平面ui设计基础班</option>
        	<option selected="selected">网页平面ui设计就业班</option>
            <option>网页平面ui设计周末班</option>
        </select>
        </td>
    </tr>
    <tr>
    	<td class="left">了解传智渠道</td>
    	<td><input type="checkbox" />bai du
        	<input type="checkbox" />传智老学员
        	<input type="checkbox" />朋友推荐
        	<input type="checkbox" />csdn网站
        	<input type="checkbox" />视频教程
        	<input type="checkbox" />其它</td>
    </tr>
    <tr>
    	<td class="left">留言</td>
    	<td><textarea class="me">请简述您有没有设计基础，以及为什么选择平面ui设计？</textarea></td>
    </tr>
    <tr>
    	<td>&nbsp;</td>
    	<td><input type="submit" value="提交" /></td>
    </tr>
	</table>
</form>
</div>
</body>
</html>

 

账号-密码-表单

<!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 type="text/css">
*{padding:0;margin:0;border:0;}
table{margin:100px;height:150px;width:300px;background:#999;font-family:"微软雅黑";padding-top:20px;margin:100px auto;}
td{padding-bottom:10px;}
.left{width:90px;text-align:center;}
.num,.pas{width:152px;height:18px;border:1px solid #38a1bf;padding:2px 2px 2px 22px;}
.num{color:#999;background:url(images/1.jpg) no-repeat 5px center #FFFFFF}
.pas{background:url(images/2.jpg) no-repeat 5px center #FFFFFF;}
.btn{padding-top:10px;}
.btn input{width:87px;height:24px;background:url(images/5.jpg) no-repeat;}
</style>
</head>

<body>
<form>
	<table>
    	<tr>
        	<td class="left">账号/号码：</td>
        	<td><input type="text" value="itcast" class="num" /></td>
        </tr>
        <tr>
        	<td class="left">密码：</td>
        	<td><input type="password" class="pas" /></td>
        </tr>
        <tr>
        	<td>&nbsp;</td>
        	<td class="btn"><input type="button" /></td>
        </tr>
    </table>
</form>
</body>
</html>

 

表单

<!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>
</head>

<body>
<form>
	<label for="name">姓名：</label>
    <input type="text" id="name" maxlength="6"/><br /><br />
    密码：
	<input type="password" size="40"/><br /><br />
    兴趣：
    <input type="checkbox" />唱歌
    <input type="checkbox" />跳舞
    <input type="checkbox" />游泳<br /><br />
    上传头像：
    <input type="file" /><br /><br />
    <input type="submit" />
    <input type="reset" />
    <input type="button" value="普通按钮"/>
	<input type="image" src="images/login.gif"/>
    <input type="hidden" /><br /><br />
    评论：<br />
    <textarea cols="60" rows="8"></textarea><br />
     <input type="submit" value="提交"/>
     所在校区：<br />
     <select>
     	<option>-请选择-</option>
     	<option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>武汉</option>
        <option>成都</option>
     </select><br /><br />
     特长（单选）：<br />
     <select>
     	<option>唱歌</option>
     	<option>画画</option>
        <option>跳舞</option>  
     </select><br /> <br />
     爱好（多选):<br />   
    <select multiple="multiple" size="4">
    	<option>读书</option>
        <option selected="selected">写代码</option>
        <option>旅游</option>
        <option selected="selected">听音乐</option>
        <option>踢球</option>
    </select> <br /><br />
    <select><br /><br />
    	<optgroup label="北京">
        	<option>东城区</option>
        	<option>西城区</option>
            <option>朝阳区</option>
            <option>海淀区</option>
        </optgroup>
    	<optgroup label="上海">
        	<option>浦东新区</option>
            <option>徐汇区</option>
            <option>虹口区</option>
        </optgroup> 
    </select><br /><br />
    <fieldset>
    <legend>个人注册</legend>
    昵称：
    <input type="text" /><br />
    密码：
    <input type="password" /><br />
    性别：
    <input type="radio" name="sex" id="man"/><label for="man">男</label>
    <input type="radio" name="sex" id="woman"/><label for="woman">女</label></fieldset>
    <fieldset>
    <legend>企业注册:</legend>
    企业名称：
    <input type="text" /><br />
    公司地址：
    <input type="text" /><br />
    </fieldset><br />
    <input type="submit" value="提交" />    
</form>  
</body>
</html>

 

个人注册-企业注册-表单

<!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>
</head>

<body>
<form>
	<fieldset>
    	<legend>个人注册</legend>
        昵称：
        <input type="text" /><br />
        密码：
        <input type="password" /><br />
        性别：
    	<label id="wm"><input type="radio" name="gb" id=	"wm"/>女</label>
    	<label id="wm"><input type="radio" name="gb" id="wm" />男</label>
    </fieldset><br />
    <fieldset>
    	<legend>企业注册</legend>
        企业名称：
        <input type="text" /><br />
        公司地址：
        <input type="text" /><br />
    </fieldset><br />
    <input type="submit" value="提交"/>    
</form>
</body>
</html>

 

账号-密码

<!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 type="text/css">
*{padding:0;margin:0;border:0}
table{width:300px;height:150px;background:#DCF5FA;}
td{padding-bottom:10px;}
.one,.three{width:90px;text-align:right;}
.two,.five{width:152px;height:18px;border:2px solid #FFFFFF}
.four input{width:87px;height:24px;background:url(images/5.jpg) no-repeat;}
.two{background:url(images/1.jpg) no-repeat 5px center #FFF;color:#999;padding:2px 2px 2px 22px;}
.five{background:url(images/2.jpg) no-repeat 5px center #FFF;}
</style>
</head>

<body>
<form>
	<table>
    	<tr>
        	<td class="one">账号/号码：</td>
            <td><input type="text" value="itcast" class="two"/></td>        
        </tr>
    	<tr>
        	<td class="three">密码：</td>
            <td><input type="text" class="five"/></td>        
        </tr>    
    	<tr>
        	<td></td>
            <td class="four"><input type="button"/></td>        
        </tr>        
    </table>
</form>
</body>
</html>

 

室内居家布局设计

<!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 type="text/css">
*{padding:0;margin:0;}
div{width:1400px;height:300px;margin:20px auto;}
ul{list-style:none;float:left;width:200px;margin:10px;border:1px solid #CCC;text-align:center;height:250px;padding-top:20px;}
li{margin-bottom:10px;}
</style>
</head>

<body>
<div>
	<ul>
    	<li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>
    	<li>室外居家布局设计</li>
    </ul>
	<ul>
    	<li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>
    	<li>室外居家布局设计</li>
    </ul>
	<ul>
    	<li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>
    	<li>室外居家布局设计</li>
    </ul>
	<ul>
    	<li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>
    	<li>室外居家布局设计</li>
    </ul>
	<ul>
    	<li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>
    	<li>室外居家布局设计</li>
    </ul>
</div>
</body>
</html>

 

首页导读

<!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 type="text/css">
*{padding:0;margin:0;}
.all{width:600px;height:300px;margin:50px auto;}
.one{width:600px;height:150px;background:url(images/banner1.jpg) no-repeat;}
.two{width:600px;height:32px;background:url(images/button1_bg.jpg);}
a:link,a:visited{font-size:14px;width:68px;height:32px;background:url(images/button1.jpg) no-repeat;float:left;color:#9BB40F;padding-top:8px;padding-left:12px;text-decoration:none;}
a:hover{width:68px;height:32px;background:url(images/button2.jpg) no-repeat;float:left;color:#FFF;padding-top:8px;padding-left:12px;}
</style>
</head>

<body>
<div class="all">
  <div class="one"></div>
	<div class="two">
    	<a href="#">首页导读</a>
    	<a href="#">首页导读</a>
        <a href="#">首页导读</a>
        <a href="#">首页导读</a>
        <a href="#">首页导读</a>
    </div>
</div>
</body>
</html>

 

土豪金边框员工记录表

<!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 type="text/css">
*{padding:0;margin:0}
div{width:400px;margin:100px auto;}
p{text-align:center;font-size:18px;}
table{text-align:center;border:8px solid #E2C481;}
td,th{border:1px dashed #E2C481;
</style>
</head>

<body>
<div>
<p>传智播客员工记录表</p>
<table width="400">
	<tr>
    	<th>姓名</th>
    	<th>性别</th>
   	 	<th>年龄</th>
    	<th>电话</th>
    	<th>住址</th>
    </tr>
    <tr>
    	<td>李丽</td>
   	 	<td>女</td>
    	<td>23</td>
    	<td>666666</td>
        <td>上海</td>
    </tr>
    <tr>    	
    	<td>李磊</td>
   	 	<td>男</td>
    	<td>25</td>
    	<td>888888</td>
        <td>北京</td>
    </tr>
	<tr>    	
    	<td>陶菲克</td>
   	 	<td>男</td>
    	<td>24</td>
    	<td>111111</td>
        <td>马来西亚</td>
    </tr>
</table>
</div>
</body>
</html>

 

制作游戏选区方式

<!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>
</head>
<body>
<form action="#" method="post" name="example">
请选择大区:<br />
<select>
	<option>1区金戈铁马</option>
	<option>2区江山如画</option>
	<option>3区气吞山河</option>
	<option>3区刀光剑影</option>
</select>
<select>
	<option>请选择线路</option>
	<optgroup label="网通">
		<option>网通线路1</option>
		<option>网通线路2</option>
    </optgroup>
	<optgroup label="电信">
		<option>电信线路1</option>
		<option>电信线路2</option>
    </optgroup>
</select><br /><br/>
	<input type="submit" value="确定"/>
	<input type="button" value="取消"/>
</form>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值