HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画

news2025/7/7 6:11: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 rel="stylesheet" type="text/css" href="css/style.css"  />

</head>

<body>
<div class="wrap">
  <div class="top">
    <div class="logo"><img src="images/logo.png" width="404" height="125" /></div>
    <div class="nav">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="introduce.html">介绍</a></li>
        <li><a href="center.html">中心</a></li>
        <li><a href="art.html">艺术</a></li>
        <li><a href="about.html">关于</a></li>
      </ul>
    </div>
    <div class="s_btn"></div>
  </div>
  <div class="ban-box">
    <div id="ban"></div>
    <div id="t1_box">
      <div id="t1_1"><a href="#"><b>最新消息</b>&nbsp;&nbsp;&nbsp;&nbsp;2107.11.20  &nbsp;&nbsp; 由武汉市京剧团创排的《脸谱展》将于十二月初 进行全国巡演</a></div>
      <div id="gd"><a href="#">更多消息</a></div>
    </div>
    
  </div>
  <div id="box1"></div>
  <div class="box2">
    <div class="box_c">
      <div class="box_z"><p>宝贵的民间文化。每张脸谱,都承载着<br />它的生命。</p></div>
      <div class="box_e"><img src="images/tu_02.png" width="154" height="124" /></div>
    </div>
  </div>
  <div class="box3">
    <div class="lj1">
      <a href="#">网站地图</a>
      <a href="#" style="margin-top:30px;">隐私政策</a>
      <a href="#" style="margin-top:60px;">简体中文 / English </a>
    </div>
    <div class="lj1">
      <a href="#">联系我们</a>
      <a href="#" style="margin-top:30px;">常见问题与回复</a>
    </div>
    <div class="bq"></div>
  </div>
  <div class="foot">
    <div class="backTop"><a href="#"><img src="images/tu_03.png" width="27" height="24" /></a></div>
  </div>
  
</div>
</body>
</html>



学的反而越迷茫

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

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

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

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


学习更多

关注我 | 点赞博文 | 每天带你涨知识
相关问题可以相互学习,可关注↓公Z号


在这里插入图片描述

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

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

相关文章

EasyExcel复杂表头导出(一对多)升级版

一、前言 在之前写的 EasyExcel复杂表头导出&#xff08;一对多&#xff09;的博客的结尾&#xff0c;受限于当时的能力和精力&#xff0c;留下一些问题及展望。现在写下此博客&#xff0c;目的就是解决之前遗留的问题。 背景介绍&#xff0c;见上述链接指向的博客&#xff0c;…

vue3 route和router的区别以及如何传参数接受参数,如何像vue2一样使用$route和$router详解

vue3 route和router的区别以及如何传参数接受参数&#xff0c;如何像vue2一样使用$route和$router详解 因为我们在 setup 里面没有访问 this&#xff0c;所以我们不能再直接访问 this.$router 或 this.$route。作为替代&#xff0c;我们使用 useRouter 和useRoute函数,或者 Vu…

HTML小游戏21 —— html5版暴打皮卡丘游戏(附完整源码)

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…

微信小程序--基础内容(详解)(一)

一、常用标签 1、view 标签 view 标签是一个块级元素&#xff0c;类似于 div&#xff08;小程序里面没有div标签&#xff09;&#xff0c;里面可以放任何内容或者插值表达式&#xff0c;如下所示&#xff1a; <view>这是view标签<view> <view>{{num}}<…

谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address

快速解决&#xff1a; 最近在测试http服务时&#xff0c;谷歌浏览器报了以下错误 “The request client is not a secure context and the resource is in more-private address space ‘local’”. 从报错信息来看&#xff0c;“不安全的请求方请求了更私有的本地资源” 对于…

API接口开发其实特简单,Python Flask Web 框架教程来了

大家好&#xff0c;日常工作中&#xff0c;无论你是数据工程师、数据挖掘工程师&#xff0c;甚至数据分析人员&#xff0c;都不可避免的与他人进行数据交互&#xff0c;API接口提供数据是最常见的形式。 今天我给大家分享 Python Flask Web 框架教程&#xff0c;共计10个部分&…

Vue面试题你知道多少

✅作者简介&#xff1a;大家好我是hacker707,大家可以叫我hacker&#xff0c;新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;带你玩转Vue &#x1f4ac;推荐一款模拟面试、刷题神器&…

前端401错误 解决方法:响应拦截器

