ToB企服应用市场:ToB评测及商务社交产业平台

标题: 大学生网页作业之-个人主页、校园网站 [打印本页]
作者: 杀鸡焉用牛刀    时间: 2022-6-25 08:17
标题: 大学生网页作业之-个人主页、校园网站
作业要求 
1、共用头部文件header.html，其它页面用iframe调用
2、首页文件模块丰富，要求带有姓名、学号、个人简介
3、要有注册页面，注册页面姓名、密码、邮箱，姓名要求A-Z、0-9和下划线组合，密码最少为6位，邮箱必须包括@字符
4、html作业要用div+css+js，图片、html、js、css要放到相应的文件夹中
下载 地址 ：https://download.csdn.net/download/qq_40957277/85659962
详细要求：
设计一个网站，网站结构是所有页面都引入header.html页面作为头部的模板。页面的整体布局和样式统一用div+css，局部布局根据具体页面可以采用不同的布局方式。可以参考案例gouwu的网站结构和页面的布局。
新建一个header.html,包含logo图片的和横向导航的超链接。参考fashion案例的top.html效果。要求：用div标签进行布局，不用table布局；用ul标签和li标签实现超链接；超链接需要分别设置：a:link 、a:visited 、a:hover 、a:active具体可以自己决定，但一定要最佳效果的搭配。超链接的局部布局用float，左浮动。字体的样式自己决定。

新建一个index.html页面，头部用iframe引入刚新建的header.html作为页面模板，中间部分根据自己的设计来确定布局和样式，但一定要包含自己的学号和姓名，描述自己的兴趣爱好等信息，内容尽量丰富，并要局部布局和设置你认为最佳的css样式。总体布局可参考gouwu案例的test.html。
新建一个注册页面register.html,页面的整体布局用div，表单的局部布局用可以用table，也可以用div，可以自己决定。“登录名”可包含a-z、0-9和下划线的约束，“密码”至少包含6个字符的约束，“电子邮箱”必须包含@字符的约束都采用JavaScript实现验证。

作品展示：



作品代码： 
注册页面代码register.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>我的主页</title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body>
  11. <iframe src="header.html" frameborder="0" id="iframe" height="440" width="100%" scrolling="no"></iframe>
  12.   
  13.   
  14.           <form action="#" method="post" name="myForm">
  15.            <table border="0" align="center">
  16.                <h2>会员注册</h2>
  17.                <tr>
  18.                    <th>用户名</th>
  19.                    <td><input type="text" name="username"/>(可包含a-z、0-9和下划线)</td>
  20.                </tr>
  21.                <tr>
  22.                    <th>密码</th>
  23.                    <td><input type="password" name="password"/>(至少包含6个字符)</td>
  24.                </tr>
  25.                <tr>
  26.                    <th>邮箱</th>
  27.                    <td><input type="text" name="email"/>(必须包含@字符)</td>
  28.                </tr>
  29.                <tr>
  30.                    <td colspan="2" align="center">
  31.                        <input type="submit" value="提交" class="submit"/>
  32.                    </td>
  33.                </tr>
  34.            </table>
  35.        </form>
  36.       
  38.   
  39.   <iframe src="footer.html" frameborder="0" id="iframe" height="50" width="100%"  scrolling="no"></iframe>
  43. </body>
  44. </html>
复制代码
header.html
  1. <img src="https://blog.csdn.net/img/banner.jpg">
  2.    
  3.     <ul>
  4.       <li><a href="https://blog.csdn.net/index.html" target="_top">网站首页</a></li>
  5.       <li><a href="https://blog.csdn.net/jianjie.html" target="_top">个人简介</a></li>
  6.       <li><a href="https://blog.csdn.net/fengcai.html" target="_top">个人风采</a></li>
  7.       <li><a href="https://blog.csdn.net/mengxiang.html" target="_top">我的梦想</a></li>
  8.       <li><a href="https://blog.csdn.net/register.html" target="_top">注册</a></li>
  9.     </ul>
  10.   
  11. <link href="css/header.css" rel="stylesheet" type="text/css" />
复制代码
index.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>我的主页</title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  10. <iframe src="header.html" frameborder="0" id="iframe" height="440" width="100%" scrolling="no"></iframe>
  11.   
  12.   
  13.     <h3>我的资料</h3>
  14.     <ul>
  15.       <li>姓名：某某</li>
  16.       <li>学号：465465</li>
  17.       <li style="line-height:2">简介：</li>
  18.     </ul>
  19.     <p><img src="https://blog.csdn.net/img/t5.jpg" ></p>
  20.   
  21.   
  22.     <h3>个人事迹</h3>
  23.     <p> <img src="https://blog.csdn.net/img/t9.jpg" style="float:right;margin-left: 30px; width:200px;"> 个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹
  24.     </p>
  25. <p class="line"></p>
  26.     <h3>我的梦想</h3>
  27.     <p> <img src="https://blog.csdn.net/img/t4.jpg" style="float:right;margin-left: 30px; width:200px;">  我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想</p>
  28.   
  29.   
  30.     <h3>永远铭记</h3>
  31.     <p>在成功的道路上，激情是需要的，志向是可贵的，但更重要的是那毫无情趣的近乎平常的坚守的毅力和勇气。 </p>
  32.   
  33.   <iframe src="footer.html" frameborder="0" id="iframe" height="50" width="100%"  scrolling="no"></iframe>
  37. </body>
  38. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4