wordpress网站里的header设计

来源:爱站网时间:2022-03-25编辑:网友分享
你想了解清楚wordpress网站里的header设计具体操作内容吗?对这方面如果比较感兴趣的话,千万不要错过这篇爱站技术频道小编整理的文章,一定不会让你失望。

在激活菜单功能,编辑菜单并且调用后。
下面主要内容为菜单鼠标悬停效果的实现以及子菜单排版问题。
1.菜单鼠标悬停效果的实现

代码如下:
其中第一个function()作用为:鼠标移动至相应的菜单上,
能为我们获取到当前所在item,并添加相应的class。
第二个function()作用为:鼠标移除该菜单项时,
系统能为我们释放刚才获取到的item。
我们可以通过添加css来突出我们鼠标所选中的item,
如字体突出,添加背景色或者背景图片等。
2.菜单排版问题
1)菜单栏单列宽度调整
因为是自动调用后台设置的菜单,而后台菜单可以经常改动,
   这需要对单列菜单的宽度以及背景色背景图片的宽度等进行更改。
  2)菜单排列
   默认排列方式为纵向,可以通过float:let;将菜单横向排列。
   当菜单有自己菜单时,通过css即可设置,
   效果为:当鼠标移动到菜单栏中父级菜单时,子菜单显示出来,
   鼠标移开后,隐藏子菜单,同时释放父级菜单效果。
 3)与父级菜单类似,自己菜单也通向默认为纵向排列。
   此时想让子菜单栏横向排列,一个float:left;并不能解决问题。
   我们需要position:absolute;
   同时还需要添加个left:0;
   此时显示效果为子菜单横向并且靠左排列。
   注:TRBL属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了position属性才有效。
     当设定position:absolute
   如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
     如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。
     当设定position: relative
则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY 的左上角为原始点。
     相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

wordpress网站里的header设计相关内容不知道朋友们都看懂了没有。想要获取更多有趣的技术文章知识内容,关注js.aizhan.com即可。 

 

上一篇:wordpress想在正文写好后添加内容的操作

下一篇:WordPress怎么让文章摘要显示出来

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载