IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 大学生网页作业之-个人主页、校园网站 -> 正文阅读

[JavaScript知识库]大学生网页作业之-个人主页、校园网站

作业要求?

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

<!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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/yanzheng.js"></script>
</head>
<body>
<div id="container">
<iframe src="header.html" frameborder="0" id="iframe" height="440" width="100%" scrolling="no"></iframe>
  
  <div id="zhuce">
	  <form action="#" method="post" name="myForm">
           <table border="0" align="center">
               <h2>会员注册</h2>
               <tr>
                   <th>用户名</th>
                   <td><input type="text" name="username"/><span>(可包含a-z、0-9和下划线)</span></td>
               </tr>
               <tr>
                   <th>密码</th>
                   <td><input type="password" name="password"/><span>(至少包含6个字符)</span></td>
               </tr>
               <tr>
                   <th>邮箱</th>
                   <td><input type="text" name="email"/><span>(必须包含@字符)</span></td>
               </tr>
               <tr>
                   <td colspan="2" align="center"> 
                       <input type="submit" value="提交" class="submit"/>
                   </td>
               </tr>
           </table>
       </form>
       

  </div>
  <iframe src="footer.html" frameborder="0" id="iframe" height="50" width="100%"  scrolling="no"></iframe>
</div>


</body>
</html>

header.html

<div id="banner"> <img src="img/banner.jpg"> </div>
  <div id="globallink"> 
    <ul>
      <li><a href="index.html" target="_top">网站首页</a></li>
      <li><a href="jianjie.html" target="_top">个人简介</a></li>
      <li><a href="fengcai.html" target="_top">个人风采</a></li>
      <li><a href="mengxiang.html" target="_top">我的梦想</a></li>
      <li><a href="register.html" target="_top">注册</a></li>
    </ul>
  </div>
<link href="css/header.css" rel="stylesheet" type="text/css" />

index.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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<iframe src="header.html" frameborder="0" id="iframe" height="440" width="100%" scrolling="no"></iframe>
  
  <div id="news">
    <h3><span>我的资料</span></h3>
    <ul>
      <li>姓名:某某</li>
      <li>学号:465465</li>
      <li style="line-height:2">简介:</li>
    </ul>
    <p><img src="img/t5.jpg" ></p>
  </div>
  <div id="story">
    <h3>个人事迹</h3>
    <p> <img src="img/t9.jpg" style="float:right;margin-left: 30px; width:200px;"> 个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹个人事迹
    </p>
<p class="line"></p>
    <h3>我的梦想</h3>
    <p> <img src="img/t4.jpg" style="float:right;margin-left: 30px; width:200px;">  我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想我的梦想</p>
  </div>
  <div id="thank">
    <h3>永远铭记</h3>
    <p>在成功的道路上,激情是需要的,志向是可贵的,但更重要的是那毫无情趣的近乎平常的坚守的毅力和勇气。 </p>
  </div>
  <iframe src="footer.html" frameborder="0" id="iframe" height="50" width="100%"  scrolling="no"></iframe>
</div>


</body>
</html>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-20 22:57:21  更:2022-06-20 22:59:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:29:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码