aghewugwe 于 2022-08-12 12:48:56 发布
本文介绍了一位学生用HTML和CSS制作的宠物网页设计作业，包括多种宠物主题，如狗狗、熊猫等。网站采用Div+CSS布局，内容丰富，色彩鲜明，包含导航、CSS样式和多媒体元素，旨在提升网页设计技能。此外，还分享了学习HTML和CSS的经验与建议。 一、网站题目
宠物网页设计 、保护动物网页、鲸鱼海豚主题、保护大象、等网站的设计与制作。
二、✍️网站描述
️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。 所有页面相互超链接，可到三级页面，有5-10个页面组成。 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 页面清爽、美观、大方，不雷同。 。 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、网站演示
五、⚙️ 网站代码
HTML结构代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css" /> <script src="js/js.js" type="text/javascript"></script> <title>狗狗百科</title> </head> <body> <div class="wrapin"> <a href="#" class="logo"><img src="images/logo.png"/></a> </div> <div class="wrapin"> <header class="clearfix"> <h2>狗狗百科</h2> <ul class="clearfix nav"> <li><a href="index.html">网站首页</a></li> <li><a href="fenlei.html">狗狗分类</a></li> <li><a href="zixun.html">狗狗资讯</a></li> <li><a href="yongpin.html">狗狗用品</a></li> <li><a href="lianxi.html">联系我们</a></li> </ul> </header> <div class="banner_box "> <div class="box-1"> <ul> <li
123456789101112131415161718192021222324
