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

最新推荐文章于 2023-07-11 16:42:40 发布

二挡起步

最新推荐文章于 2023-07-11 16:42:40 发布

阅读量252

点赞数

分类专栏： web前端期末大作业文章标签：前端 html css javascript dreamweaver

本文链接：https://blog.csdn.net/m0_65484028/article/details/127879791

版权

web前端期末大作业专栏收录该内容

633 篇文章 33 订阅

订阅专栏

⛵ 源码获取文末联系 ✈

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

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

前端学习路线

（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%，你可能就会发出一声叹息:原来工作也不过如此嘛。

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

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

学习更多

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

在这里插入图片描述

二挡起步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端期末大作业 html+css学生心理 7页主题网页设计

制作一个简单HTML心里网页（HTML+CSS）采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面；（2）css文件：css全部页面样式,文字滚动, 图片放大等；（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
复制链接

扫一扫