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

news/2025/1/15 15:11:33/

源码获取 文末联系

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.ppmy.cn/news/943217.html

相关文章

吊炸天的CNNs,这是我见过最详尽的图解!(上)

转自 https://blog.csdn.net/liufanghuangdi/article/details/81188283 导读&#xff1a;卷积神经网络&#xff08;CNNs&#xff09;在“自动驾驶”、“人脸识别”、“医疗影像诊断”等领域&#xff0c;都发挥着巨大的作用。这一无比强大的算法&#xff0c;唤起了很多人的好奇心…

【深度学习】卷积神经网络

讲卷积神经网络之前说说为什么能够进行分类识别&#xff1f;按照传统的SIFT&#xff0c;HOG算法都是先进行特征的提取过程&#xff0c;那么卷积神经网络怎么进行特征的提取呢&#xff1f; 下面&#xff0c;我们就开始吧&#xff01; 先提一个小问题&#xff1a;“你是通过什么…

系统学习Linux-SSH远程服务(二)

概念 安全外壳协议&#xff0c;提供安全可靠的远程连接 特点 ssh是工作在传输层和应用层的协议 ssh提供了一组管理命令 ssh 远程登陆 scp 远程拷贝 sftp 远程上传下载 ssh-copy-id ssh keygen 生成 提供了多种身份验证机制 身份验证机制 密码验证 需要提供密码 密…

【使用卷积神经网络进行猫狗识别】------机器学习(附完整代码和数据集)

最近报名了官方的新星计划Python赛道&#xff0c;开营时看到很多优秀的前辈分享自己的博主经历&#xff0c;从普通小白蜕变成万粉博主&#xff0c;大大鼓舞了我&#xff0c;业精于勤&#xff0c;砥砺前行。于是我决定从最近感兴趣的人工智能------卷积神经网络进行图像识别开始…

烤仔与狗狗的爱恨情仇由你yy!

全宇宙最强对话栏目&#xff0c;做客嘉宾只有你想不到&#xff0c;没有本仔邀请不来&#xff01;内容只有你不敢说&#xff0c;没有烤仔不敢播&#xff01; 烤仔&#xff0c;在《烤问》等你&#xff01; 还记得上次的梗王之战嘛????《烤问 | 各小组准备&#xff01;梗王已出…

[前端工坊] 微信小游戏|萌狗冠军之路,纯干货分享!

文章来自微信公众号&#xff1a;前端工坊(fe_workshop)&#xff0c;不定期更新有趣、好玩的前端相关原创技术文章。如果喜欢&#xff0c;请关注公众号&#xff1a;前端工坊 版权归公众号所有&#xff0c;转载请注明出处。 作者&#xff1a;毛科 刘麒麟 **我们做了一个小游戏&am…

一位深度学习小萌新的学渣笔记(一)神经网络原理理解+pytorch框架理解

软工大一学生&#xff0c;9月升大二&#xff0c;在暑假期间申报项目&#xff0c;7月份开始学习&#xff0c;学习的项目关于到神经网络和注意力机制 自学python 首先通过廖雪峰老师的网站自学了python 简单了解神经网络 学习所需知识 配置开发环境 Anaconda3 python3.7&…

Linux——服务器和服务器之间的拷贝

1. scp&#xff08;secure copy&#xff09;安全拷贝 scp 可以实现服务器与服务器之间的数据拷贝。&#xff08;from server1 to server2&#xff09; scp -r $pdir/$fname $user$host:$pdir/$fname 命令 递归 要拷贝的文件路径/名称 目的地用户主机:目的地路径/名称2. rsync…