面包屑css代码（html面包屑导航代码）

今天给各位分享面包屑css代码的知识，其中也会对html面包屑导航代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、CSS布局命名规范
• 2、css3制作面包屑导航的/\00a0是什么意思
• 3、用CSS创建扁平化面包屑导航中的伪元素after，before浮动覆盖问题？
• 4、wordpress 主题怎么添加面包屑导航

CSS布局命名规范

页头：header 如：#header{属性:属性值;}或.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.CSS样式文件命名如下

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

css3制作面包屑导航的/\00a0是什么意思

就是用css3做一个导航，包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

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

#crumbs ul li a:after{

    /*styles

    .

    .

    .

    */

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

    z-index:100;

}

wordpress 主题怎么添加面包屑导航

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

一，纯代码实现

在functions中添加

function get_breadcrumbs()

{

global $wp_query;

if ( !is_home() ){

// Start the UL

echo 'ul class="breadcrumbs"';

// Add the Home link

echo 'lia 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种面包屑导航样式，如下图所示

插件的设置界面如下

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

关于面包屑css代码和html面包屑导航代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。