web前端期末大作业 html+css学生心理 7页主题网页设计

news2024/11/16 10:45:11

⛵ 源码获取 文末联系 ✈

Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家 | HTML期末大学生网页设计作业

  1. HTML：结构

  2. CSS：样式
    在操作方面上运用了html5和css3，
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript：做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是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="style/style.css" rel="stylesheet" type="text/css" media="all" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery-plugin-slide.js"></script>
  <script >
 
 window.onload = function() {
    var text = document.querySelector(".text");
    var btn = document.querySelector(".btn");
     
    btn.addEventListener("click", function() {
        var inputValue = text.value; //获取输入的文本
        if(inputValue == "首页") {
            window.location.href = "index.html";
        }
		
        else if(inputValue == "资讯") {
            window.location.href = "meiju.html";
        }
		
		
        else if(inputValue == "招聘") {
            window.location.href = "meiwen.html";
        }
       else  if(inputValue == "旅游") {
            window.location.href = "suibi.html";
        }
       else  if(inputValue == "论坛") {
            window.location.href = "zheli.html";
        }

				
		
        else {
            alert("您所输入的内容不合法！");
        }
    }, false);
};
 
 
 </script>

</head>
<body>
<div class="ww"><a href="#"><img src="images/a.gif" /></a></div>
<div id="header">




<div class="ss">
   <div class="logo">
       <a href="index.html"><img src="images/logo.png" /></a>
    </div>
   
 <div class="kk"><input type="text" class="text"> 
 
<button type="button" class="btn">搜索</button></div>  

</div>  
 
    <div id="nav">
     <ul>
        <li class="active"><a href="index.html">首页</a></li>
        <li><a href="wenda.html">心里问答</a></li>
        <li><a href="ceshi.html" target="_blank">开始测试</a></li>
        <li><a href="denglu.html">登录</a></li>
		<li><a href="zhuce.html">注册</a></li>
        <li><a href="xinxi.html">人员信息</a></li>
        <li><a href="zixun.html">咨询辅导</a></li>
     </ul>
    </div>
</div>
<div class="clear"></div>
<div class="ar">	
    <div id="content">
	 <div class="iright">
	  <h3>相关书籍</h3>
       <dl>
	    <dt><a href="#"><img src="images/img1.jpg"></a></dt>
	    <dd>大学生人际交往心理学</dd>
	  </dl>
	  <dl>
	    <dt><a href="#"><img src="images/img2.jpg"></a></dt>
	    <dd>大学生心里危机干预</dd>
	  </dl>
	  <dl>
	    <dt><a href="#"><img src="images/img3.jpg"></a></dt>
	    <dd>大学生心理健康教程</dd>
	  </dl>
	  <dl>
	    <dt><a href="#"><img src="images/img4.jpg"></a></dt>
	    <dd>大学心理健康教育</dd>
	  </dl>
	  <dl>
	    <dt><a href="#"><img src="images/img5.jpg"></a></dt>
	    <dd>青少年心理健康</dd>
	  </dl>	  
	 </div>
	 <div class ='Homeslide' >
	<div class ='Homeslide_bigwrap'>
		<div class='Homeslide_hand0'></div>
		<div class='Homeslide_hand1'></div>
		<a target='_blank' class='Homeslide_bigpicdiv_mask'>loading...</a>
		<div class='Homeslide_bigpicdiv'>
			<a href='#' target='_blank'><img src=""></a>
		</div>
		<div class='Homeslide_detail'>
			<p>loading...</p>
			
		</div>
	</div>
	<div class='Homeslide_thumb'>
		<ul>loading...</ul>
	</div>
</div></center>
<script type="text/javascript">
//data
  var home_slide_data = 
