《前端框架开发技术》HTML+CSS+JavaScript (站酷静态页面官网7页)

最新推荐文章于 2023-04-07 21:58:47 发布
最新推荐文章于 2023-04-07 21:58:47 发布
阅读量55 收藏
点赞数
分类专栏： HTML5期末大作业 文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/127908588
版权

⛵ 源码获取 文末联系 ✈

Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页

  1. HTML：结构

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

  3. 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>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="header">
			<div class="logo left">ZCOOL站酷</div>
			<div class="nav left">
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="find.html">发现</a></li>
					<li><a href="job.html">职位</a></li>
					<li><a href="rank.html">榜单</a></li>
					<li><a href="activitie.html">活动</a></li>
					<li><a href="login.html">登录</a></li>
					<li><a href="register.html">注册</a></li>
				</ul>				
			</div>
			<div class="login left">
				<img class="search" src="picture/search.jpg" alt="">
			</div>
		</div>
		<div class="container">
			<div class="lunbo">
		    	<img src="picture/lunbo2.jpg" alt="">
			</div>
			<div class="sort">
				首页推荐 <b>/</b> 最新发布 <b>/</b> 上升最快
			</div>
			<div class="content">
				<div class="card">
					<img src="picture/card1.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth.jpg" alt="">
						<p>设计师专栏<span class="right">1小时</span></p>				
					</div>
				</div>
				<div class="card">
					<img src="picture/card2.jpg" alt="">
					<p>树屋<br>
					<span class="second">插画-概念设定</span></p><hr>
					<div class="auth">
						<img src="picture/auth5.jpg" alt="">
						<p>WANGZC<span class="right">1小时</span></p>						
					</div>
				</div>
				<div class="card">
					<img src="picture/card3.jpg" alt="">
					<p>Midea Family Q版形象设计<br>
					<span class="second">平面-吉祥物</span></p><hr>
					<div class="auth">
						<img src="picture/auth4.jpg" alt="">
						<p>小小芝麻 <span class="right">8小时</span></p>					
					</div>
				</div>
				<div class="card">
					<img src="picture/card4.jpg" alt="">
					<p>清平乐令<br>
					<span class="second">摄影-人像</span></p><hr>
					<div class="auth">
						<img src="picture/auth3.jpg" alt="">
						<p>摄影师 <span class="right">5小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card5.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth.jpg" alt="">
						<p>设计师专栏<span class="right">6小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card6.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth3.jpg" alt="">
						<p>设计师专栏<span class="right">1小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card7.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth.jpg" alt="">
						<p>设计师专栏<span class="right">7小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card8.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth.jpg" alt="">
						<p>设计师专栏<span class="right">3小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card9.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth2.jpg" alt="">
						<p>设计师专栏<span class="right">6小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card10.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth4.jpg" alt="">
						<p>设计师专栏<span class="right">3小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card11.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth3.jpg" alt="">
						<p>设计师专栏<span class="right">6小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card12.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth.jpg" alt="">
						<p>设计师专栏<span class="right">2小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card13.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth2.jpg" alt="">
						<p>设计师专栏<span class="right">9小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card14.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth2.jpg" alt="">
						<p>设计师专栏<span class="right">7小时</span></p>
					</div>
				</div>
				<div class="card">
					<img src="picture/card15.jpg" alt="">
					<p>揭秘 Keep 的用户体验之道——站酷<br>
					<span class="second">文章-专访-UI</span></p><hr>
					<div class="auth">
						<img src="picture/auth2.jpg" alt="">
						<p>设计师专栏<span class="right">3小时</span></p>
					</div>
				</div>
			</div>
			<div class="pag">
				<ul>
					<li class="active">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>...</li>
					<li>999</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<div class="copyr">
				&copy;Copyright © 2006-2019 ZCOOL站酷
			</div>
		</div>
	</body>
</html>

学的反而越迷茫

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

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

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

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

学习更多

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

在这里插入图片描述

优质内容贡献
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
如何制作HTML网页设计【体育运动主题网站——中国篮球NBA】
html精品源码
08-05 5674
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
个人博客页面设计（html + css）
05-29
个人博客页面设计（html + css）
HTML设计个人博客页面
Python领域优质萌新创作者
03-23 3672
页面主体包括一个名为“container”的元素，其中包含博客的标题、简介、最新文章、研究方向和联系方式。我们使用 - 标签定义标题，并使用标签定义段落文本。我们还使用和标签定义无序列表，以显示最新文章和研究方向。最后，我们使用标签定义链接，让读者可以在不离开页面的情况。然后，我们导入了Google字体“Lato”，并定义了一些基本的样式，包括背景色、字体、字号、行高和颜色。/* 背景样式 *//* 标题样式 *//* 链接样式 */
HTML做一个个人博客页面（纯html代码）
qq_38512792的博客
04-07 1333
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
HTML5+CSS+javascript实现的手机商城静态页面.zip
11-27
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
基于Html+Css+JavaScript的王者荣耀官网静态页面（95分以上）.zip
最新发布
05-20
基于Html+Css+JavaScript的王者荣耀官网静态页面（95分以上）.zip个人98分大作业设计项目，代码完整下载可用，纯手打高分大作业设计，可作为期末大作业和课程设计，小白也可实战。 基于Html+Css+JavaScript的王者...
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip
07-07
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 【资源介绍】 该项目是...
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip
07-07
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
web网站制作的实例（大学生期末作业）集合
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 23万+
一、HTML期末学生结课大作业作品 200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作 [建议收藏] 1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全) 2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) 3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计) 4.HTML期末大作业~海贼王中乔巴专题漫画学
HTML期末大作业~ 仿新浪微博个人主页html网站模板4个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-04 2万+
HTML期末大作业~ 仿新浪微博个人主页html网站模板(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：这是一款最新的仿sina个人微博html静态网
HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-24 2万+
HTML期末大作业~基于HTML+CSS环境保护学生网页设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 新闻中心 专题回顾 里约热内卢 奥运回顾 等5个页面! 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学
运用 html+css+JavaScript 等技术，开发静态页面网站。
06-08
好的，如果您需要开发一个静态页面网站，可以参考以下步骤： 1. 设计页面布局和样式。使用 HTML 和 CSS 创建页面的外观和结构。确保每个页面都有一个独特的主题和样式，但整个网站应该看起来相互协调。 2. 在每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值