1. 栗子之导航条（navbar）

http://www.runoob.com/try/try2.php?filename=bootstrap-using-glyphicons-navbar

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap 实例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">

        <div class="container">

            <div class="navbar-header">

                <a href="#" class="navbar-brand">Project name</a>

            </div>

            <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active">

                        <a href="#">

                            <span class="glyphicon glyphicon-home"></span> Home

                        </a>

                    </li>

                    <li >

                        <a href="#shop">

                            <span class="glyphicon glyphicon-shopping-cart"></span> Shop

                        </a>

                    </li>

                    <li>

                        <a href="#support">

                            <span class="glyphicon glyphicon-headphones"></span> Support

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>

2.模块化思想   （主要是div的使用）

    3. div 之间的嵌套    

    4. 以最小单位为对象的面向盒子对象思想 （对其设置属性：padding，margin-  border 。。。。。。）  

div布局之面向对象的更多相关文章

  1. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  2. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  3. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  4. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  5. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  6. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  7. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  8. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  9. 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

随机推荐

  1. android Titlebar一行代码实现沉浸式效果

    github地址 一个简单易用的导航栏TitleBar,可以轻松实现IOS导航栏的各种效果  整个代码全部集中在TitleBar.java中,所有控件都动态生成,动态布局.不需要引用任何资源文件,拷贝 ...

  2. C++开发基础

    硬件配置: 586以上PC兼容机或品牌机,配有彩色显示器.鼠标.键盘,内存不小于20MB,硬 盘自由空间不少于60MB.推荐配置为内存32MB或64MB(或以上),硬盘自由空间500MB 以上. 软件 ...

  3. Hadoop RPC

    hadoop rpc机制 && 将avro引入hadoop rpc机制初探 1 RPC RPC(Remote Procedure Call)--远程过程调用,它是一种通过网络从远程计算 ...

  4. 给大家推荐一个python的学习网站 http://www.codecademy.com

    注册之后,可以跟着指导,自己编码学习,比较方面: 再推荐一个在线编译的代码网站,c/c++ python  都可以: http://codepad.org

  5. MySQL数据库存储过程动态表建立(PREPARE)

    PREPARE statement_name FROM sql_text /*定义*/ EXECUTE statement_name [USING variable [,variable...]] / ...

  6. Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载

    [声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...

  7. Xshell 链接 Could not connect to '192.168.80.129' (port 22): Connection failed

    在使用Xshell链接虚拟机VM里面的Linux的时候.链接失败,报 Could not connect to ): Connection failed 解决步骤: 1.重启VM.Linux.Xshe ...

  8. 关于.h .lib .dll的总结

    对VC工程中的调用过程有些迷糊,所以就理清一下: 1.#include "...h"为头文件预编译命令,如果这些代码被修改,则需要重新编译生成预编译头文件. 预编译头的概念(转载) ...

  9. vfd电子时钟制作

    17年也没干个啥,年后就去折腾着玩意儿了,也不知道我折腾它还是它折腾我.反正总之现在勉强可以交作业了,呵呵 硬件: 1.罗耶振荡电路输出一路4v交流,一路25v交流 其中4v直接驱动灯丝,另一路经电桥 ...

  10. es6（六）：module模块（export，import）

    es6之前,社区模块加载方案,主要是CommonJS(用于服务器)和AMD(用于浏览器) 而es6实现的模块解决方案完全可以替代CommonJS和AMD ES6模块设计思想:尽量静态化,在编译时就能确 ...