排版之页面主题

排版之页面主题

---

1.body全局样式

下面这个就是Bootstrap为body设置的全局样式行

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

//Helvetica Neue代表设置的字体

 //设置字体为14px

  line-height: 1.42857143;//间距为字体的1.428倍（20px）

  color: #333;//颜色是一个灰色

  background-color: #fff;//背景是一个白色

---

2.P全局样式

p {

  margin: 0 0 10px;// margin-bottom设置的十个像素的距离

}

.lead {

  margin-bottom: 20px;

 

  font-weight: 300;

  line-height: 1.4;

}

实例：

1）定义一个p的全局样式

<p>

   ootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.

</p>

2）运行效果

3）如果我们要对<p>标签里的文字进行强调的话，我们可以给<p>标签里加一个样式叫lead，lead会把标签里的文字变大。

<p class=" lead ">

   ootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.

</p>

4）运行结果

---

3.对齐方式

1）以右对齐

<p class=" lead  text-right">

   ootstrap是Twitter推出的一个用于前端开发的开源工具 包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个 CSS/HTML框架。目前,Bootstrap最新版本为3.

</p>

2）运行效果

3）居中对齐

<p class=" lead  text-center">

   ootstrap是Twitter推出的一个用于前端开发的开源工具 包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个 CSS/HTML框架。目前,Bootstrap最新版本为3.

</p>

4）运行效果

5）还有向左对齐等等，这里就不一一演示了。