目录 1.该问题出现的原因 2.处理401问题的解决方案原理 3.使用响应拦截器解决问题 1.该问题出现的原因 在前后端分离项目中&#xff0c;最常见的是前端点击登录后&#xff0c;后端返回token字符串&#xff0c;这个token可以看作是一个“令牌”&#xff0c;就比如你去酒店办理…

Vue实战【调整Vue-element-admin中的菜单栏,并添加顶部模块菜单栏】

目录&#x1f31f;前言&#x1f31f;小伙伴们先看&#x1f31f;实现思路&#x1f31f;具体代码&#x1f31f;最后&#x1f31f;前言 因为最近在整合公司的项目&#xff0c;需要把所有系统里的功能集成到一个项目里&#xff0c;这样就导致菜单栏目录会特别的多&#xff0c;不便…

【JavaScript】手撕前端面试题:事件委托 | 判断URL是否合法 | 全排列

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…

【Axure】Axure RP 9下载、安装、授权、汉化

目录一、Axure RP 9 下载二、Axure RP 9 安装三、Axure RP 9 授权四、Axure RP 9 汉化一、Axure RP 9 下载 1、Axure RP 9 下载地址&#xff1a;https://www.axure.com/release-history/rp9 2、其他版本下载地址 ①登录axure官网:https://www.axure.com/ ②拉到最下面找到相关…

很好看的爱心表白代码(动态)

分享几个好看的爱心表白代码❤️爱心代码❤️&#xff08;C语言&#xff09;❤️流动爱心❤️&#xff08;htmlcssjs&#xff09;❤️线条爱心❤️&#xff08;htmlcssjs&#xff09;❤️biu表白爱心❤️&#xff08;htmlcssjs&#xff09;❤️matlab爱心函数❤️&#xff08;需…

Vue3+TS+Vite 入门指南

最近尝试上手 Vue3TSVite&#xff0c;对比起 Vue2 有些不适应&#xff0c;但还是真香~ 上手前先说下 Vue3 的一些变化吧~ Vue3 的变化 Vue3 带来的变化主要有以下几个方面&#xff1a; 使用层面 对比起 Vue2 启动速度快很多&#xff0c;新项目从 1s 升级到不到 500msvite.co…

Element-UI新手学习记录(一)

Layout 布局 通过基础的 24 分栏&#xff0c;迅速简便地创建布局。 span的作用 一行默认24个span&#xff0c;属性放在el-col中决定此元素占据多少span gutter属性 放在el-row中&#xff0c;给各个块之前设置间隔&#xff0c;但是是割的代码块的宽度。 offset属性 放在el…

小程序页面之间数据传递的四种方法

近期再使用小程序开发的时候遇到小程序页面和页面之间的数据传递问题。总结一下大致有以下几种方式实现页面数据传递。 最常见的就是路由传参&#xff0c;使用场景主要是页面汇总的少量数据的传递。以下都以Tarovue示例&#xff0c;原生、react或者uniapp同理&#xff0c;替换…

Pinia(二)了解和使用Store

Store Store 是保存状态(state)和业务逻辑的实体, store 不应该与我们的组件绑定. 换句话说, store 就是全局状态.store 有三个关键概念, 分别是 state, getters 和 actions, 这与 Vue 组件中的 data, computed 和 methods 是相对应的概念. 定义 store 通过 defineStore 函数…

Vue页面路由参数的传递和获取

文章目录1. 通过动态路由参数传递2. 通过query字符串传递3. props 隐式传递vue 页面路由切换时传参的方式有如下几种&#xff1a; 动态路由参数 它隐藏字段信息&#xff0c;相对于来说较安全&#xff0c;同时地址栏中的地址也相对较短 它必须是先定义后使用&#xff0c;一般用…

关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】

目录问题描述原因分析问题解决总结今天在迁移旧项目时&#xff0c;出现了如下错误提示&#xff1a; Refused to display in a frame because it set X-Frame-Options to SAMEORIGIN问题描述 当前项目是一个生产环境正常运行的项目&#xff0c;由于我们要迁移服务器并且部署 k…

Pro2:修改div块的颜色

什么是JavaScript&#xff1f;实现目标实现代码实现效果实现方法&#x1f49b;作者主页&#xff1a;静Yu &#x1f9e1;简介&#xff1a;CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家&#xff0c;前端知识交流社区创建者 &#x1f49b;社区地址&#xff1a;前端知识交…

html里面使用axios发送请求

html里面使用axios 效果展示&#xff1a; 代码展示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name…