HTML做一个简单漂亮的宠物网页（纯html代码） 带视频 带音乐 带报告

news2025/1/10 11:26:27

⛵ 源码获取 文末联系 ✈

Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 宠物网页设计 | 保护动物网页 | 鲸鱼海豚主题 | 保护大象 | 等网站的设计与制作 | HTML宠物网页设计 | 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>
<html>
<head>
<meta charset="utf-8">
<title>熙熙宠物网</title>
<link rel="stylesheet" href="css/熙熙宠物网.css">
</head>
<body>
<div class="box">
<div class="top">
    <ul class="left">
	    <li><a href="#">品种</a></li>
		<li><a href="#">狗狗</a></li>
		<li><a href="#">猫咪</a></li>
	</ul>
	<ul class="right">
		<li><a href="#">更多</a></li>
	    <li><a href="#">注册</a></li>
		<li><a href="登录页面.html" target="_blank">登录</a></li>
	</ul>
</div>
<div class="header">
	<img src="img/logo1.png" width="110" height="100" alt="1">
	<p class="xixi">熙熙宠物</p>
	<input type="text" value="哈士奇" class="header1">
	<div class="header3" style="color: black">
	<p class="remen">热门搜索：<a href="#" style="color: black">加菲猫</a> <a href="#" style="color: black">哈士奇</a> <a href="#" style="color: black">金毛</a> <a href="#" style="color: black">雪纳瑞</a> <a href="#242323" style="color: black">更多...</a></p>
	</div>
	<div class="header2"><p class="sousuo"><a href="#">搜索</a></p></div>
</div>
<div class="menu">
    <ul class="menu1">
	    <li><a href="#">首页</a></li>
		<li><a href="#">品种</a></li>
		<li><a href="#">市场</a></li>
		<li><a href="图片.html" target="_blank">图片</a></li>
		<li><a href="#">视频</a></li>
		<li><a href="#">文章</a></li>
		<li><a href="问答.html" target="_blank">问答</a></li>
		<li><a href="#">论坛</a></li>
	</ul>