[{
    "title": "5分钟心理小游戏",
    "subtitle": "5分钟心理小游戏",
    "image": "images\/img12.jpg",
    "thumb": "images\/img12.jpg",
    "summary": "“《5分钟心理小游戏》该书主要通过心理游戏在娱乐中了解自己，“认识自己、了解自己”，是一个古老而永恒的话题……",
    "mark": "0"
}, {
    "title": "青少年心理健康",
    "subtitle": "青少年心理健康",
    "image": "images\/img6.jpg",
    "thumb": "images\/img6.jpg",
    "summary": "《青少年心理健康》是盛秋鹏于2008年1月1日由人民卫生出版社出版的一本图书。该书是全国中等卫生职业教育卫生部“十一五”规划教材选修课，是中等卫生职业教育开设的一门新课程.....",
    "mark": "0"
}, {
    "title": "人际交往心理学",
    "subtitle": "人际交往心理学",
    "image": "images\/m1.jpg",
    "thumb": "images\/m1.jpg",
    "summary": "《人际交往心理学》是首都师范大学出版社2003年2月出版的图书，作者是刘晓新和毕爱萍。本书的主要内容是对人们在人际交往中遇到的烦恼和困惑进行指导，以帮助人们构建良好的人际关系....",
    "mark": "0"
}, {
    "title": "5分钟心理小游戏",
    "subtitle": "5分钟心理小游戏",
    "image": "images\/img12.jpg",
    "thumb": "images\/img12.jpg",
    "summary": "“《5分钟心理小游戏》该书主要通过心理游戏在娱乐中了解自己，“认识自己、了解自己”，是一个古老而永恒的话题……",
    "mark": "0"
}, {
   "title": "青少年心理健康",
    "subtitle": "青少年心理健康",
    "image": "images\/img6.jpg",
    "thumb": "images\/img6.jpg",
    "summary": "《青少年心理健康》是盛秋鹏于2008年1月1日由人民卫生出版社出版的一本图书。该书是全国中等卫生职业教育卫生部“十一五”规划教材选修课，是中等卫生职业教育开设的一门新课程.....",
    "mark": "0"
}, {
    "title": "人际交往心理学",
    "subtitle": "人际交往心理学",
    "image": "images\/m1.jpg",
    "thumb": "images\/m1.jpg",
    "summary": "《人际交往心理学》是首都师范大学出版社2003年2月出版的图书，作者是刘晓新和毕爱萍。本书的主要内容是对人们在人际交往中遇到的烦恼和困惑进行指导，以帮助人们构建良好的人际关系....",
    "mark": "0"
}];
  //console.log(home_slide_data);
