web前端作业

【任务2-1】实现Q-Walking E&S购物模块首页的设计

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>NBA-购物栏目</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
    <td bgcolor="#f7f7f7">
        <table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td class="padding-top"><img src="" >收藏|HI,欢迎来订购!
                <a href="" class="orange">[请登陆]</a>
                <a href="" class="orange">[免费注册]</a></td>
                <td align="right">客户服务<img src="" >&nbsp;网站导航
<img src="" >&nbsp;<span class="droparrow">
    <span class="shopcart"></span>我的购物车
    <span class="orange">0</span>件<img src="" />
</span></td>
            </tr>
        </table>
    </td>
    </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="center" bgcolor="#00c">
    <tr>
        <td height="95"><a href="index.html"><img src="F:\Sublime Text 3 中文优化版\project\imgic\nba1.png"></a></td>
        <td align="right"><font color="#0A0" size="12">NBASHOPPING.COM</font></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626">
    <tr>
<td width="200">&nbsp;</td>
               <td width="80" align="center" class="nav_active">
                   <a href="shopping        <td>
           <table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16">
           <tr>
               Index.html" class="white">首页</a>  </td>
<td width="80" align="center" class="nav_active">
                   <a href="shoppingShow.html" class="white">最新上架</a>  </td>
                   <td width="100" align="center">品牌活动</td>
                   <td width="100" align="center">原厂直供</td>
                   <td width="100" align="center">限时抢购</td>
                   <td width="100" align="center">团购</td>
                   <td width="100" align="center">促销打折</td>
                   <td width="200" align="center">&nbsp;</td>
                   </tr>
                   </table>
                   </td>
                   </tr>
</table>
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center" class="padding-top">
    <tr>
        <td width="220" valign="top">
            <table width="100%" border="0" cellspacing="1" cellpadding="0" align="table1" bgcolor="#e5e4e1">
                <tr><th align="left" bgcolor="#0f0">衣服</th></tr>
                <tr>
                    <td><span class="red_dot"></span><a href="#">卫衣</a>
                        <img src="imgic/wy.jpg" align="right">
                    </td>
                    </tr>
    <tr>
                    <td><span class="red_dot"></span><a href="#">球衣</a>
                        <img src="imgic/qy.jpg" align="right">
                    </td>
                    </tr>
                     <tr>
                    <td><span class="red_dot"></span><a href="#">球裤</a>
                                            <img src="imgic/qk.jpg" align="right">
                    </td>
                    </tr>
                     <tr>
                    <td><span class="red_dot"></span><a href="#">球鞋</a>
                        <img src="imgic/qx.jpg" align="right">
                    </td>
                    </tr>
                    </table>
                    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="table2" bgcolor="#e5e4e1">
                    <tr><th bgcolor="#0f0" align="left">配件</th></tr>
                <tr>
                    <td><span class="red_dot"></span><a href="#">帽子</a>
                        <img src="imgic/mz.jpg" align="right">
                    </td>
                    </tr>
 <tr>
                    <td><span class="red_dot"></span><a href="#">牙套</a>
                        <img src="" align="right">
                    </td>
                    </tr>
                     <tr>
                    <td><span class="red_dot"></span><a href="#">护腕</a>
                        <img src="" align="right">
                    </td>
                    </tr>
                     <tr>
                    <td><span class="red_dot"></span><a href="#">袜子</a>
                        <img src="" align="right">
                    </td>
                    </tr>
            </table>
        </td>
        <td width="716" valign="top">
            <table width="100%" border="0 cellspacing="0" cellpadding="0">
                <tr>
                    <td align="center" valign="top">
                        <img src="imgic/zy.jpg" width="690" height="350">
                    </td>
                    <td valign="top">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eee">
                                        <tr>
                                            <td height="35" class="notice_title">热门比赛</td>
                                        </tr>
                                        <tr>
                                        <td bgcolor="#fff">
                                            <table width="95%" class="padding_top">
                                                <tr><td height="30" class="notice_text">勇士VS火箭</td></tr>
                                                 <tr><td height="30" class="notice_text">凯尔特人VS骑士</td></tr>
                                                  <tr><td height="30" class="notice_text">猛龙VS雷霆</td></tr>
                                                   <tr><td height="30" class="notice_text">开拓者VS湖人</td></tr>
                                                    <tr><td height="30" class="notice_text">国王VS快船</td></tr>
                                            </table>
                                        </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr><td height="8"></td></tr>
                <tr>
                    <td>
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
                            <tr>
                                <td align="center">
                                    <img src="imgic/tj1.jpg" width="100" height="45">
                                </td>
                                <td align="center">
                                    <img src="imgic/tj2.jpg" width="100" height="45">
                                </td>
                                <td align="center">
                                    <img src="imgic/tj3.jpg" width="100" height="45">
                                </td>
                                <td align="center">
                                    <img src="imgic/tj4.jpg" width="100" height="45">
                                </td>
                                <td align="center">
                                    <img src="imgic/tj5.jpg" width="100" height="45">
                                </td>
                                <td align="center">
                                    <img src="imgic/tj6.jpg" width="100" height="45">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
