底部边栏的代码

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 id 为 main-content 的元素的结束的地方,另起一行 ...

边栏的内容我们可以使用 <aside> 标签包装 ... 在上面我们再定义一个 id ,id="bottom" ,一会儿我们可以把底部边栏的绿色背景应用在这个元素上面 ... 在它里面,再添加一组 <div> 标签 ,再定义一下 css 类 , class="cemicircle" ,我们可以在这组 <div> 标签上添加其它的背景,比如设计里的半圆形的装饰 ...

再添加一组 <div> ,在上面添加布局用到的 .container 类 ...

然后是带有 .row 类的一组 <div> 标签 ...

底部边栏上的内容可以分成几块,你可以决定每块内容占用多大的宽度,比如我们分成三块,这样每块内容占用 4 份,也就是4个网格的宽度 ... 可以使用 .sapn4 这个类 ...

<div class="span4"></div>

每个内容块都可以是新的内容区域,所以,我们可以使用一组 <section> 标签 ...

<section></section>

在这组标签里,我们可以包装真正的内容,区块的标题,可以使用 <h1> 标签 ....

<h3>底部内容区块一</h3>

然后普通的段落文字,可以使用 <p> 标签来标记 ...

<p>这里是底部内容区块文字,每个区块都是新的内容区域,使用 Bootstrap 布局很容易。</p>

这就是底部边栏基本的代码结构,下面视频我们给这部分内容添加一些样式。

底部边栏的代码《 HTML5 与 Bootstrap 应用实例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点