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

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

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

作者: 路羽

原创资源分享博客

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

路羽博客 资源分享www.luyuz.cn

       

一、网站主题

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

二、网站设计效果图

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张图片

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

 

此内容售价¥6.6,请点击购买按钮进行支付!
购买内容
分享到:
打赏
未经允许不得转载:

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

评论

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

    支持一下,路羽博客有你更精彩资源很给力啊不错不错,味道好极了感谢博主分享我从未见过如此精彩的内容我从未见过如此精彩的内容我从未见过如此精彩的内容我从未见过如此精彩的内容

切换注册

登录

忘记密码?

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

切换登录

注册

路羽博客验证码