您的位置:首页 > DIV CSS实例 >

 

css导航条字体加粗实例

 

div css导航条字体加粗实例

布局html网页时候,每个网站头部都有导航条布局内容,通常导航条字体加粗的。这种导航条字体粗体不采用html加粗 strong标签b标签,而采用css字体加粗样式来实现。

css字体加粗样式单词font-weight,值为bold

即:font-weight:bold

一、css导航条加粗实例完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css导航条加粗实例 css5</title>
<style>
#menu{ height:40px; background:#06F; text-align:center;
line-height:40px; font-size:16px; color:#FFF}
#menu a{ padding:0 10px; text-decoration:none; color:#FFF; font-weight:bold}
#menu a:hover{ color:#F1F1F1}
</style>
</head>
<body>
<div id="menu">
<a href="http://www.css5.com/">css5</a>|
<a href="http://www.css5.com.cn/shili/">css实例</a>|
<a href="http://www.css5.com.cn/texiao/">网页特效</a>|
<a href="http://www.css5.com.cn/mokuai/">css模块</a>|
<a href="http://www.css5.com.cn/muban/">css模板</a>|
</div>
<p align="center">正常非加粗内容</p>
</body>
</html>

二、加粗解释

以上是最简单的导航条布局,一个DIV盒子内直接放网站栏目导航链接,对链接文字设置加粗样式。
#menu a{ padding:0 10px; color:#FFF; font-weight:bold}
其中CSS代码中font-weight:bold设置字体加粗样式。

三、导航字体加粗实例效果

css设置导航条超链接字体加粗
设置导航条超链接字体加粗

实例在线演示:

查看案例

打包下载:

四、加粗总结

对象设置font-weight:bold加粗样式是兼容各大浏览器的,需要CSS实现加粗的,就使用font-weight:bold即可实现文本字体的标准加粗。

标签(Tag): 加粗 导航条
本文分享URL地址:http://www.css5.com.cn/shili/1393.html

更多

上一页: 上一篇:div 宽高 css样式设置
下一页: 下一篇:没有了

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2017-08-14     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/shili/1393.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!