<td>
    <table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
        <tr>
            <td width="20%" bgcolor="#fff">
                <table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
    <td><img src="imgic/cx1.jpg" width="100" height="100"></td>
    <td class="font14">猜你喜欢<br/>[2.5折]NBA adidas/克里夫蘭騎士Kyrie Irving Swingman
NT699.00</td>
</tr>
                 </table>
            </td>
        </tr>
    </table>
</td>


</tr>
<tr>
<td>
    <table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
        <tr>
            <td width="20%" bgcolor="#fff">
                <table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
    <td><img src="imgic/cx2.jpg" width="100" height="100"></td>
    <td class="font14">猜你喜欢<br/>NBA/ LOGO Tee/ 休斯頓火箭 (black) NT999.0</td>
</tr>
                 </table>
            </td>
        </tr>
    </table>
</td>


</tr>
<tr>
<td>
    <table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
        <tr>
            <td width="20%" bgcolor="#fff">
                <table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
    <td><img src="imgic/cx3.jpg" width="100" height="100"></td>
    <td class="font14">猜你喜欢<br/>NBA/ STANCE cartoon collection Kobe Bryant_YEL
NT680.00</td>
</tr>
                 </table>
            </td>
        </tr>
    </table>
</td>


</tr>
</table>
 </td>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg">
    <tr>
        <td class="padding-top">
            <table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="20%" align="center"><img src="imgic/gray1.jpg"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<td bgcolor="#efefef" class="foot_line padding-top">
    <table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="center" valign="top" ><img src=""><br><img src=""></td>
            <td width="15%" valign="top">
                <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr><td class="font16 padding-bottom">新手指导</td></tr>
                    <tr><td>用户注册</td></tr>
                    <tr><td>物流流程</td></tr>
                    <tr><td>服务协议</td></tr>
                </table>
            </td>
        </tr>
    </table>
</td>
<tr>
    <td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q-nba NBA中国区版权所有 </td>
</tr>
</body>

</html>

【任务2-2】实现Q-Walking E&S后台管理页面。

top.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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>顶部导航页面</title>
     <link href="css/layout.css" rel="stylesheet" type="text/css">
      <link href="css/top.css" rel="stylesheet" type="text/css">
</head>
<body style="background: url(imgic/topbg.gif) repeat-x;">
<div class="topleft"><a href="index.html" target="_parent">
<img src="imgic/logo.png" title="系统首页"> </a>
</div>
<ul class="nav">
    <li><a href="shoppingIndex.html" target="_parent" class="selected">
        <img src="imgic/" title="网站前台"/><h2>网站前台</h2></a></li>
   <li><a href="foodlist.html" target="rightFrame">
        <img src="imgic/" title="后台首页"/><h2>后台首页</h2></a></li>
        <li><a href="addgoods.html" target="rightFrame">
        <img src="imgic/" title="添加商品"/><h2>添加商品</h2></a></li>
        <li><a href="addmovies.html" target="rightFrame">
        <img src="imgic/" title="添加影视"/><h2>添加影视</h2></a></li>
</ul>
<div class="topright">
    <ul>
        <li><span><img src="" title="帮助" class="helping"/></span><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="shoppingIndex.html" target="_parent">退出</a></li>


    </ul>
    <div class="user"><span>admin</span><i>消息</i><b>5</b></div>
</div>
</body>

</html>

left.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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>左侧导航页面</title>
     <link href="css/left.css" rel="stylesheet" type="text/css">