//实例化...................................
$('.Homeslide').homeslide(home_slide_data,true,3000);
</script>
	<div class="wcontent">
	
     <div class="jianjie">
        <h3>什么是大学生心理健康？</h3>
        <p><img src="images/1.jpg" width="310" align="left" / style="padding-right:14px;">《大学生心理健康》是心理学术用语。指的是大学生的心理具有青年中期的许多特点，但作为一个特殊群体，大学生又不能完全等同于社会上的青年。心理是否健康一般采用量表测量，其标准不是固定不变的。心理健康标准随着时代变迁、文化背景变化而变化。</p>
        <p>大学生群体，一个看似轻松，事实上却承担巨大压力的群体，学业、生活、情感、就业多重大山的压迫下，大学生的心理健康已经告急。一个个血淋淋的事实，在不断警示我们，要关注大学生心理健康。2000年，由北师大心理系团总支、学生会倡议，十多所高校响应，并经北京市团委、学联批准，确定每年的5月25日为全国大学生心理健康日，目的是呼吁大学生关注自己的心理健康，并以此掀起社会关注心理健康热潮。</p>
     </div>
      
	 <div class="b-box">
	    <h3>健康标准描述</h3>
	    <dl>	
		<a href="#"><img src="images/m4.jpg" /></a>
		<dt><a href="#">标准界限</a></dt>
		<dd class="tz">大学生心理健康与不健康也并无明显界限，而是一个连续化的过程，如将正常比作白色，将不正常比作黑色，那么在白色与黑色之间存在着...</dd>
		</dl>
		<dd class="lb"><a href="#">①有适度的安全感，有自尊心，对自我的成就有价值感。</a></dd>
		<dd class="lb"><a href="#">②适度地自我批评，不过分夸耀自己也不过分苛责自己</a></dd>
		<dd class="lb"><a href="#">③在日常生活中，具有适度的主动性，不为环境所左右</a></dd>
		<dd class="lb"><a href="#">④理智，现实，客观，与现实有良好的接触，能容忍生活中挫折的打击，无过度的幻想。</a></dd>
		<dd class="lb"><a href="#">⑤适度地接受个人的需要，并具有满足此种需要的能力。</a></dd>
		<dd class="lb"><a href="#">⑥有自知之明，了解自己的动机和目的，能对自己的能力作客观的估计。</a></dd>
		<dd class="lb"><a href="#">⑦能保持人格的完整与和谐，个人的价值观能适应社会的标准，对自己的工作能集中注意力</a></dd>
		<dd class="lb"><a href="#">⑧有切合实际的生活目标。</a></dd>	 
	 </div>
	 <div class="b-box">
	    <h3>问题集锦</h3>
	    <dl>	
		<a href="#"><img src="images/m5.jpg" /></a>
		<dt><a href="#">问题集锦</a></dt>
		<dd class="tz">目前大学生的心理状况让人担忧。近几次心理健康调查结果显示，大学生现已成为心理弱势群体，心理处于不健康或亚健康状态的学生约占五成。</dd>
		</dl>
		<dd class="lb"><a href="#">1、智力正常。智力正常是人正常生活最基本的心理条件。</a></dd>
		<dd class="lb"><a href="#">2、了解自我，悦纳自我。</a></dd>
		<dd class="lb"><a href="#">3、接受他人，善与他人相处。</a></dd>
		<dd class="lb"><a href="#">4、热爱生活，乐于参加工作与学习。</a></dd>
		<dd class="lb"><a href="#">5、能协调与控制情绪，心境良好。</a></dd>
		<dd class="lb"><a href="#">6、心理行为符合年龄特征。</a></dd>
		<dd class="lb"><a href="#">7、人格和谐完整。心理健康的人，人格结构包括气质、能力</a></dd>
		<dd class="lb"><a href="#">8、心理健康的人能够面对现实、接受现实，并能够主动地去适应现实，进一步地改造现实，而不是逃避现实。</a></dd>	 
	 </div>
	 
	 
	 
	 
	</div>
	<div class="hot">
	<h3>影响因素</h3>
	<ul>
	<li><img src="images/hot.gif" /><a href="#">环境变迁</a></li>
	<li><img src="images/hot.gif" /><a href="#">学业期望 </a></li>
	<li><img src="images/hot.gif" /><a href="#">人际关系</a></li>
	<li><img src="images/hot.gif" /><a href="#">自我认知</a></li>
	<li><img src="images/hot.gif" /><a href="#">心理冲突</a></li>
    <li><img src="images/hot.gif" /><a href="#">生活事件</a></li>
	<li><img src="images/hot.gif" /><a href="#">家庭环境</a></li>
	</ul>
	
	
	</div>
	
       
	   

</div>
<div class="clear"></div>
<div id="footer">
<p>
首页 | 心里问答 | 开始测试 |登录 | 注册 | 人员信息</p>
 <p>© Copyright 2019 大学生心理测试网</p>
  
</div>
</div>
</body>
</html>

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/31616.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Oculus Deeplink

Oculus Deeplink

DeepLink 初始化 platform sdk 后设置 应用启动回调判断应用打开的方式发起应用跳转 接收应用跳转 GroupPresence 本文档基于 GroupPresenceSample 脚本逻辑编写&#xff0c;展示通过群组状态发起用户邀请&#xff0c;以及响应对应回调。参考 Oculus 工程 SharedSpaces 使…
阅读更多...
【安装教程】vscode安装教程（超详细）

【安装教程】vscode安装教程（超详细）

Visual Studio Code&#xff08;简称 VSCode&#xff09;是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构功能&#xff0c;并且内置了命令行工具和 Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置&#xff0c;也可以…
阅读更多...
想裁剪视频时长，用电脑怎么裁剪视频时长

