HTML期末大作业~好宠之家5页~Web大学生网页成品-s019

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量842 收藏 17
点赞数 6
分类专栏： HTML期末大作业 文章标签： 前端 html 课程设计 css 大作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41157797/article/details/137357728
版权

HTML期末大作业~ 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作，HTML网页设计结课作业

http://imianba.cn/#/articles?category=1&theme=0

这段代码是 HTML 代码，它定义了一个宠物网站的结构。它包含一个头部（head）部分，其中包含元数据和链接到外部资源，例如 CSS 文件。

主体（body）部分包含网站的内容，包括一个带有网站标志和导航链接的 header 部分、一个带有横幅图像的 banner 部分、一个带有滚动公告的 gundong 部分、两个带有宠物出售和宠物零食分类的 fenlei 部分，以及一个页脚 footer 部分。

fenlei 部分包含了一个带有标题和更多链接的 title 部分，以及一个带有宠物图片、名称和价格的无序列表。该代码使用 HTML 结构和 CSS 样式来创建网站的基本布局和内容。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>宠物网站</title>
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
	<div class="cont">
    	<div class="logo"><a href="#"><img src="images/logo.jpg" /></a></div>
        <div class="nav">
        	<ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="list1.html">宠物出售</a></li>
                <li><a href="list2.html">宠物零食</a></li>
                <li><a href="siyang.html">宠物饲养</a></li>
                <li><a href="liuyan.html">在线留言</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="banner">
	<img src="images/banner.jpg" />
</div>
<div id="main">
	<div class="gundong">
    	<marquee>欢迎来到我的网站</marquee>
    </div>
    <div class="fenlei">
    	<div class="title">
        	<span>宠物出售</span>
            <a href="list.html"> 更多>> </a>
         </div>
         <ul>
            <li>
                <a href="#"><img src="images/chushou1.jpg" /></a>
                <p>哈士奇</p>
                <p><span>￥1000.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/chushou2.jpg" /></a>
                <p>金毛犬</p>
                <p><span>￥1000.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/chushou3.jpg" /></a>
                <p>泰迪犬</p>
                <p><span>￥1000.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/chushou4.jpg" /></a>
                <p>拉布拉多</p>
                <p><span>￥1000.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/chushou5.jpg" /></a>
                <p>博美犬</p>
                <p><span>￥1000.00</span></p>
            </li>   
            <li>
                <a href="#"><img src="images/chushou6.jpg" /></a>
                <p>布偶猫</p>
                <p><span>￥1000.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/chushou7.jpg" /></a>
                <p>英国短毛猫</p>
                <p><span>￥1000.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/chushou8.jpg" /></a>
                <p>波斯猫</p>
                <p><span>￥1000.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/chushou9.jpg" /></a>
                <p>苏格拉折耳猫</p>
                <p><span>￥1000.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/chushou10.jpg" /></a>
                <p>挪威森林猫</p>
                <p><span>￥1000.00</span></p>
            </li>            
         </ul>                              
    </div>
    <div class="fenlei">
    	<div class="title">
        	<span>宠物零食</span>
            <a href="list.html"> 更多>> </a>
         </div>
         <ul>
            <li>
                <a href="#"><img src="images/lingshi1.jpg" /></a>
                <p>宠物火腿肠</p>
                <p><span>￥96.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/lingshi2.jpg" /></a>
                <p>宠物犬鸡肉味犬粮</p>
                <p><span>￥96.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/lingshi3.jpg" /></a>
                <p>宠物零食大礼包</p>
                <p><span>￥96.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/lingshi4.jpg" /></a>
                <p>宠物犬牛肉粒</p>
                <p><span>￥96.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/lingshi5.jpg" /></a>
                <p>宠物犬罐头</p>
                <p><span>￥96.00</span></p>
            </li>   
            <li>
                <a href="#"><img src="images/lingshi6.jpg" /></a>
                <p>宠物犬磨牙棒</p>
                <p><span>￥96.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/lingshi7.jpg" /></a>
                <p>宠物猫罐头</p>
                <p><span>￥96.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/lingshi8.jpg" /></a>
                <p>宠物猫小鱼干</p>
                <p><span>￥96.00</span></p>
            </li>
            <li>
                <a href="#"><img src="images/lingshi9.jpg" /></a>
                <p>宠物猫三文鱼块</p>
                <p><span>￥96.00</span></p>
            </li>  
            <li>
                <a href="#"><img src="images/lingshi10.jpg" /></a>
                <p>宠物猫金枪鱼罐头</p>
                <p><span>￥96.00</span></p>
            </li>            
         </ul>                              
    </div>    
</div>
<div id="footer">
	<p>宠物网站©版权所有</p>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ ~ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
❉ ~ http://imianba.cn/#/articles?category=1&theme=0
❉ ~ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

HTML网页设计-期末大作业
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
宠物主题网页 html源码 大作业
m0_37916936的博客
11-11 136
【代码】宠物主题网页 html源码 大作业。
HTML期末大作业~橙子之家 6页面~Web大学生网页成品-s015
面试情报局
04-02 298
这段 HTML 代码定义了一个带有图像、文本和导航菜单的网站布局。它包括一个带有幻灯片的标题栏，一个包含有关橙子简介和形态特征的文章的主体部分，以及一个展示新鲜橙子图像的食品画廊。HTML期末大作业~ 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作，HTML网页设计结课作业。该代码使用 CSS 和 JavaScript 来控制网站的样式和交互性，例如平滑的菜单动画和幻灯片效果。页脚包含版权信息，表明网站属于“橙子之家”。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 学生个人HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
10-14 888
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生
大学生网页制作 大学校园简介5页作业 html网页设计 dw期末成品代码下载
07-12
页面精美小清新，包含div+css、图片、轮播图、JS滚动、Table布局、登录框，比较简单容易上手。 【大学生DW网页设计成品 大学校园简介静态HTML网页作业制作 dreamweaver网页作业代码下载】
大学生bootstrap网页制作 个人简介博客页面作业 html网页设计 dw期末成品代码下载
06-04
页面绿色主色调，包含div+css、图片列表、bootstrap自适应布局，无复杂JS特效，比较简单容易上手。 【大学生bootstrap网页制作 个人简介博客页面作业 html网页设计 dw期末成品代码下载 】
综艺节目介绍11页成品下载 大学生网页制作模板下载 html网页设计作业 dw期末成品代码下载
07-12
在“大学生网页制作模板下载”这个项目中，我们可以看到`index.html`作为首页，`about.html`可能是关于页面，`fenqi.html`可能代表季节或分期页面，`qinzi.html`和`jiemu.html`可能是特定主题或内容的页面。这些HTML...
Web大学生网页作业成品——游戏主题HTM5网页设计作业成品 (HTML+CSS王者荣耀8页)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
Web大学生网页作业成品 ：黑色主题个人博客网站设计与实现(HTML+CSS+JavaSpt).md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 267
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1027
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 444
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
Wc&Yd博客
07-16 895
探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 263
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 89
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 299
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 182
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1026
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
web大学生期末作业成品
01-04
web大学生期末作业成品通常是一个具有完整功能的网站或应用程序，用于展示学生在课程中所学的相关知识和技能。这个作品往往是学生付出了大量努力的产物，也是对他们所学内容的实际应用。 一个优秀的web大学生期末...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HTML网页设计-期末大作业

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值