用CSS创建扁平化面包屑导航中的伪元素after,before浮动覆盖问题?

html-css06

用CSS创建扁平化面包屑导航中的伪元素after,before浮动覆盖问题?,第1张

#crumbs ul li a:after{

    /*styles

    .

    .

    .

    */

    /*加一个zindex就可以了*/

    z-index:100

}

wordpress主题添加面包屑导航一般有两种方法,一种是通过使用插件来实现,另一种是不使用插件,纯代码实现,下面我来介绍一下这两种方法。

一,纯代码实现

在functions中添加

function get_breadcrumbs()

{

global $wp_query

if ( !is_home() ){

// Start the UL

echo '<ul class="breadcrumbs">'

// Add the Home link

echo '<li><a href="'. get_settings('home') .'">网站首页</a></li>'

if ( is_category() )

{

$catTitle = single_cat_title( "", false )

$cat = get_cat_ID( $catTitle )

echo "<li> &raquo ". get_category_parents( $cat, TRUE, " &raquo " ) ."</li>"

}

elseif ( is_archive() && !is_category() )

{

echo "<li> &raquo Archives</li>"

}

elseif ( is_search() ) {

echo "<li> &raquo Search Results</li>"

}

elseif ( is_404() )

{

echo "<li> &raquo 404 Not Found</li>"

}

elseif ( is_single() )

{

$category = get_the_category()

$category_id = get_cat_ID( $category[0]->cat_name )

echo '<li> &raquo '. get_category_parents( $category_id, TRUE, " &raquo " )

echo the_title('','', FALSE) ."</li>"

}

elseif ( is_page() )

{

$post = $wp_query->get_queried_object()

if ( $post->post_parent == 0 ){

echo "<li> &raquo ".the_title('','', FALSE)."</li>"

} else {

$title = the_title('','', FALSE)

$ancestors = array_reverse( get_post_ancestors( $post->ID ) )

array_push($ancestors, $post->ID)

foreach ( $ancestors as $ancestor ){

if( $ancestor != end($ancestors) ){

echo '<li> &raquo <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>'

} else {

echo '<li> &raquo '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>'

}

}

}

}

// End the UL

echo "</ul>"

}

}

在有需要添加面包屑插件的页面适当位置添加

<php get_breadcrumbs()

打开主题所在的style.css,添加

ul.breadcrumbs {

list-style: none

padding: 0

margin: 0

font-size:12px

}

ul.breadcrumbs li {

float: left

margin: 0 5px 0 0

padding: 0

}

通过上述三步就可以实现无插件面包屑效果,稍微的样式和布局可以修改。

二,用插件实现

这里我推荐的插件是Breadcrumb NavXT,它提供5种面包屑导航样式,如下图所示

插件的设置界面如下

看不懂英文的用翻译工具翻译一下也能大概知道意思了,其它具体的使用您可以自己去安装一下这款插件体验一下,如果有不懂再问吧。

页头:header

登录条:loginBar

标志:logo

侧栏:sideBar

广告:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

友情链接:friendLink

页脚:footer

版权:copyRight

1.CSS ID 的命名

外 套: wrap

主导航: mainNav

子导航: subnav

页 脚: footer

整个页面: content

页 眉: header

页 脚: footer

商 标: label

标 题: title

主导航: mainNav(globalNav)

顶导航: topnav

边导航: sidebar

左导航: leftsideBar

右导航: rightsideBar

旗 志: logo

标 语: banner

菜单内容1: menu1Content

菜单容量: menuContainer

子菜单: submenu

边导航图标:sidebarIcon

注释: note

面包屑: breadCrumb(即页面所处位置导航提示)

容器: container

内容: content

搜索: search

登陆: login

功能区: shop(如购物车,收银台)

当前的 current

2.另外在编辑样式表时可用的注释可这样写:

<– Footer –>

内容区

<– End Footer –>

3.样式文件命名

主要的 master.css

布局,版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css