网页设计大作业模板-网页设计大作业(文房四宝 5页)-实训素材

news2024/12/23 18:30:55

源码获取 文末联系

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>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="bigbox">
        <div id="banner">
            <img src="picture/banner.png" alt="">
        </div>
        <nav>
            <a href="">首页</a>
            <a href="maobi.html">毛笔</a>
            <a href="moshui.html">墨水</a>
            <a href="zhizhang.html">纸张</a>
            <a href="yantai.html">砚台</a>
        </nav>
        <div id="mian">
            <img src="picture/mian.png" alt="">
            <p>
                笔墨纸砚,是中国独有的文书工具,即文房四宝。“笔、墨、纸、砚”之名,起源于南北朝时期。历史上,“笔、墨、纸、砚”所指之物屡有变化。在南唐时,“笔、墨、纸、砚”特指宣城诸葛笔、徽州李廷圭墨、澄心堂纸,徽州婺源龙尾砚。自宋朝以来“笔墨纸砚”则特指宣笔(安徽宣城)、徽墨(安徽徽州歙县)、宣纸(安徽宣城泾县)、歙砚(安徽徽州歙县)、洮砚(甘肃卓尼县)、端砚(广东肇庆,古称端州),元代以后湖笔(浙江湖州)渐兴,宣笔渐衰,改革开放后,宣笔渐渐恢复了生机。作为文房四宝的故乡的安徽宣城,是我国文房四宝最正宗的原产地和饮誉世界的“中国文房四宝之乡”,所产的宣纸(泾县)、宣笔(泾县/旌德)、徽墨(绩溪/旌德)、宣砚(旌德)举世闻名,为历代文人墨客所追捧。
            </p>
            <p>
                毛笔的历史更为悠久,秦朝之前各地对毛笔的叫法不一,楚国称毛笔谓“聿“(吁),燕国称笔谓“弗”,秦朝统一中国后实行“书同文”,毛笔才有了统一的名称。宣笔可以说是毛笔的起源。因为很久以前宣城就有“毛颖之技先天下”之说。
            </p>
            <p>
                关于宣笔的由来,自古就有蒙恬造笔说法。据唐代韩愈所著的《毛颖传》记载,公元前223年,秦将蒙恬率军南征伐楚,行至中山地区(即宣城境内),具体方位有两种说法,一说中山在今宣城市宣州区和泾县一带;另一说中山在今江苏省溧水县境内。据《元和郡县志》二十八卷记载,中山在宣州溧水县东南十五里处,因唐宋时期宣州府地域广泛,溧水县属宣州管辖。
            </p>
            <p>
                蒙恬发现中山兔肥毛长,质地最佳,于是以竹管为笔杆,兔毛(又称紫毫)为笔头制作毛笔,世人称“蒙恬笔”,为宣笔的鼻祖。
            </p>
        </div>
        <div id="picture">
            <h1>笔墨纸砚</h1>
            <div id="leibie">
                <img src="picture/11.png" alt="">
                <p></p>
            </div>
            <div id="leibie">
                <img src="picture/22.png" alt="">
                <p></p>
            </div>
            <div id="leibie">
                <img src="picture/33.png" alt="">
                <p></p>
            </div>
            <div id="leibie">
                <img src="picture/44.png" alt="">
                <p></p>
            </div>
        </div>
        <footer>
            版权所有©***
        </footer>
    </div>
</body>

</html>


学的反而越迷茫

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

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

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

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


学习更多

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


在这里插入图片描述

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

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

相关文章

通过STM32F103C8T6配置完成基于SPI协议的0.96OLED屏显

文章目录前言一、SPI协议1、应用2、组成二、OLED屏显和汉字点阵编码原理1、汉字点阵编码原理2、OLED屏显三、OLED模块四、显示自己的学号和姓名五、显示温湿度&滑动显示长字符六、总结七、参考资料前言 硬件&#xff1a;stm32f103c8t6 核心板软件&#xff1a;keil5 mdk软件…

