html网页设计期末大作业_网页设计平时作业(诗词网页 4页)

news2024/10/6 4:02:42

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页

  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">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>
</head>

<body>
  <div class="header">
    <div class="main">
       
    </div>
  </div>
<div class="clear"></div> 
<div class="nav">
  <ul>
    <li><a href="">首页</a></li>
    <li><a href="product.html">精品展示</a></li>
  </ul>
</div>
<div class="clear"></div>
<div class="banner">
  <div class="b-img">
      <img src="picture/banner.jpg" width="100%">
      <img src="picture/00.jpg" width="100%">
  </div>
  <div class="clear"></div>
  <div class="b-list"> </div>
</div>
<div class="clear"></div>
<div class="wow fadeInUp noticeBox">
  <div class="main">
    <img src="picture/notice.png">
    <div class="tit">最新公告:</div>
    <div class="gg">
      <marquee><p>2021年河南省诗词大赛即将拉开帷幕</p></marquee>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="wow fadeInRight part1" data-wow-offset="10">
  <ul>
    <li>
      <a href="product_xq.html"><img src="picture/2.jpg"></a>
      <p>诗词展示</p>
    </li>
    <li>
      <a href="product_xq.html"><img src="picture/3.jpg"></a>
      <p>诗词展示</p>
    </li>
    <li>
      <a href="product_xq.html"><img src="picture/4.jpg"></a>
      <p>诗词展示</p>
    </li>
    <li>
      <a href="product_xq.html"><img src="picture/5.jpg"></a>
      <p>诗词展示</p>
    </li>
    <li>
      <a href="product_xq.html"><img src="picture/6.jpg"></a>
      <p>诗词展示</p>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="wow fadeInLeft part2">
  <div class="contitbox">
    <label>关于我们</label>
    <a href="javascript:;">更多</a>
  </div>
  <div class="aboutBox">
    <div class="L"><img src="picture/7.jpg"></div>
    <div class="R">古诗词是中华文化之瑰宝,三千年来我国诗人辈出,佳作如林。在现在的中学课本中选录了许多古代诗词,或写景或叙事,或豪放或委婉,无不是作者的精辟之作。这些优美的名人佳句,往往以简洁明了的词语表现丰富多彩、深邃的意境,让读者产生无限空间的遐想,给人以美的享受。</div>
  </div>
</div>
<div class="clear"></div>
<div class="wow fadeInUp part3">
  <div class="contitbox">
    <label>精品展示</label>
    <a href="product.html">更多</a>
  </div>
  <ul>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/8.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">浣溪沙</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/9.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">断人肠</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/10.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">风行江山</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/11.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">乙巳年</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/12.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">蝶恋花</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/13.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">桃夭</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/14.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">清明</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="product_xq.html"><img src="picture/15.jpg"></a>
      </div>
      <a href="product_xq.html"><p class="ccsl">子兮</p></a>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="main">
  <div class="wow fadeInLeft part4 bg">
    <div class="contitbox">
      <label>最新介绍</label>
      <a href="javascript:;">更多</a>
    </div>
    <ul>
      <li><a href="detail.html" class="ccsl"> > 问句是一种语言表达的艺术,亦是古诗词中常见的表现手法。</a></li>
      <li><a href="detail.html" class="ccsl"> > 古典诗歌中常以问答起句,突出感情的起伏不平。</a></li>
      <li><a href="detail.html" class="ccsl"> > 酒、饮酒多表达豪情、悲愁、苦闷和郁郁不得志的情感。</a></li>
      <li><a href="detail.html" class="ccsl"> > 羌笛多传达离别之苦、相思之情和内心的孤寂。</a></li>
      <li><a href="detail.html" class="ccsl"> > 柳折柳 “柳”与“留”谐音,因此“柳”带有伤离别的意味。</a></li>
    </ul>
  </div>
  <div class="wow fadeInRight part4">
    <div class="contitbox">
      <label>经典语句</label>
      <a href="javascript:;">更多</a>
    </div>
    <ul>
      <li><a href="detail.html" class="ccsl"> > 山有木兮木有枝,心悦君兮君不知。</a></li>
      <li><a href="detail.html" class="ccsl"> > 人生若只如初见,何事秋风悲画扇。</a></li>
      <li><a href="detail.html" class="ccsl"> > 十年生死两茫茫,不思量,自难忘。</a></li>
      <li><a href="detail.html" class="ccsl"> > 曾经沧海难为水,除却巫山不是云。</a></li>
      <li><a href="detail.html" class="ccsl"> > 玲珑骰子安红豆,入骨相思知不知。</a></li>
    </ul>
  </div>