</div>
<div class="banner">
    <div class="banner1">
		<table width="970" height="361" border="1" align="center" cellspacing="0" class="banner2">
		    <tr height="58" align="center">
			    <td><a href="#">热门推荐</a></td>
				<td><a href="#">可爱萌狗</a></td>
				<td><a href="#">猛犬</a></td>
				<td><a href="#">世界名犬</a></td>
				<td><a href="#">猫咪</a></td>
				<td><a href="#">仓鼠</a></td>
				<td><a href="#">乌龟</a></td>
				<td><a href="#">爬宠</a></td>
				<td><a href="#">鸟类</a></td>
				<td><a href="#">兔子</a></td>
				<td><a href="#">大全</a></td>
			</tr>
			<tr height="58" align="center">
			    <td colspan="8" align="center">
				    小型犬：    <a href="#">柯基犬</a>     <a href="#">巴哥犬</a>      <a href="#">雪纳瑞</a>     <a href="#">贵宾犬</a>    <a href="#">等等</a>
				</td>
				<td rowspan="2" colspan="3" align="center">
					<span style="font-size: 30px"><a href="#">买宠</a></span>
				</td>
			</tr>
			<tr height="58" align="center">
	            <td colspan="8" align="center">
				    中型犬：   <a href="#">哈士奇</a>     <a href="#">拉布拉多</a>      <a href="#">柴犬</a>     <a href="#">萨摩耶</a>    <a href="#">等等</a>
				</td>		 
			</tr>
			<tr height="58" align="center">
			    <td colspan="8" align="center">
				    大型犬：   <a href="#">阿拉斯加</a>     <a href="#">金毛</a>      <a href="#">秋田犬</a>     <a href="#">德国牧羊犬</a>    <a href="#">等等</a>
				</td>
				<td rowspan="2" colspan="3" align="center">
					<span style="font-size: 30px"><a href="#">服务</a></span>
				</td>
			</tr>
			<tr height="58" align="center">
				<td colspan="8" align="center">
				    短毛猫：   <a href="#">英短猫</a>     <a href="#">美短猫</a>      <a href="#">加菲猫</a>     <a href="#">折耳猫</a>    <a href="#">等等</a>
				</td>
			</tr>
			<tr height="58" align="center">
			    <td colspan="8" align="center">
				    长毛猫：    <a href="#">波斯猫</a>     <a href="#">森林猫</a>      <a href="#">布偶猫</a>     <a href="#">巴厘猫</a>    <a href="#">等等</a>
				</td>
				<td colspan="3" align="center">
				    <span style="font-size: 30px"><a href="#">其他</a></span>
				</td>
			</tr>
		</table>
	</div>
	<div class="zhong">
		<div class="zhong1">
			<a href="#">
		    <img src="img/7.jpg" alt=""/>
			</a>
		</div>
		<div class="zhong2">
		    <a href="#">
		    <img src="img/8.jpg" alt=""/>
			</a>
		</div>
		<div class="zhong3">
		    <a href="#">
		    <img src="img/9.jpg" alt=""/>
			</a>
		</div>
	</div>
	<div class="xia1">
	    <p class="xia1-1">
		    <span class="noon1">文章---养宠常识</span>
		</p>
		<div class="xia1-2">
		    <ul class="noon2">
				<li><a href="#">柴犬能吃什么水果 柴犬能吃的水果原来这么多</a></li>
				<li><a href="#">柯基犬掉毛吗 狗狗都有掉毛现象</a></li>
				<li><a href="#">哈士奇的智商 非常可爱狡猾的狗狗</a></li>
				<li><a href="#">英国短毛猫的习性 没有太苛刻的要求</a></li>
				<li><a href="#">德文卷毛猫的知识送给养猫的新新手</a></li>
				<li><a href="#">养猫宝典：怎么样让猫咪训练到很温顺听话</a></li>
			</ul>
		</div>
	</div>
	<div class="xia2">
	    <p class="xia2-1">
		    <span class="noon3">宠物论坛</span>
		</p>
		<div class="xia2-2">
		    <ul class="noon4">
			    <li><span class="q1">01</span><a href="#">哈士奇论坛</a></li>
				<li><span class="q2">02</span><a href="#">柯基论坛</a></li>
				<li><span class="q3">03</span><a href="#">金毛论坛</a></li>
				<li><span class="q4">04</span><a href="#">柴犬论坛</a></li>
				<li><span class="q5">05</span><a href="#">波斯猫论坛</a></li>
				<li><span class="q6">06</span><a href="#">孟买猫论坛</a></li>
			</ul>
		</div>
	</div>
	<div class="xia3">
	    <p class="xia3-1">
		   <span class="noon5">关于宠物</span>
		</p>
		<div class="xia3-2">
		    <ul class="noon6">
			    <li><a href="#">宠物健康</a> <a href="#">宠物饮食</a></li>
				<li><a href="#">季节生活</a> <a href="#">作息规律</a></li>
				<li><a href="#">疾病健康</a></li>
			</ul>
		</div>
	</div>
	<div class="xia4">
	    <p class="xia4-1">
			<span class="noon7">友情链接</span>
		</p>
		<div class="xia4-2">
		    <ul class="noon8">
			    <li><a href="#">秀宠网</a> <a href="#">宠物大全</a></li>
				<li><a href="#">宠物展会</a> <a href="#">宠物社区</a></li>
				<li><a href="#">宠仔圈</a> <a href="#">动物星球</a></li>
				<li><a href="#">TOM生活</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="footer">
	<ul class="footer1">
		<li><a href="#">关于我们</a></li>
		<li><a href="#">联系方式</a></li>
		<li><a href="#">帮助中心</a></li>
		<li><a href="#">商务合作</a></li>
		<li><a href="#">意见反馈</a></li>
	</ul>
	<div class="footer2" style="color:#CDCBCB">
	    版权所有：熙熙宠物       xxx
	</div>
	<div class="footer3"><img src="img/logo1.png" width="60" height="60" alt="1"></div>
</div>
</div>
</body>
</html>

学的反而越迷茫

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

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

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

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

学习更多

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

在这里插入图片描述

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

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

相关文章

酒水推荐商城|基于Springboot实现酒水商城系统

酒水推荐商城|基于Springboot实现酒水商城系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助 收藏点赞不迷路 关注作者有好处 文末获取源…
阅读更多...
FLP、CAP和BASE

FLP、CAP和BASE

