网站底部版权信息区,bootstrap
bootstrap的强大功能毋庸置疑。所以,网站底部版权信息区可以用bootstrap的“栅格系统”完成。
下面是一个未经处理的底部版权信息区的样式:
1 <div class="container"> 2 <p>这里是底部信息的标题</p> 3 <div class="row"> 4 <!-- 部分:一 --> 5 <div class="col-md-3"> 6 <p>部分:一</p> 7 <div class="row"> 8 <div class="col-md-6"> 9 <ul> 10 <li>部分:一内容</li> 11 <li>部分:一内容</li> 12 <li>部分:一内容</li> 13 </ul> 14 </div> 15 <div class="col-md-6"> 16 <ul> 17 <li>部分:一内容</li> 18 <li>部分:一内容</li> 19 <li>部分:一内容</li> 20 </ul> 21 </div> 22 </div> 23 </div> 24 <!-- 部分:二 --> 25 <div class="col-md-6"> 26 <p>部分:二</p> 27 <ul> 28 <li>部分:二内容</li> 29 <li>部分:二内容</li> 30 <li>部分:二内容</li> 31 <li>部分:二内容</li> 32 <li>部分:二内容</li> 33 <li>部分:二内容</li> 34 </ul> 35 </div> 36 <!-- 部分:三 --> 37 <div class="col-md-3"> 38 <ul> 39 <li>部分:三内容</li> 40 <li>部分:三内容</li> 41 <li>部分:三内容</li> 42 <li>部分:三内容</li> 43 <li>部分:三内容</li> 44 <li>部分:三内容</li> 45 </ul> 46 </div> 47 </div> 48 49 </div>
直接偷懒引用:
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
------
到此,基本结构算是ok了,可以根据自己的需求修改具体的样式了。
更多的信息可以参考:http://v3.bootcss.com/css/ 中的“栅格系统” 和网页:http://www.runoob.com/bootstrap/bootstrap-grid-system.html
- 上一篇 »HTML和CSS标签常用命名规则
- 下一篇 »javaScript 弹出窗口