</head>
<body style="background: #f0f9fd;">
<div class="lefttop"><span></span>功能菜单</div>
<dl class="leftmenu">
    <dd>
        <div class="title">
            <span><img src=""></span>购物后台管理
        </div>
        <ul class="menuson">
            <li><cite></cite><a href="addgoods.html" target="rightFrame">添加商品</a><i></i></li>
            <li class="active"><cite></cite><a href="shoplist.html" target="rightFrame">商品列表</a><i></i></li>
            <li><cite></cite>商品类型<i></i></li>
        </ul>
    </dd>  <dd>
        <div class="title">
            <span><img src=""></span>影视后台管理
        </div>
        <ul class="menuson">
            <li><cite></cite><a href="addmovies.html" target="rightFrame">添加影片</a><i></i></li>
            <li class="active"><cite></cite><a href="movielist.html" target="rightFrame">影片列表</a><i></i></li>
            <li><cite></cite>影片类型<i></i></li>
        </ul>
    </dd>


</dl>


</body>

</html>

shop_search.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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品检索</title>
     <link href="css/layout.css" rel="stylesheet" type="text/css">
     <link href="css/list.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="seachform">
    <li>
        <div class="vocation">
<select class="select3">
    <option>商品类型</option>
    <option>衣服</option>
    <option>配件</option>


</select>
        </div>
    </li>
    <li><input type="text" class="scinput" value="请输入商品名称"/></li>
    <li><input name="searchBtn" type="button" class="scbtn" value="查询"/></li>
</ul>
</body>

</html>

main.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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>NBA-购物栏目管理系统</title>
</head>
<frameset cols="187" frameborder="no" border="0" framespacing="0">
    <frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame"/>
    <frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize" id="leftFrame" title="leftFrame"/>
    <frame src="shoplist.html" name="rightFrame" scrolling="no" noresize="noresize" id="rightFrame" title="rightFrame"/>
    </frameset>
</frameset>
<body>
    您的浏览器不支持框架集
</body>

</html>


【任务3-1】实现Q-Walking E&S用户注册页面。

【任务3-2】实现Q-Walking E&S后台管理模块-商品添加页面。


register.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>用户注册NBA</title>
<link href="css/register.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--顶部区域 start-->
 <table width="100%" border="0" cellspacing="0" cellpadding="0"  class="top_line">
  <tr>
  <td bgcolor="#f7f7f7">
  </td>
  </tr>
 </table>
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><img src=""></td>
<td align="right"><img src=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626">
<tr>
<td>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f8f8f8">
<tr>
<td>
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr>
<td valign="top"><h2 align="center">用户注册</h2>
<hr width="90%" align="center" color="#ccc"/></td>
<td width="420" rowspan="2" valign="middle">
<img src="images/zhuce_pic.jpg" align="right"/></td>
</tr>
<tr>
<td valign="top">
<form action="#" method="post" enctype="multipart/form-data">
<table width="90%" border="0" cellspacing="0" cellpadding="0" class="reg" align="center">
<tr>
<td width="80">用户名:</td>
<td><input name="userName" type="text" id="userName" value="请输入用户名"/></td>
</tr>
<tr>
<td>邮箱地址:</td>
<td><input name="email" type="text" id="email" value="请输入邮箱地址"/></td>
</tr>
<tr>
<td>设置密码:</td>
<td><input name="userPwd" type="password" id="userPwd"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="gray12">6-12个字符,由字母,数字和符号的两种以上组合。&nbsp;</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input name="userRePwd" type="password" id="userRePwd"/></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input name="realName" type="text" id="realName" value="请输入真实姓名"/></td>
</tr>
<tr>
<td>您的性别:</td>
<td><input type="radio" name="sex" value="radio" checked/>男
<input type="radio" name="sex" value="radio"/>女</td>
</tr>
<tr>
<td>上传头像:</td>
<td><input type="file" name="headPic" id="headPic"/></td>
</tr>
<tr>
<td>您的手机:</td>
<td><input name="mobile" type="text" id="mobile" value="请输入您的手机号"/></td>
</tr>
<tr>
<td>单位名称:</td>
<td><input name="company" type="text" id="company" value="请输入单位名称"/></td>
</tr>
<tr>
<td>单位地址:</td>
<td><select name="province">
<option>请选择省份</option>
<option>北京市</option>
<option>上海市</option>
<option>山东省</option>
</select>
<select name="city">
<option>请选择城市</option>
<option>青岛市</option>
<option>济南市</option>
<option>东营市</option>
</select>
<select name="area">
<option>请选择区</option>
<option>四方区</option>
<option>市南区</option>
<option>市北区</option>
</select>
</td>
<tr>
<td>&nbsp;</td>
<td><input name="address" type="text" id="address" value="请输入街道地址"/></td>
</tr>
<tr>
<td>您的爱好:</td>
<td><input name="hobby" type="checkbox" value="购物"/>购物
<input name="hobby" type="checkbox" value="影视"/>影视
</td>
</tr>
<tr>
<td>协议内容:</td>
<td><textarea cols="30" row="3"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="button" value="提交"/></td>
</tr>
</tr>
</table>
</form>
</td>
</tr>
</table>
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" class="padding_bottom">
<tr>
<td align="center"><img src="images/shop.jsp" class="bian"/></td>
<td align="center"><img src="images/movie.jsp" class="bian"/></td>
</tr>
</table></td>
</tr>
</table>
<div class="foot_line"></div>
   <p align="center" class="padding-top">Copyright   2015-2020  NBA-SHOPPING
     版权所有<br/>  </p>
    <div class="center"></div>