想裁剪视频时长，用电脑怎么裁剪视频时长

大家有没有碰到过这种一种情况&#xff0c;就是我们在社交平台上发布视频时&#xff0c;会因为视频时长过长这个问题而导致视频发布失败。那我们要怎么处理这个问题呢&#xff1f;其实我们可以使用一些剪辑软件&#xff0c;将视频裁剪&#xff0c;只截取视频里面较为精彩的部分…
阅读更多...
hadoop集群安装(三)：创建同步工具并安装jdk

hadoop集群安装(三)：创建同步工具并安装jdk

文章目录说明分享环境创建同步工具编写脚本设置为系统命令安装jdk总结说明 搭建好集群虚拟机&#xff0c;新建同步工具并安装jdk&#xff0c;同步工具方便管理集群&#xff0c;某些操作和一条命令&#xff0c;同步所有节点&#xff0c;增加集群操作效率。 分享 大数据博客列表…
阅读更多...
组件之间通过bus中央事件总线进行通信

组件之间通过bus中央事件总线进行通信

案例完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widt…
阅读更多...
66. SAP ABAP Function Module 的动态调用方式使用方式介绍

66. SAP ABAP Function Module 的动态调用方式使用方式介绍

在本教程前面的步骤 7，我们介绍了 ABAP Function Module 的基本使用方法： 7. ABAP function module 的使用最近我的知识星球有朋友提问： 大佬，我想问一下动态获取到物料主数据的字段名之后，如何将获取到的字段名去与bapi中的字段名对应起来从而去修改物料主数据中对应的字…
阅读更多...
多维时序 | MATLAB实现CNN-GRU多变量时间序列预测

多维时序 | MATLAB实现CNN-GRU多变量时间序列预测

多维时序 | MATLAB实现CNN-GRU多变量时间序列预测 目录多维时序 | MATLAB实现CNN-GRU多变量时间序列预测基本介绍模型特点程序设计学习总结参考资料基本介绍 本次运行测试环境MATLAB2020b&#xff0c;MATLAB实现CNN-GRU多变量时间序列预测&#xff0c;卷积门控循环单元。 模型特…
阅读更多...
ComponentAce FlexCompress强大功能

ComponentAce FlexCompress强大功能

ComponentAce FlexCompress强大功能 FlexCompress是一个高速压缩库&#xff0c;旨在为您的应用程序提供归档功能。此解决方案提供了灵活的压缩和强大的加密算法&#xff0c;使您可以快速轻松地将归档或备份功能集成到程序中。 FlexCompress包括我们新的独特技术&#xff0c;即交…
阅读更多...
分片架构设计技巧

分片架构设计技巧

Elasticsearch集群设计技巧 ES的基本架构 节点可以配置为不同角色&#xff0c;通过选举Master管理集群Coordinating&#xff1a;协调节点&#xff1b;Master&#xff1a;管理节点&#xff1b;Data&#xff1a;数据存储节点 数据是按照索引分片的&#xff0c;而不是按照节点分片…
阅读更多...
在C#方法中 out、ref、in、params 关键字的用法

在C#方法中 out、ref、in、params 关键字的用法

out&#xff1a;关键字&#xff1a; 指定的参数在进入函数时会清空自己&#xff0c;必须在函数内部赋初值 ref关键字&#xff1a; 指定的参数必须在进入函数时赋初值&#xff0c;在函数内部可以重新赋值 In关键字&#xff1a; 指定的参数必须在进入函数时赋初值&#xff0c;…
阅读更多...
MySQL进阶篇（五）- 锁

MySQL进阶篇（五）- 锁

一、概述&#xff08;P121&#xff09; 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算资源&#xff08;CPU、 RAM、I/O&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效性…
阅读更多...
51、部署PaddleSeg的pp_liteseg到MNN框架、OpenVINO框架和OAK框架、NPU(RK3399 PRO)框架

