一下为HTML基本标签的作业题,如有错误请指正
一、百度页面
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度页面</title>
</head>
<body>
<body>
<table align="center">
<tr>
<td align="center" vlign="bottom" height="200">
<img src="img/QQ截图20200907165910.png">
</td>
</tr>
<tr valign="top">
<td align="center" >
<input type="text" id="text" onFocus="style=" border: #3385FF"" onBlur="" onkeydown="keydown()" style="height: 30px;width: 600px;"/>
<input type="submit" value="百度一下" style="height: 35px;;"/><br /><br />
</td>
</tr>
<tr>
<td>百度热榜</td>
<td>换一换<br /><br /></td>
</tr>
<tr>
<td><img src="img/QQ截图20200908105148.png" height="20"/> 南京非全研究生申请租房补贴被拒<span style="background-color:sandybrown;color: white;"> 热</span></td>
<td><img src="img/QQ截图20200908105658.png" height="20"/> 阿娇头部受重伤被送医院<br /></td>
</tr>
<tr>
<td><img src="img/QQ截图20200908105521.png" height="15"/> 王思聪带女友现身楼盘看房</td>
<td><img src="img/QQ截图20200908105707.png" height="20"/> 昆山世硕称大量员工辞职不实<span style="background-color: deeppink;color: white;"> 新</span><br /></td>
</tr>
<tr>
<td><img src="img/QQ截图20200908105650.png" height="15"/> 原副市长贪巨额资金已逃至境外</td>
<td><img src="img/QQ截图20200908105715.png" height="20"/> 阿汤哥悬崖跳摩托车</td>
</tr>
</table>
</body>
</body>
</html>
效果截图如下:
二、会员登陆界面
因为有些知识没有掌握,只能做成这样了,大家见谅,代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background:url(img/login_bg.gif) top left;
background-size:100%;}
</style>
</head>
<body>
<div id="left" style="float: left;height: 500px;width: 50%;background-color: white;border - right: 1 solid darkgray;" >
<div>
<tr>
<td><img src="img/logintitle.gif" /></td><br />
</tr>
</div>
<div>
<form>
<table style="text-align: center;" align="center">
<tr>
<td>会员名:</td>
<td>
<input type="text" />
</td>
<td>(可包含a-z,0-9,下划线)</td><br />
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="password" />
</td>
<td>(至少包含6个字符)</td>
</tr>
<tr>
<td colspan="3"><img src="img/login_mouseover.gif" /></td>
</tr>
</table>
</form>
</div>
<div>
<p>δ 什么是安全登录。</p>
<p>δ 香港會員(繁體中文用户)由此登入</p>
<p>δ 密码安全贴士</p>
<p>δ 防止病毒或者木马窃取您的账户信息,在线检查您的电脑是否安全。</p>
</div>
</div>
<div id="right" style="float: right;height: 500px;width: 50%;background: white;" >
<div>
<dl>
<dt><img src="img/register.gif" /></dt><br />
<dd><img src="img/QQ截图20200908115118.png" height="15" width="15"/><span style="color: deepskyblue;font-weight: bolder;">便宜有好货!</span>超过700万件商品任您选。</dd><br />
<dd><img src="img/QQ截图20200908115128.png" height="15" width="15"/><span style="color: deepskyblue;font-weight: bolder;">买卖更安全!</span>交易超安全。</dd><br />
<dd><img src="img/QQ截图20200908115135.png" height="15" width="15"/><span style="color: deepskyblue;font-weight: bolder;">免费开网店!</span>轻松赚钱交友。</dd><br />
<dd><img src="img/QQ截图20200908115142.png" height="15" width="15"/><span style="color: deepskyblue;font-weight: bolder;">超人气社区!</span>精彩活动每一天。</dd>
</dl>
</div>
<div>
<table>
<tr>
<td> <img src="img/registernow.gif" /></td>
</tr>
</table>
</div>
<div>
<table border="0" width="400px" height="60px" style="background-color: orange;text-align: center;">
<tr>
<td><span style="background-color: white;"><img src="img/QQ截图20200908115155.png" height="15" width="15"/>您已经是会员了,由此登入</span></td>
</tr>
<tr>
<td><span style="background-color: white;"><img src="img/QQ截图20200908115202.png" height="15" width="15"/>繁体中文用户由此登录</span></td>
</tr>
</table>
</div>
</div>
<div>
<table align="center">
<tr>
<td>友情链接:百度 | Google | 雅虎 | 淘宝 | 拍拍 | 易趣 | 当当 | 京东商城 | 迅雷 | 新浪 | 网易 | 搜狐 | 猫扑 | 开心网 | 新华网 | 凤凰网 </td>
</tr>
</table>
</div>
</body>
</html>
效果截图:
三、购物车界面
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body>
<div>
<tr>
<td><img src="img/mycart.gif" /></td>
<td>全场一律2元</td>
<td>简易计算器</td><br /><br />
</tr>
</div>
<div style="position: relative; width: 1000x; height: 30px;">
<img src="img/buytitle_bg.gif" width="1000" height="30 " alt="">
<span style="position: absolute; bottom: 0; left: 0;right: 500;"> 确认商品价格和交易方式</span>
</div>
<div>
<table border="0" style="text-align: left;" >
<tr>
<th>商品名</th>
<th>原价</th>
<th>优惠价</th>
<th>打折</th>
<th>数量</th>
<th>删除</th>
</tr>
<tr>
<td>攀高搓捶背靠垫按摩器(蓝色)(定制)</td>
<td>¥258.00</td>
<td><span>¥129.00</span></td>
<td>50折</td>
<td><input type="text" /></td>
<td>删除</td>
</tr>
<tr>
<td>郝斌美国口语-美国口语成功训练系统(MP3)</td>
<td>¥480.00</td>
<td><span>¥292.90</span></td>
<td>60折</td>
<td><input type="text" /></td>
<td>删除</td>
</tr>
<tr>
<td>简奥斯汀全集(DVD-9)(赠BBC产品目录...)</td>
<td>¥138.00</td>
<td><span>¥103.90</span></td>
<td>80折</td>
<td><input type="text" /></td>
<td>删除</td>
</tr>
<tr>
<td>继续挑选商品</td>
<td colspan="2">¥527.40</td>
<!-- <td></td>-->
<td>你共节省:¥348.60</td>
<!--<td><input type="text" /></td>
<td>删除</td>-->
</tr>
</table>
</div>
<div style="position: relative; width: 1000x; height: 30px;">
<img src="img/buytitle_bg.gif" width="1000" height="30 " alt="">
<span style="position: absolute; bottom: 0; left: 0;right: 500;"> 补充您的邮件地址和联系人基本信息</span>
</div>
<div>
<from>
<table>
<tr>
<td>收件人:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>地 址:</td>
<td>
<input type="text" />
</td>
<td>请点击填写地址</td>
</tr>
<tr>
<td>电 话:</td>
<td>
<input type="text" size="2"/>-<input type="text" size="8" />-<input type="text" size="2"/>
</td>
<td>(区号-电话号码-分机)</td>
</tr>
</table>
</form>
</div>
<div>
<tr>
<td><img src="img/submit.gif" /></td>
</tr>
</div>
<div>
<table align="center">
<tr>
<td>友情链接:百度 | Google | 雅虎 | 淘宝 | 拍拍 | 易趣 | 当当 | 京东商城 | 迅雷 | 新浪 | 网易 | 搜狐 | 猫扑 | 开心网 | 新华网 | 凤凰网 </td>
</tr>
</table>
</div>
</body>
</html>
效果截图:
四、电子商品页面展示
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商品</title>
</head>
<body>
<div>
<table style="text-align: center;" align="center">
<tr style="background-image: url(img/素材/list_bg.gif);">
<th><br /><br /><br /><input type="checkbox" />全选</th>
<th><br /><br /><br />商品图片</th>
<th><br /><br /><br />商品名称/出售者/联系方式</th>
<th><br /><br /><br />价格</th>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" /></td>
<td><img src="img/素材/list1.jpg" /></td>
<td>
<p>杜比环绕,家庭影院必备,超真实享受</p>
<p>出售者:ling112233</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价:</p>
<p>2833.0</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" /></td>
<td><img src="img/素材/list2.jpg" /></td>
<td>
<p>NVDIA 9999GT 512MB 256bit极品显卡,不容错过</p>
<p>出售者:aipiaopiao110</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价:</p>
<p>2460.0</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" /></td>
<td><img src="img/素材/list3.jpg" /></td>
<td>
<p>精品热卖:高清晰,30寸等离子电视</p>
<p>出售者:阳光的挣扎</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价:</p>
<p>18880</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" /></td>
<td><img src="img/素材/list4.jpg" /></td>
<td>
<p>Sony索尼家用最新款笔记本</p>
<p>出售者:疯狂的镜无</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价:</p>
<p>5889.0</p>
</td>
</tr>
</table>
</div>
<div>
<table align="center">
<tr>
<td>友情链接:百度 | Google | 雅虎 | 淘宝 | 拍拍 | 易趣 | 当当 | 京东商城 | 迅雷 | 新浪 | 网易 | 搜狐 | 猫扑 | 开心网 | 新华网 | 凤凰网 </td>
</tr>
</table>
</div>
</body>
</html>
效果截图:
五、疯狂抢购
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>疯狂抢购</title>
</head>
<body>
<div>
<table style="text-align: center;border-right: outset;border-bottom: outset;border-left: outset;" align="center" border="0">
<tr>
<td colspan="3"><img src="img/QQ截图20200908161707.png" width="750"/></td>
</tr>
<tr>
<td><img src="img/素材/promote-1.jpg" /><br />惠普上商务移动应用英寸笔记本</td>
<td><img src="img/素材/promote-2.jpg" /><br />夏新N6 GPS真人语音导航手机<br />超低价疯抢 数量有限</td>
<td><img src="img/素材/promote-3.jpg" /><br />三星家庭影院 HT-TZ325 购机送<br />好礼(超值性价比)</td>
</tr>
<tr>
<td><img src="img/素材/laser-pen.jpg" /><br />明基MP512投影机 2899元送100<br />元京卷 SVGA 2200流明</td>
<td><img src="img/素材/mouse.jpg" /><br />罗技数据1TB移动鼠标729元开抢<br />了!</td>
<td><img src="img/素材/earphone.jpg" /><br />海森那尔极品耳机绝对不容错<br />过!</td>
</tr>
<tr>
<td><img src="img/素材/Wancom.jpg" /><br />亚马逊随时阅读,随时纪录,时<br />尚最佳选择!</td>
<td><img src="img/素材/Frame.jpg" /><br />优雅相框</td>
<td><img src="img/素材/notebook.jpg" /><br />IBM 2009最新上网本,特色尽显</td>
</tr>
</table>
</div>
</body>
</html>
效果截图:
在做本次作业的过程出现了许多的问题,大部分通过逛CSDN能够解决,还有小部分问题没能及时解决,只能做到以上的部分了。