</div>
<div class="clear"></div>

<div class="clear" style="height: 100px;"></div>

<div class="clear"></div>

<div class="clear"></div>


</body>
</html>


学的反而越迷茫

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

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

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

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


学习更多

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


在这里插入图片描述

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

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

相关文章

39-Docker-部署Jenkins

部署Jenkins前言部署Jenkins1. 下载镜像2. 创建挂载目录3. 创建并启动Jenkins容器使用Jenkins1. 访问Jenkins2. 输入密码3. 配置Jenkins前言 本篇来学习使用Jenkins镜像部署Jenkins 部署Jenkins 1. 下载镜像 docker pull jenkins/jenkins2. 创建挂载目录 # 创建挂载目录 m…

Oracle PrimaveraUnifier成本管理器(Cost Manager)简要介绍

目录 一&#xff1a;标准成本管理器(Standad Cost Manager) 二&#xff1a;通用成本管理器(General Cost Manager) 成本管理器(Cost Manager)是Unifier管理和聚焦汇总成本的主要组成部分&#xff0c;财务最关系的Cost Sheet 成本表将通过 成本管理器制定模板 在Oracle Pirma…

第三章:高精度算法(加、减、乘、除)

高精度算法高精度的整体思路&#xff1a;一、加法1、思路&#xff1a;2、模板&#xff1a;&#xff08;1&#xff09;C版&#xff1a;&#xff08;2&#xff09;C语言版&#xff1a;二、减法1、思路&#xff1a;2、模板&#xff1a;CC三、乘法1、思路&#xff1a;2、模板&#…

CMake中return的使用

CMake中的return命令用于从文件、目录或函数返回&#xff0c;其格式如下&#xff1a; return([PROPAGATE <var-name>...]) 当在包含文件中(in an included file)遇到此命令时(通过include或find_package命令)&#xff0c;它会导致当前文件的处理停止并将控制权返回给包含…

CTFHub | Cookie注入

0x00 前言 CTFHub 专注网络安全、信息安全、白帽子技术的在线学习&#xff0c;实训平台。提供优质的赛事及学习服务&#xff0c;拥有完善的题目环境及配套 writeup &#xff0c;降低 CTF 学习入门门槛&#xff0c;快速帮助选手成长&#xff0c;跟随主流比赛潮流。 0x01 题目描述…

Linux C/C++ 学习笔记(五):Mysql C/C++编程 创建 插入 读取 删除 存储过程

本文参考Linux C/C 开发&#xff08;学习笔记七&#xff09;&#xff1a;Mysql数据库C/C编程实现 插入/读取/删除_菊头蝙蝠的博客-CSDN博客 一、数据库建模与建库建表 在设计数据库时&#xff0c;对现实世界进行分析、抽象、并从中找出内在联系&#xff0c;进而确定数据库的结…

计算机视觉之迁移学习中的微调(fine tuning)

现在的数据集越来越大&#xff0c;都是大模型的训练&#xff0c;参数都早已超过亿级&#xff0c;面对如此大的训练集&#xff0c;绝大部分用户的硬件配置达不到&#xff0c;那有没有一种方法让这些训练好的大型数据集的参数&#xff0c;迁移到自己的一个目标训练数据集当中呢&a…

javaweb Ajax AXios异步框架 JSON 案例

AJAX概念&#xff1a;AJAX(Asynchronous JavaScript And XML)&#xff1a;异步的 JavaScript 和 XML AJAX作用&#xff1a; 与服务器进行数据交换&#xff1a;通过AJAX可以给服务器发送请求&#xff0c;并获取服务器响应的数据 使用了AJAX和服务器进行通信&#xff0c;就可以…

ArcGIS_将多个点数据整合成一个点数据

问题描述:如何将多个点合并成一个点,并保留原始点数据的字段信息 方法一:整合 打开arcgis整合工具 :“数据管理工具——要素类——整合” 容差半径可以通过arcgis测量工具获取,根据自己的目标任务,选择合适的容差半径 该方法优点在于整合后的点可以正好位于原始点数据…

牛客网之SQL非技术快速入门(7)-字符串截取、切割、删除、替换

