css面包屑代码(html面包屑导航代码)
admin 发布:2022-12-19 23:00 197
本篇文章给大家谈谈css面包屑代码,以及html面包屑导航代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、wordpress 主题怎么添加面包屑导航
- 2、CSS布局命名规范
- 3、css3制作面包屑导航的/\00a0是什么意思
- 4、css的命名怎样才叫规范呢?
- 5、如何命名CSS文件及样式规范更利于SEO优化
- 6、用CSS创建扁平化面包屑导航中的伪元素after,before浮动覆盖问题?
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布局命名规范
页头: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的命名怎样才叫规范呢?
一.文件命名规范
[b]样式文件命名[/b]
[quote]主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css [/quote]
[b]CSS ID 的命名[/b]
[quote]页头: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
外 套:wrap
主导航:mainnav
子导航:subnav
页 脚:footer
整个页面: content
页 眉:header
页 脚:footer
商 标:label
标 题:title
主导航:mainbav(globalnav)
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
旗 志:logo
标 语:banner
菜单内容1: menu1content
菜单容量: menucontainer
子菜单:submenu
边导航图标:sidebarIcon
注释: note
面包屑:breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区:shop(如购物车,收银台)
当前的 current[/quote]
[b]网站常用中英文对照表[/b]
[quote]网站导航 Site Map
公司简介 Profile or Company Profile or Company
公司设备 Equipment Equipment
公司荣誉 Glories Glories
企业文化 Culture Culture
产品展示 Product Product
资质认证 Quality Certification
企业规模 Scale Scale
营销网络 Sales Network
组织机构 organization organization
合作加盟 Join In Cooperation
技术力量 Technology Technology
经理致辞 Manager`s oration
发展历程 Development History
工程案例 Engineering Projects
业务范围 Business Scope
分支机构 Branches
供求信息 Supply Demand
经营理念 Operation Principle
产品销售 Sales Sales
联系我们 Contact Us Contact Us
信息发布 Information Information
返回首页 Homepage Homepage
产品定购 order order
分类浏览 Browse By Category
电子商务 E-business
公司实力 Strength Strength
版权所有 Copy Right
友情连结 Hot Link
应用领域 Application Fields
人力资源 Human Resource Hr
领导致辞 Leader`s oration
企业资质 Enterprise Qualification
行业新闻 Trade News
行业动态 Trends
客户留言 Customer Message
客户服务 Customer Service
新闻动态 News Trends
公司名称 Company Name
销售热线 Sales Hot-Line
联系人 Contact Person
您的要求 Your Requirements
建设中 In Construction
证书 Certificate Certificate
地址 ADD Add
邮编 Postal Code Zipcode
电话 TEL Tel
传真 FAX Fax
产品名称 Product Name
产品说明 Description Description
价格 Price
品牌 Brand
规格 Specification
尺寸 Size
生产厂家 Manufacuturer Manufacturer
型号 Model
产品标号 Item No.
技术指标 Technique Data
产品描述 Description
产地 Production Place
销售信息 Sales Information
用途 Application
论坛 Forum
在线订购 On-line order
招商 Enterprise-establishing
招标 Bid Inviting
综述 General
业绩 Achievements
招聘 Join Us
求贤纳士 Join Us
大事 Great Event
动态 Trends
服务 Service
投资 Investment
行业 Industry
规划 Programming
环境 Environment
发送 Delivery
提交 Submit
重写 Reset
登录 Enter
注册 Login
中国企业网技术支持 Powered By Ce.Net.Cn
社区 Community
业务介绍 Business Introduction
在线调查 Online Inquiry Inquiry
下载中心 Download
会员登陆 Member Entrance
意见反馈 Feedback
常见问题 FAQ
中心概况 General Profile
教育培训 Education Training
游乐园 Amusement Park
在线交流 Online Communication
专题报道 Special Report[/quote]
常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首 字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为 “searchBtn”……
一. 常规书写规范及方法
1. 选择DOCTYPE:
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如br。完整代码如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ““
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” ““
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通 过W3C的代码校验。
2. 指定语言及字符集:
为文档指定语言:
html xmlns=”” lang=”en”
为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:
常用的语言定义:
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
标准的XML文档语言定义:
?xml version=”1.0″ encoding=” utf-8″?
针对老版本的浏览器的语言定义:
meta http-equiv=”Content-Language” content=” utf-8″ /
为提高字符集,建议采用“utf-8”。
3. 调用样式表:
外部样式表调用:
页面内嵌法:就是将样式表直接写在页面代码的head区。如:
style type=”text/css”!– body { background : white ; color : black ; } – /style
外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /
在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。
4、选用恰当的元素:
根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;
避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;
尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;
5、派生选择器:
可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:
.mainMenu ul li {background:url(images/bg.gif;)}
6、辅助图片用背影图处理:
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、结构与样式分离:
在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写:
页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:
div id=”mainMenu”
ul
lia href=”#” 首页/a/li
lia href=”#” 介绍/a/li
lia href=”#” 服务/a/li
/ul
/div
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
*******************************************************************************************
命名参考(来源网络)
常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list
常用代码结构:
div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,
例如
lispan(4.23)/span天幻网六周年天幻网六周年天幻网六周年天幻网六/li
然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果
h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题
label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,
例如:
label for="user-password"密 码/label
input type="password" name="password" id="user-password" /
fieldset legend:fildset套在表单外,legend用于描述表单内容。
例如:form
fieldset
legendtitle/legend
label for="user-password"密 码/label
input type="password" name="password" id="user-password" /
/fieldset
/form
dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,
例如dl
dt什么是CSS?/dt
ddCSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。dd
dt什么是XHTML?/dt
ddXHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演 着类似HTML的角色的XML。 本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。/dd
/dl
C #content
S #subcol
M #maincol
X #xcol
这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。
其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。
自定义命名:
根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
CSS命名规范
DIV CSS名称 说明
网站公用相关
Container div #container 容器
Header or banner div #header 页头部分
Main or global navigation div #mainNav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏
Main div #main 页面主体
Content div #content 内容部分
The main content area #contentMain 主要内容区域
Footer div #footer 页脚部分
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Sub-navigation list #subNav 二级导航
Search input #searchInput 搜索输入框
Search output #searchOutput 搜索输出和搜索结果相似
Search #search 搜索
Search results #searchResults 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #brandingLogo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Status #status 状态
9、鼠标手势:
在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”
如何命名CSS文件及样式规范更利于SEO优化
坚持使用统一的CSS命名规则并养成习惯,可以让你更容易维护、修改以前编写过的CSS代码,进而提高自己的工作效率,而且还能加强搜索引擎的SEO优化,方便记忆,那么,我们如何才能将CSS的命名做得井井有条呢?
1、CSS文件及样式命名
首先,先为大家展示一些CSS文件及样式的命名样例,因为这些名称能使大家立马明白定义的文件,具体如下所示:
(1)、CSS文件命名规范
全局样式:global.css
框架布局:layout.css
字体样式:font.css
链接样式:link.css
打印样式:print.css
主要的:master.css
专栏:columns.css
主题:themes.css
(2)、CSS样式命名规范
对于CSS样式的命名规则,建议用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字,为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间。
例如:头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构的可以这样——box_1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了):
容器:container/box
头部:header
主导航:mainNav
子导航:subNav
顶导航:topNav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
网站标志:logo
大广告:banner
页面中部:mainBody
整个页面:content
底部:footer
菜单:menu
菜单内容:menuContent
子菜单:subMenu
子菜单内容:subMenuContent
搜索:search
搜索关键字:keyword
搜索范围:range
标签文字:tagTitle
标签内容:tagContent
当前标签:tagCurrent/currentTag
标题:title
内容:content
列表:list
当前位置:currentPath
侧边栏:sidebar
图标:icon
注释:note
登录:login
注册:register
面包屑:breadCrumb(即页面所处位置导航提示)
列定义:column_1of3 (三列中的第一列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)
2、CSS的优先级
行内样式(inline style) ID选择符 样式(class)、伪类(pseudo-class)和属性(attribute)选择符 类别(type),伪对象(pseudo-element)。
博客注解:
*内联样式(inline style):元素的style属性,比如 div style="color:red;"/div,其中的color:red;就是行内样式。
*ID选择符:元素的id属性,比如div/div可以用ID选择符#content
*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.
*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素。
*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素。
*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。
3、默认值
通常padding和margin的默认值为0,background-color的默认值是transparent,但是在不同的浏览器默认值可能不同。
如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,例如:
* {
padding:0;
margin:0
}
或者是针对某元素来定义:
ul,li,div,span {
padding:0;
margin:0
}
4、不要重复定义可继承的值
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。
除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用一些默认值覆盖你的定义。
5、CSS代码书写样式
在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯,在经过不断实践后,我决定采用下面这样的书写样式:
.classname {
width:100px;
}
当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们,在最后一个选择器和大括号之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。
我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好,最后,关闭的大括号单独写一行,这样的空格和换行有助与阅读
6、使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读,常用的css缩写的主要规则有:
(1)、颜色
16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;
(2)、盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针,上右下左,具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;
(3)、边框(border)
边框的属性如下:
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句:border:1px solid #000;
语法是:border:width style color;
(4)、背景(Backgrounds)
背景的属性如下:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是:background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
(5)、字体(fonts)
字体的属性如下:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
提示:如果你缩写字体定义,至少要定义font-size和font-family两个值。
(6)、列表(lists)
取消默认的圆点和序号可以这样写list-style:none;
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句:list-style:square inside url(image.gif);
7、多重CSS样式定义,属性追加重复最后优先原则
一个标签可以同时定义多个class,也可以是同一个class中重复定义属性,例如:
我们先定义两个样式:
.one{width:200px;background:url() no-repeat left top;}
.two{border:10px solid #000; background:url() no-repeat left top;}
在页面代码中,我们可以这样调用:
div class="one" two/div
这样最终的显示效果是这个div样式是什么呢?重复的是以哪一个为准呢?
div class="one" two/div应用到的样式如下:
width:200px;
border:10px solid #000;
background:url() no-repeat left top;
因为,当应用两个或多个样式时,浏览器所应用的样式根据是属性追加重复最后优先原则。
就是说两个或多个或重复的样式名定义,浏览器所应用的样式是按先后顺序的,如果定义了重复的属性值,以最后定义的为准,如果应用了两个或多个样式名,里面不重复定义的属性值就追加上去,重复的属性值就以最后一个为准。
这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
8、导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来,例如:
@import url(main.css);
然而,这个方法对IE4不起作用,这让我很是头疼了一阵子,后来我用这样的写法:
@import main.css;
这样就可以在IE中也隐藏CSS了,呵呵,还节省了5个字节呢!
9、CSS hack
有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE版里是否更好的支持CSS,这两种方法都是最安全的。
(1)、注释的方法
a、在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):
htmlbody p {
}
b、下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
}
c、还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧:
* html p {
declarations
}
d、下面这个写法只有IE7浏览器可以理解(对其他浏览器都隐藏)
*+ html p {
}
(2)、条件注释(conditional comments)的方法
另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释,用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义,就像这样:
!--[if IE]
link rel=stylesheet/css href="" /
![endif]--
还有更多的CSS hack大家可以通过网上找找,但是有很多hack都是不符合w3c标准的,根据以上的hack写了一个能区分IE6、IE7、FF的样式,而且可以符合w3c标准,代码如下:
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
这样写后在IE6下宽是100px,IE7下是95px,火狐下是90px。
10、明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误,在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。
只有两个例外情况可以不定义单位:行高和0值,除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
11、区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的,为了避免这种错误,建议大家将所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
12、id和class的使用及区别
我们知道在样式表定义一个样式的时候,可以定义id,也可以定义class,例如:
ID方法:#test{color:#333333},在页面中调用div内容div
CLASS方法:.test{color:#333333},在页面中调用div class="test"内容div
一般来说,id是一个页面只可以使用一次,class是可以多次引用的。
可我在页面中用了多个相同id在IE中显示也正常,id和class好象没什么区别,用多个相同id有什么影响吗?
页面存在多个相同的ID影响就是不能通过W3的校验,在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示,但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。
id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆。
class是一个样式,可以套在任何结构和内容上,就象一件衣服。
从概念上来说:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
对此,建议大家在写XHML+CSS时如果是维一的结构定位的就用id,否则就用class吧(这样让出非结构定位的div块的id让程序员自己定义使用)!
13、取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用,在看来,你限定某个元素是毫无意义的,例如:
div#id1{}可以写成#id1{}
这样可以节省一些字节。
14、使用子选择器(descendant selectors)
使用子选择器是影响他们效率的原因之一,子选择器可以帮助你节约大量的class定义,我们来看下面这段代码:
div
ul
li class="subnavitem" a href="" class="subnavitem"SEO/a/li
li class="subnavitemselected" a href="" class="subnavitemselected"SEO/a /li
li class="subnavitem" a href="" class="subnavitem"SEO/a /li
/ul
/div
这段代码的CSS定义是:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代码:
ul id=”subnav”
li a href=""SEO/a /li
li class="sel" a href=""SEO/a /li
li a href=""SEO/a /li
/ul
样式定义是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
如果一个容器里有多个同样的元素,而且这些元素样式都不一样,请避免用这个方式,建以大家可以采用不同的class如:
ul class=”one”li/li/ul
ul class=”tow”li/li/ul
15、不需要给背景图片路径加引号
为了节省字节,建议不要给背景图片路径加引号,因为引号不是必须的,例如:
background-image:url(images
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性,就像这样:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个body的text-align:center;规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。
16、层占据的空间
当调试CSS发生错误,你就要像排版工人,逐行分析CSS代码,我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间?
有些人建议用border,一般情况也是可以的,但问题是,有时候border会增加元素的尺寸,border-top和boeder-bottom破坏纵向margin的值,所以使用background更加安全些(更多的介绍,
用CSS创建扁平化面包屑导航中的伪元素after,before浮动覆盖问题?
#crumbs ul li a:after{
/*styles
.
.
.
*/
/*加一个zindex就可以了*/
z-index:100;
}
关于css面包屑代码和html面包屑导航代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:屏蔽图片代码(屏蔽中图片)
- 下一篇:包含签收代码的词条
相关推荐
- 05-05代码转化器(什么是代码转换)[20240505更新]
- 05-05asp.net输出html代码(html5 asp)[20240505更新]
- 05-05酒店订房页面代码(酒店房间代码)[20240505更新]
- 05-05discuz代码模式(discuz代码大全)[20240505更新]
- 05-05跑马灯样式代码(花式跑马灯代码解析)[20240505更新]
- 05-05htmlqq代码(html跳转代码)[20240505更新]
- 05-05游程编码代码(游程编码的实现)[20240505更新]
- 05-05侧边栏导航内部代码(html侧面导航栏)[20240505更新]
- 05-05网站视频弹窗代码(浏览器视频弹窗)[20240505更新]
- 05-05视频主持人代码(视频主持人代码怎么弄)[20240505更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
-
- 百度云搜索引擎入口手机版,百度云搜索引擎入口 023dir
- asp.net输出html代码(html5 asp)[20240505更新]
- 酒店订房页面代码(酒店房间代码)[20240505更新]
- discuz代码模式(discuz代码大全)[20240505更新]
- 重庆seo怎么样,重庆seo薪酬水平
- 公关危机的预防以及处理,如何进行公关危机的预防管理?
- 跑马灯样式代码(花式跑马灯代码解析)[20240505更新]
- 人工智能系统源代码(人工智能代码下载)[20240505更新]
- 易语言源代码下载(易语言下载文件源码)[20240505更新]
- 百度搜索引擎关键词,百度搜索引擎关键词什么表示匹配的字符数量不受限制
- 友情链接