FLP不可能原理 FLP定理 FLP Impossibility&#xff08;FLP 不可能性&#xff09;是分布式领域中一个非常著名的定理&#xff0c;定理的论文是由 Fischer, Lynch and Patterson 三位作者于1985年发表 It is impossible to have a deterministic protocol that solves consens…
阅读更多...
通过WebSocket实现实时系统通知，以后再也不能装作没看到老板的通知了～～

通过WebSocket实现实时系统通知，以后再也不能装作没看到老板的通知了～～

&#x1f4de; 文章简介&#xff1a;WebSocket实时通知Demo &#x1f4a1; 创作目的&#xff1a;因为公司正在从零搭建CRM&#xff0c;其中有一个需求是系统通知管理&#xff0c;老板发布通知给员工。简单的用数据库实现感觉缺少一些实时性&#xff0c;不是那么生动。于是想到了…
阅读更多...
向毕业妥协系列之深度学习笔记（三）DL的实用层面（上）

向毕业妥协系列之深度学习笔记（三）DL的实用层面（上）

目录 一.训练_开发_测试集 二.方差与偏差 三.正则化 四.Dropout正则化 五.其他正则化方法 本篇文章大部分又是在ML中学过的&#xff0c;除了Dropout正则化及之后的部分。 一.训练_开发_测试集 在配置训练、验证和测试数据集的过程中做出正确决策会在很大程度上帮助大家创…
阅读更多...
[Spring MVC 8]高并发实战小Demo

[Spring MVC 8]高并发实战小Demo

本项目基于Spring MVC进行关于点赞项目的开发&#xff0c;从传统的点赞到高并发缓存开发最后到消息队列异步开发&#xff0c;可谓是令人大开眼界。 本篇博客全部代码已经放出&#xff0c;本博客重点是后端操作&#xff0c;所以对于前端就十分简单的页面。讲述了关于Redis,Quart…
阅读更多...
软件安装教程1——Neo4j下载与安装

软件安装教程1——Neo4j下载与安装

Neo4j的下载地址Neo4j Download Center - Neo4j Graph Data Platform 我下载的是Neo4j社区版&#xff08;免费&#xff09;【企业版收费】 解压后的目录如下&#xff1a; 接下来配置环境变量 进入bin目录&#xff0c;复制路径&#xff1a;E:\neo4j\neo4j-community-5.1.0-win…
阅读更多...
决策树——预剪枝和后剪枝

决策树——预剪枝和后剪枝

一、 为什么要剪枝 1、未剪枝存在的问题 决策树生成算法递归地产生决策树&#xff0c;直到不能继续下去为止。这样产生的树往往对训练数据的分类很准确&#xff0c;但对未知的测试数据的分类却没有那么准确&#xff0c;即容易出现过拟合现象。解决这个问题的办法是考虑决策树…
阅读更多...
【Lua基础 第2章】lua遍历table的方式、运算符、math库、字符串操作方法

【Lua基础 第2章】lua遍历table的方式、运算符、math库、字符串操作方法

文章目录&#x1f4a8;更多相关知识&#x1f447;一、lua遍历table的几种方式&#x1f342;pairs遍历&#x1f342;ipairs遍历&#x1f342;i1,#xxx遍历&#x1f31f;代码演示&#x1f342;pairs 和 ipairs区别二、如何打印出脚本自身的名称三、Lua运算符&#x1f538;算术运算…
阅读更多...
微服务治理-含服务线上稳定性保障建设治理

微服务治理-含服务线上稳定性保障建设治理

微服务的概念 任何组织在设计一套系统&#xff08;广义概念上的系统&#xff09;时&#xff0c;所交付的设计方案在结构上都与该组织的沟通结构保持一致。 —— 康威定律 微服务是一种研发模式。换句话理解上面这句康威定律&#xff0c;就是说 一旦企业决定采用微服务架构&am…
阅读更多...
Js逆向教程-12FuckJs

Js逆向教程-12FuckJs

Js逆向教程-12FuckJs 它利用了js的语法特性&#xff1a; 一、特性1 任何一个js类型的变量结果 加上一个字符串 &#xff0c;只会变成字符串。 数组加上字符串&#xff1a; [0]"" 0true加上字符串 true "" true数字加上字符串 1"" 1二、特性…
阅读更多...
14天学习训练营之 初识Pygame