混沌引力搜索算法(CGSA)解决三个机械工程设计问题(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

_linux 进程间通信(匿名管道)

文章目录1. 匿名管道2. 利用通过匿名管道实现进程间通信2.1 实现思路2.2 父子进程实现通信的简单代码2.3 结果展示如下3. 总结管道特点4. 扩展&#xff08;好玩的--简单内存池&#xff09;思路&#xff1a;代码&#xff1a;1. 匿名管道 查看手册(man)&#xff1a; 翻译 #incl…

[附源码]计算机毕业设计JAVA基于JSP技术的新电商助农平台

[附源码]计算机毕业设计JAVA基于JSP技术的新电商助农平台 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; …

Amine-PEG-Azide,NH2-PEG-N3,胺-PEG-叠氮PEG试剂供应

1、名称 英文&#xff1a;Amine-PEG-Azide&#xff0c;NH2-PEG-N3 中文&#xff1a;胺-聚二乙醇-叠氮 2、CAS编号&#xff1a;N/A 3、所属分类&#xff1a;DSPE PEG Azide PEG 4、分子量&#xff1a;可定制&#xff0c;NH2-PEG-N3 2000、胺-聚二乙醇-叠氮 10000、NH2-PEG-…

从零开始做一款Unity3D游戏<一>——亲自上手使用Unity

游戏设计入门 游戏设计文档 Hero Born游戏的单页文档 构建关卡 创建基本图形 在三维中思考 材质 白盒环境 光照基础 创建光源 Light组件的属性 在Unity中制作动画 创建动画片段 记录关键帧 曲线与切线 粒子系统 总结 本文主要来自<<C#实践入门>>哈…

【单片机】独立看门狗IWDG初始化

目录 看门狗简介&#xff1a; 初始化例子&#xff1a; 看门狗使能&#xff1a; 写保护&#xff1a; 看门狗重载&#xff1a; 看门狗复位时间计算&#xff1a;基本上看stm中文手册对照框图就很明确 看门狗简介&#xff1a; 此器件具有两个嵌入式看门狗外设&#xff0c;具有…

3-4数据链路层-局域网

文章目录一.基本概念1.网络拓扑2.传输介质3.介质访问控制方法4.局域网的分类5.逻辑链路控制&#xff08;LLC&#xff09;子层与媒体接入控制&#xff08;MAC&#xff09;子层二.以太网&#xff08;一&#xff09;以太网的传输介质与网卡1.传输介质2.网卡&#xff08;二&#xf…

[附源码]计算机毕业设计JAVA基于JSP学生信息管理系统

[附源码]计算机毕业设计JAVA基于JSP学生信息管理系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM …

工具及方法 - 编辑二进制文件(使用VSCode和Notepad++的插件Hex Editor)

Visual Studio Code 在VSCode里安装插件&#xff0c;可以实现很多功能。 打开VSCode&#xff0c;在菜单里选择&#xff0c; View->Extensions&#xff0c;就会出现扩展插件的查找页面。 输入想要查找的插件名称&#xff0c;搜索&#xff0c;然后点击安装。 比如要用VSCode…

高性能零售IT系统的建设06-当应对大量HTTP请求时兼顾性能、处理速度的架构设计

前言 这个系列不像我的那些个“保姆式”教程&#xff0c;那些保姆式教程我一周最多可以写8篇&#xff0c;因为太简单了。充其量花的时间就是用“看漫画”的方式去组织我的截图和尽量少文字多Sample。 而高性能系统建设系列这一块不仅仅只有代码&#xff0c;相反它甚至不会多写…

力扣(LeetCode)25. K 个一组翻转链表(C++)

模拟 前置知识 : 反转链表、两两交换链表中的节点 。 LeetCode 有相应题目&#xff0c;可以先做。 设置哑结点 &#xff0c; 便于操作头结点。 翻转至少要 kkk 个结点 &#xff0c; 先检查剩余结点够不够 kkk 个。 不够 kkk 个就翻转完成了。 翻转分为组内翻转和首尾变向两步…

查找xml文件

一 前言 相比xml.dom.minidom&#xff0c;lxml.etree具有高效的查找方法&#xff0c;更方便&#xff0c;直接&#xff1b; 二、知识点&#xff1a;查找感兴趣的元素 举例一&#xff1a;递归遍历其下的所有子树&#xff08;包括子级&#xff0c;子级的子级&#xff0c;等等 …

nero platinum刻录光盘简要教程(文章末尾有教程链接)

nero platinum suit 介绍 使用nero express可以完成多数情况下的光盘应用。在nero platinum suit中单击nero express&#xff0c;这时可以看到nero express的工作界面&#xff0c;在这里面可以刻录数据光盘&#xff0c;可以刻录音乐光盘&#xff0c;可以刻录视频光盘&#xff…

SpringMVC集成静态资源

集成静态资源 静态资源&jsp是被谁处理的 tomcat是一个servlet容器&#xff0c;servlet容器中通常有servlet来处理各种请求&#xff0c;那么当访问静态资源或者jsp的时候&#xff0c;当然也是有servlet来处理这些请求的&#xff0c;但是并未在web.xml中配置哪个servlet来处…

SpringBoot+Vue项目小区疫苗接种管理系统的设计与实现

文末获取源码 开发语言&#xff1a;Java 使用框架&#xff1a;spring boot 前端技术&#xff1a;JavaScript、Vue 、css3 开发工具&#xff1a;IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库&#xff1a;MySQL 5.7/8.0 数据库管理工具&#xff1a;phpstudy/Navicat JDK版…

MySQL数据库JDBC编程

目录 前言&#xff1a; 项目中导入驱动包 插入记录 创建数据源 连接数据库 构造sql语句 执行sql语句 释放资源 整体代码展示 查看数据 代码展示 小结&#xff1a; 前言&#xff1a; MySQL为Java提供了驱动包。通过Java程序实现的客户端&#xff0c;可以通过这个驱动…

JavaWeb以Maven整合Mybatis报错java.lang.NoClassDefFoundError(Web项目未能完全加载Maven下的依赖)

问题描述 为完成学校课程一个javaweb的demo&#xff0c;想着对数据库的访问能够更加简洁&#xff0c;所以用了Mybatis。因为之前有过Springboot整合Mybatis经验&#xff0c;所以本以为事情会简单。在Junit的测试类中是能够正常对数据库进行CRUD。在Javaweb的Servlet类中调用数据…

应用层协议之DNS、DHCP

运输层为应用进程提供了端对端的通信服务&#xff0c;但不同的网络应用的应用进程之间&#xff0c;还需要有不同的通信规则。因此在运输层协议之上&#xff0c;还需要有应用层协议。 应用层中有这些常见的协议 域名系统&#xff1a;DNS动态主机配置&#xff1a;DHCP超文本传输…

数据结构之栈

文章目录前言一、栈二、栈应该如何实现1.顺序表or链表2.静态or动态三、栈的实现1.栈的定义2.接口&#xff08;声明&#xff09;3.接口的实现初始化栈销毁栈获取栈顶元素获取栈中有效元素个数入栈出栈检测栈是否为空4.主函数&#xff08;测试&#xff09;总结前言 今天这篇文章…