Bootstrap基础 标题(二)

除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。这个副标题具有其自己的一些独特样式;


1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。

2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而且在h4~h6内的字号都设置为当前字号的75%;

详细代码如下:

h1 small,

.h1 small,

h2 small,

,h2 small,

h3 small,

.h3 small,

h1 .small,

.h1 .small,

h2 .small,

,h2 .small,

h3 .small,

.h3 .small

{

font-size:65%;

}

h4,

.h4,

h5,

.h5

h6,

.h6{

margin-top:10px;

margin-bottom:10px;

}

h4 small,

.h4 small,

h5 small,

.h5 small,

h6 small,

.h6 small,

h4 .small,

.h4 .small,

h5 .small,

.h5 .small,

h6 .small,

.h6 .small

{

font-size:75%;

}

任务:把“孤儿院无私奉献30年”作为一级标题,“一曲人性的赞歌”作为副标题。

<!DOCTYPE HTML>

<html>

<head>

<mate charset="utf-8">

<title>标题(二)</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<!--Bootstrap中使用了<small>标签来作为副标签-->

<h1>Bootstrap标题一<small>我是副标题</small></h1>

<h2>Bootstrap标题二<small>我是副标题</small></h2>

<h3>Bootstrap标题三<small>我是副标题</small></h3>

<h4>Bootstrap标题四<small>我是副标题</small></h4>

<h5>Bootstrap标题五<small>我是副标题</small></h5>

<h6>Bootstrap标题六<small>我是副标题</small></h5>

    <!--任务-->

<h1>孤儿院无私奉献30年,<small>一曲人性的赞歌</small></h1>

</body>

</html>

效果图:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值