14天学习训练营之 初识Pygame

目录 学习知识点 PyGame 之第一个 PyGame 程序 导入模块 初始化 ​​1.screen 2. 游戏业务 学习笔记 当 init () 的时候&#xff0c;它在干什么&#xff1f; init () 实际上检查了哪些东西呢&#xff1f; 它到底 init 了哪些子模块&#xff1f; 总结 14天学习训练营导…
阅读更多...
2023年计算机毕设选题推荐

2023年计算机毕设选题推荐

同学们好&#xff0c;这里是海浪学长的毕设系列文章&#xff01; 对毕设有任何疑问都可以问学长哦! 大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越来越…
阅读更多...
·工业 4.0 和第四次工业革命详细介绍

·工业 4.0 和第四次工业革命详细介绍

工业 4.0 是制造/生产及相关行业和价值创造过程的数字化转型。 目录 工业 4.0 指南 工业 4.0 与第四次工业革命互换使用&#xff0c;代表了工业价值链组织和控制的新阶段。 网络实体系统构成了工业 4.0 的基础&#xff08;例如&#xff0c;「智慧机器」&#xff09;。他们使用…
阅读更多...
基于SpringBoot+Vue的疫苗接种管理系统

基于SpringBoot+Vue的疫苗接种管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端&#xff1a;SpringBoot 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7 数据库管理工具&#xff1a;Navicat 12 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / MyEclipse 是否Maven项…
阅读更多...
实验二 帧中继协议配置

实验二 帧中继协议配置

计算机网络实验实验二 帧中继协议配置一、实验目的二、实验内容三、实验条件四、实验步骤4.1 连接帧中继交换网4.2 创建DLCI4.3 创建串行接口间的虚电路映射关系4.4 配置路由器的串行接口七、思考题实验二 帧中继协议配置 一、实验目的 掌握路由器上配置帧中继协议的方法 掌握…
阅读更多...
SSM整合(一)

SSM整合(一)

SSM整合之简单使用通用mapper 1.准备工作 1.1 在java文件夹下面创建所需要的目录 1.2 导入SSM整合时所需要的所有依赖 <properties><!--这个是统一一些spring插件的包名,避免因为版本不一样而报错--><spring.version>5.3.22</spring.version></p…
阅读更多...
SAP S4 FI 后台详细配置教程文档 PART2 （财务会计的基本设置篇）

SAP S4 FI 后台详细配置教程文档 PART2 （财务会计的基本设置篇）

本篇是系列文章的第二部分&#xff0c;目标是家在配置“字段状态变式”和“年度与期间的配置” 目录 1、 字段状态变式 1.1定义字段状态变式 1.2 向字段状态变式分配公司代码 2、会计年度与记账期间 2.1维护会计年度变式 2.2 向一个会计年度变式分配公司代码 2.3定义未结…
阅读更多...
服务器虚拟化有什么好处

服务器虚拟化有什么好处

服务器虚拟化是一种逻辑角度出发的资源配置技术&#xff0c;是物理实际的逻辑抽象。对于用户&#xff0c;虚拟化技术实现了软件跟硬件分离&#xff0c;用户不需要考虑后台的具体硬件实现&#xff0c;而只需在虚拟层环境上运行自己的系统和软件。 说起服务器虚拟化这个技术&…
阅读更多...
你的新进程是如何被内核调度执行到的？（下）

你的新进程是如何被内核调度执行到的？（下）

接上文你的新进程是如何被内核调度执行到的&#xff1f;&#xff08;上&#xff09; 四、新进程加入调度 进程在 copy_process 创建完毕后&#xff0c;通过调用 wake_up_new_task 将新进程加入到就绪队列中&#xff0c;等待调度器调度。 //file:kernel/fork.c long do_fork(.…
阅读更多...
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

文章目录 一、准备工作二、约定前后端交互接口三、实现服务器端代码 四、调整前端页面代码五、数据存入文件六、数据存入数据库一、准备工作 1) 创建 maven 项目2) 创建必要的目录 webapp, WEB-INF, web.xml&#xff1b;web.xml如下&#xff1a;<!DOCTYPE web-app PUBLIC&qu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023