您的位置:首页 > 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导航条加粗实例 thinkcss</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.thinkcss.com/">thinkcss</a>|
<a href="http://www.thinkcss.com/shili/">css实例</a>|
<a href="http://www.thinkcss.com/texiao/">网页特效</a>|
<a href="http://www.thinkcss.com/mokuai/">css模块</a>|
<a href="http://www.thinkcss.com/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即可实现文本字体的标准加粗。

相关标签: 加粗 导航条
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/shili/1393.shtml

日期:2017-08-14 09:41:04 来源:css学习与资料网 作者:thinkcss原创

热门点击