知识点&#xff1a; &#xff08;1&#xff09;substring_indexsubstring_index(str,delim,count) str:要处理的字符串 delim:分隔符 count:计数 &#xff08;2&#xff09;切割、截取、删除、替换 1 2 3 4 5 6 7 8 9 10 11 12 13 14 select -- 替换法 replace(string, 被…

俺把所有粉丝显示在地图上啦~【详细教程+完整源码】

文章目录&#x1f332;小逼叨&#x1f332;爬取所有粉丝的IP所属地&#x1f334;爬者基本素养&#xff1a;网页分析&#x1f334;源代码&#x1f332;数据清洗和保存&#x1f334;源代码&#x1f332;绘制地图&#x1f334;源代码&#x1f332;结束语&#x1f332;小逼叨 其实昨…

windows中使用curl

curl这个工具在linux和macOS都经常使用&#xff0c;感觉挺实用的。在windows中默认也带了一个但是用起来不太一样&#xff0c;于是就想自己手动安装一个原汁原味的curl。 下载安装 https://curl.se/windows/ 下载适合自己平台的版本&#xff0c;解压就可以直接运行了。 比如…

剑指 Offer II 026. 重排链表【链表】

难度等级&#xff1a;中等 上一篇算法&#xff1a; 剑指 Offer II 021. 删除链表的倒数第 n 个结点【链表】 力扣此题地址&#xff1a; 剑指 Offer II 026. 重排链表 - 力扣&#xff08;LeetCode&#xff09; 1.题目&#xff1a;重排链表 给定一个单链表 L 的头节点 head &…

Linux用户和权限学习笔记

认识root用户 什么是root用户 无论是Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。 在Linux系统中&#xff0c;拥有最大权限的账户名为&#xff1a;root&#xff08;超级管理员&#xff09;而在前期&#xff0c;我们一直使用的账户是普通账户&#xff1a;itheim…

《Android Studio开发实战 从零基础到App上线(第3版)》出版后记

2018年11月&#xff0c;经过熬夜写作的《Android Studio开发实战 从零基础到App上线(第2版)》正式出版面世。承蒙众多读者的厚爱&#xff0c;第2版的图书在此后的三年多时间&#xff0c;一直保持在移动开发图书的销量排行榜前列&#xff0c;迄今为止京东对该书的评价已达8000多…

设计模式基础-概括

目录 一、设计原则 二、设计模式分类 1、创建型模式&#xff1a;创建对象 2、结构型模式&#xff1a;更大的结构 3、行为型模式&#xff1a;交互以及职责分配 4、对象模式与类模式区别 三、各类型模式简介 1、创建型模式 2、结构型模式 3、行为型模式 一、设计原则 …

JAVA中Function的使用

JAVA中Function的使用一、方法介绍参数类型方法介绍源码二、demo参考&#xff1a; https://blog.csdn.net/boyan_HFUT/article/details/99618833 一、方法介绍 表示接受一个参数并产生结果的函数。 参数类型 T - 函数输入的类型R - 函数的结果类型 方法介绍 R apply(T t) …

【毕业设计】45-基于单片机的智能温度/超温报警计的系统设计(原理图工程+仿真工程+源代码+答辩论文+答辩PPT)

【毕业设计】45-基于单片机的智能温度/超温报警计的系统设计&#xff08;原理图工程仿真工程源代码答辩论文答辩PPT&#xff09; 文章目录【毕业设计】45-基于单片机的智能温度/超温报警计的系统设计&#xff08;原理图工程仿真工程源代码答辩论文答辩PPT&#xff09;资料下载链…

Vue 路由

参考文献&#xff1a;Vue中的路由 目录:一、路由理解&#xff1a;二、路由管理器理解&#xff1a;三、路由的使用&#xff1a;四、嵌套路由&#xff1a;五、路由传参&#xff1a;1.query传参&#xff1a;2. params传参&#xff1a;六、编程式路由导航&#xff1a;七、响应路由参…

数字孪生技术有没有真正的实用价值?

作为一个数字孪生领域的技术公司负责人&#xff0c;我尽可能用比较直白的话来描述一下我对数字孪生行业以及数字孪生价值的理解。 纵观数字孪生相关的公司&#xff0c;主要有两个流派&#xff0c;一派是具有互联网基因的数字孪生创业公司&#xff0c;一派是在工业软件领域实力…