</body>

</html>

addgoods.html

 <!DOCTYPE html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset="utf-8"/>
      <<title>添加商品页面</title>
  </head>
<body>
    <div class="place"><span>位置:</span>
    <ul class="placeul">
    <li> <a href="main.html" target="_parent">首页</li>
    <li> <a href="#">添加商品</a></li>
    </a>
    </ul>
    </div>
    <div class="formbody">
    <table width="100%" border="0" cellpadding="0" class="table1">
    <tr>
        <td><label>商品缩略图<b>*</b></label></td>
        <td><input name="" type="file" multiple=/></td>
    </tr>
    <tr>
        <td><label>商品名称<b>*</b></label></td>
        <td><input name="" type="text" class="dfinput" value="请填写商品名称" style="width:518px;"/></td>
    </tr>
    <tr>
        <td><label>商品类别<b>*</b></label></td>
        <td><select name="select3">
            <option >男装</option>
            <option >女装</option>
            <option >童装</option>
            <option >运动</option>
            <option >其他</option>
        </select></td>
    </tr>
    <tr><td><label>商品单价<b>*</b></label></td>
    <td><input name="goodsPrice" type="text" class="dfinput" style="width:100px;"/>元</td>
    </tr>
    <tr>
        <td><label>团购价<b>*</b></label></td>
        <td><input name="goodsPrice" type="text" class="dfinput" style="width:100px;"/>元</td>
    </tr>
    <tr>
        <td><label>商品数量<b>*</b></label></td>
        <td><input name="amount" type="text" class="dfinput" style="width:100px;"/>件</td>
    </tr>
        <tr>
        <td><label>发布日期<b>*</b></label></td>
        <td><input name="upTime" type="text" class="dfinput" style="width:100px;"/></td>
    </tr>
        <tr>
        <td><label>是否审核<b>*</b></label></td>
        <select name="check" class="select3">
            <option >已审核</option>
            <option >未审核</option>
        </select>
    </tr>
    <tr>
    <td><label>商品描述<b>*</b></label></td>
    <td><textarea name="content" rows="3" id="content"></textarea></td>
   </tr>
   <tr>
       <td></td>
       <td><input type="button" class"btn" value="马上发布" /></td>
   </tr>
   </table>
</div>
</body>

个人网页是指一个个人展示自己信息和作品的网站,通常用来展示个人的专业技能、工作经历、项目经验、个人作品等内容。对于web前端作业的个人网页来说,一般需要考虑以下几个方面。 首先,设计界面。一个好的个人网页需要有清晰、美观的界面设计,包括网页的布局、颜色搭配、字体选择等。界面设计要符合个人风格,并且要注重用户体验,保证用户能够方便地浏览信息。 其次,编写网页代码。作为web前端作业,个人网页需要用HTML、CSS和JavaScript等前端技术来编写。通过合理的标签和样式设置,来实现网页的各种功能,包括导航栏、轮播图、响应式布局等。 另外,需要考虑网页的信息展示。个人网页的目的是展示个人信息和作品,因此需要合理地组织内容,包括个人简介、技能展示、工作经历、项目经验、作品展示等。可以通过分块、分类和标签等方式使信息更易于理解和浏览,同时也可以增加交互效果,使网页更具吸引力。 最后,要保证个人网页的兼容性和性能。考虑到不同浏览器和设备的差异,需要进行浏览器兼容性测试,以确保网页在各种环境下良好运行。同时还要考虑网页加载速度,尽量减少文件大小和请求次数,提高网页性能。 综上所述,web前端作业的个人网页是一个展示个人信息和作品的网站,需要考虑界面设计、编写网页代码、信息展示和兼容性性能等方面。通过合理的设计和编写,打造一个令人满意的个人网页。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值