HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第1张图片

HTML5+CSS3企业宠物主题网站设计源码

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第3张图片微信小程序

路羽博客 资源分享

一、网站主题

宠物企业网站,可以在网站上查看公司介绍,服务展示,联系客服等信息,可以通过本站进行可以查看宠物的训练技巧视频。通过网站的留言页面进行反馈留言,同时可以进行用户的登录、注册、密码找回等功能。

二、网站设计效果图

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第4张图片

 

 

三、网站基本结构

网站的基本结构主要分为五部分(图1所示):

第一部分是9个html页面,其中包含index.html(网站首页)、about.html(关于我们)、sort.html(服务分类)、show.html(训练展示)、feedback.html(在线留言)、register.html(注册页面)、login.html(登录页面)、forgot.html(密码找回)、agreement.html(同意协议)。

第二部分css文件夹,为各个页面的css文件。

第三部分images文件夹,主要为网站页面中所用到的图片、自定义鼠标素材。

第四部分video文件夹,主要为show.html(训练展示)页面中所需的视频资源。

第五部分font文件夹,主要为网站中所使用的自定义字体文件。

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第5张图片

图1 网站基本结构图

四、网站设计主要说明

index.html(网站首页)

本页面主要采用盒子布局,最外部定义一个大盒子main,里面包括五盒子:分别是nav导航区域、main-swiper首页横幅区域、main-scope 首页业务范围区域,main-aboutus首页关于我们介绍区域,footer网站底部区域,其中导航区域、网站底部区域与其他页面共用。首页的导航区域html部分采用无序列表标签(ul li),css部分使用伪类hover实现了切换导航页面时,鼠标悬停时切换背景颜色及字体的颜色。在此的基础上使用了transition属性,css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。

首页的横幅部分是通过设置盒子的背景来实现,业务范围部分是通过无序列表标签(ul li)实现,其中css部分的背景是由结构伪类选择器nth-child来分别设置。首页的公司简介部分的查看详情按钮,主要是通过父容器的相对定位,a标签的绝对定位来实现。

  网站底部联系在客服按钮为了更加生动形象,当鼠标悬停时,此按钮会背景颜色的变化,同时会10度的旋转,使用了transform属性,旋转 rotate():水平旋转,属性值格式为Xdeg。deg是“度”的意思rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,为相反。

about.html(关于我们)、sort.html(服务分类)。

其中关于我们页面与服务分类页面主要是通过图片进行展示的,因此给这两个页面的图片进行了图片倾斜波动效果动画的引用。其中peopleImg是自己定义的动画关键帧名字,在此基础上使用了transform属性的扭曲 transform:skew():将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)

sort.html(服务分类)

  此页面中的图片实现了图片的悬停方法效果,具体使用道德css:

Transform:scale(1.2);此属性应用于元素的2D或者3D转换,此属性允许将元素旋转,缩放,移动等,当值为scale可以实现元素的2D缩放转换。

 HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第6张图片

图片悬停放大

show.html(训练展示)

  此页面中使用了html的视频video标签来展示视频文件。

feedback.html(在线留言)、register.html(注册页面)、login.html(登录页面)、forgot.html(密码找回),页面中使用的表单对象主要有:input元素的文本字段text、密码password、复选框checkbox、文本区域textarea、提交按钮submit、复位按钮reset、文件上传file。同时在提交、复位按钮上进行了美化,鼠标悬停时有一个平滑的颜色过度,导航的过度效果一样,在过度时间上此按钮上设置了2秒,这样更能突出过度效果。

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第7张图片

 提交复位按钮悬停 平滑颜色过度效果

文件下载

附件:HTML5+CSS3企业宠物主题网站设计源码

文件大小:2.0 M

更新时间:2022-04-15

HTML5+CSS3企业宠物主题网站设计源码-路羽博客-第8张图片

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

本文最后更新于2022-6-17,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《HTML5+CSS3企业宠物主题网站设计源码》 发布于2022-6-17

评论

          
       
  1. 动漫男主辞. 游客 Lv.1

    支持一下,路羽博客有你更精彩[f8]

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