网页设计与制作大作业四题
第一题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>B_01</title>
<style>
body{background:#d1e7a9;font-family: '宋体';}
.form{width:600px;margin:0 auto;}
.form h1{text-align: center;color:#db2ebb;}
.box{margin:10px 0px;}
.box ul li{list-style: none;float:left;}
.clear{clear:both;}
.footer{text-align: center;}
</style>
</head>
<body>
<div class="form">
<h1>发表留言</h1>
<form>
<div class="box">
<label>昵 称：</label>
<input type="text" id="input2" >
</div>
<div class="box">
<label>密 码：</label>
<input type="text" id="input2" >
<label>游客发表留言不需要填写密码 </label>
</div>
<div class="box">
<label>验证码：</label>
<input type="text" id="input2" >
<label>=1+2+3</label>
</div>
<div class="box">
<label>机器码：</label>
<input type="text" id="input2" >
<label>为防止恶意广告，请输入<font sytle="color:#e90000">8888</font></label>
</div>
<div class="box">
<label>头像：</label>
<ul>
<li><img src="images-1/face1.gif"></li>
<li><img src="images-1/face2.gif"></li>
<li><img src="images-1/face3.gif"></li>
<li><img src="images-1/face4.gif"></li>
<li><img src="images-1/face5.gif"></li>
<li><img src="images-1/face6.gif"></li>
<li><img src="images-1/face7.gif"></li>
</ul>
</div>
<div class="clear"></div>
<div class="box">
<label>留 言：</label>
<textarea rows="10" style="width:400px;">字数限制500字</textarea>
</div>
<div class="box">
<label>选 项：</label>
<input type="checkbox" checked="checked" >隐藏留言
</div>
<div class="box">
<input type="submit" value='发表留言'>
<input type="reset" value='全部重写'>
</div>
</form>
<div class="footer">
<h3>PQ博客</h3>
<h5>@ CopyRigth 2011 @</h5>
</div>
</div>
</body>
</html>第二题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>B_02</title>
<style>
*{padding:0px;margin:0px;}
ul li{list-style: none;float:left;}
ul li h2{background:#ffff00;line-height: 50px;text-align: center;}
.baw{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.negative{-webkit-filter: invert(100%);filter: invert(100%)}
.xlight{-webkit-filter:xray;filter:xray}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<h2>原图片</h2>
<img src="images-2/01.jpg">
</li>
<li>
<h2>黑白效果</h2>
<img class="baw" src="images-2/01.jpg">
</li>
<li>
<h2>底片效果</h2>
<img class="negative" src="images-2/01.jpg">
</li>
<li>
<h2>X光线效果</h2>
<img class="xlight" src="images-2/01.jpg">
</li>
</ul>
</div>
</body>
</html>第三题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
a{text-decoration: none;}
.main{width:800px;margin:0 auto;}
.left{width:300px;float:left;}
.right{float:left;width:300px;margin-left:20px;margin-top:50px;}
.rbox{padding:20px 20px;background:#fefefe;border:1px solid #f3f3f3;}
.input_box{margin:15px 0px;}
.form-box label{width:100px;}
.input_box input{height:26px;line-height:26px;width:190px;border:none;background:url(images-3/input_bg_09.jpg) center center no-repeat;}
.sb_box input{height:26px;line-height:26px;border:none;background:url(images-3/button_09.jpg) center center no-repeat;}
.clear{clear:both;}
.footer{line-height: 50px;border-top:1px solid #999;margin-top:50px;padding:20px 0px;background:#F3F3F3;text-align: center;color:#4c6294}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div id="video">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images-3/1year_03.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="images-3/1year_03.swf" quality="high" bgcolor="#ffffff" width="300" height="300"name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div class="right">
<div class="rbox">
<h3>会员登录</h3>
<form>
<div class="input_box">
<lable>账户名:</lable>
<input type="text">
</div>
<div class="input_box">
<lable>密 码:</lable>
<input type="text">
</div>
<div class="sb_box">
<input type="text">
<label><a href="">忘记密码？</a></label>
</div>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<p>合作规范 法律声明 联系我们 帮助中心</p>
</div>
</body>
</html>第四题
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作大作业四题
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作大作业四题