51、部署PaddleSeg的pp_liteseg到MNN框架、OpenVINO框架和OAK框架、NPU(RK3399 PRO)框架

基本思想&#xff1a;需要一个快的实例分割模型&#xff0c;由于需要配置oak使用&#xff0c;所以就记录和实现一下微软社区提供的思路&#xff0c;去部署PaddleSeg的轻量级(实际是语义)分割模型 所有的实验模型&#xff0c;花了两天。。。mmp　自己训练模型&#xff0c;开始整…
阅读更多...
[附源码]java毕业设计药品销售管理系统

[附源码]java毕业设计药品销售管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
【AI】浅谈梯度下降算法（理论篇）

【AI】浅谈梯度下降算法（理论篇）

前言 在求解机器学习算法的模型参数&#xff0c;即无约束优化问题时&#xff0c;梯度下降&#xff08;Gradient Descent&#xff09; 是最常采用的方法之一&#xff0c;另一种常用的方法是最小二乘法。 目前正在学习这方面相关的内容&#xff0c;因此简单谈谈与梯度下降法相关…
阅读更多...
13T搅拌运输车冷却系统改进设计

13T搅拌运输车冷却系统改进设计

目 录 摘 要 1 Abstract 2 1绪论 5 1.1选题背景及意义 5 1.2研究现状 6 1.2.1 影响13T混凝土搅拌运输车冷却系统的因素以及目前存在的问题 6 1.2.2目前存在的问题 6 1.2.3现代冷却系统研究现状及发展方向 7 1.3研究主要内容 8 2 13T混凝土搅拌运输车冷却系统组成功用和选型 9 2…
阅读更多...
m基于PTS+TR的OFDM系统PAPR联合抑制算法matlab仿真

m基于PTS+TR的OFDM系统PAPR联合抑制算法matlab仿真

目录 1.算法描述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法描述 部分传输序列(Partial Transmit Sequence , PTS)由于其不受载波数量限制&#xff0c;并且能够有效的&#xff0c;无失真的降低OFDM信号峰均比&#xff0c;而受到广泛关注。部分传输序列算…
阅读更多...
m基于matlab的无线光通信CDMA闭环链路功率控制算法仿真,对比了OOK,2PPM,4PPM,8PPM,16PPM

m基于matlab的无线光通信CDMA闭环链路功率控制算法仿真,对比了OOK,2PPM,4PPM,8PPM,16PPM

目录 1.算法描述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法描述 在光通信领域&#xff0c;多址技术主要有WDM(波分复用)、TDM(时分复用)及OCDMA(光码分多址)三种方式。OCDMA技术从70年代中期开始出现&#xff0c;现在引起了人们的广泛重视。将CDMA(码分…
阅读更多...
谁能拒绝一个会动的皮卡丘挂件

谁能拒绝一个会动的皮卡丘挂件

说在前面 &#x1f388;相信很多80、90后的朋友&#xff0c;对QQ宠物印象非常深刻&#xff0c;每次开机宠物就会自动跑出来。曾经很多人想饿死他&#xff0c;但失败了&#xff1b;也有很多人一上线就退出&#xff0c;但就是不愿因取消“开机自动开启”的勾选。2018年09月15日&a…
阅读更多...
基于simulink的直升机控制系统

基于simulink的直升机控制系统

目录 1.算法描述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法描述 直升机机体减振为目标,研究基于自适应滤波技术的前馈控制问题.为了模拟机体的力学特性以及旋翼对机体的激振作用,采用了FIR,SIIR等滤波模型进行识别和控制.通过对作动器和与之相适应的滤…
阅读更多...
【MyBatis】二、入门程序

【MyBatis】二、入门程序

第一个程序 一、resources目录 放在resources目录的一般是资源文件、配置文件&#xff0c;直接放在该路径的资源相当于放到了类的根路径下。 二、开发步骤 1.打包方式jar <!--打包方式jar--><packaging>pom</packaging>2.引入依赖 mybatis依赖 mysql驱动…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023