精通CSS+DIV网页样式与布局页面背景

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

上篇博客，我们主要简单的总结了CSS的图片效果，我们这回来讲讲CSS如何对网页的背景进行设置，网页的背景是整个网页的重要组成部分，她直接决定了整个网页的风格和色调。这篇博客简单的总结一下如何用CSS来设置背景颜色、背景图片。首先，我们来看一张图：

接着，小编会随着上述思维导图的脉络，对各个知识点进行详细讲解，首先，我们来看页面背景色，例子代码和运行效果如下所示：

页面背景色

<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>背景颜色</title><style><!--body{ background-color:#5b8a00;  /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762;     /* 设置页面文字颜色 */}p{ font-size:15px;     /* 正文文字大小 */ padding-left:10px; padding-top:8px; line-height:120%;}span{        /* 首字放大 */ font-size:80px; font-family:黑体; float:left; padding-right:5px; padding-left:10px; padding-top:8px;}--></style>   </head><body> <img src="mainroad.jpg" style="float:right;"> <span>春</span> <p>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p> <p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。</p></body></html></span></span>

运行效果如下：

CSS设置背景颜色特别简单：background-color，采用十六进制的设计方法。背景颜色不但可以给网页设置背景颜色，同样也可以给网页分块。我们接下来看，用背景色给页面分块，例子和代码如下所示：

用背景色给页面分块

<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>利用背景颜色分块</title><style><!--body{ padding:0px; margin:0px; background-color:#ffebe5; /* 页面背景色 */}.topbanner{ background-color:#fbc9ba; /* 顶端banner的背景色 */}.leftbanner{ width:22%; height:330px; vertical-align:top; background-color:#6d1700; /* 左侧导航条的背景色 */ color:#FFFFFF; text-align:left; padding-left:40px; font-size:14px;}.mainpart{ text-align:center;}--></style>   </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr>  <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr>  <td class="leftbanner">   <br><br>首页<br><br>分类讨论   <br><br>谈天说地<br><br>精华区   <br><br>我的信箱<br><br>休闲娱乐   <br><br>立即注册<br><br>离开本站  </td>  <td class="mainpart">正文内容...</td> </tr></table></body></html></span></span>

运行效果如下：

分析上面的代码我们可以看出，在整个body中采用了table来进行分块，就看到了如上的显示效果，这里还要说一点的是，正文部分我们在代码中并没有给其设置颜色，然而在topbanner和leftbanner中却设置了颜色，所以没有设置颜色的就继承body的，设置了之后就覆盖原来的。通过背景色和对整个网页进行分块，能达到很好的排版的效果。CSS不但可以设置页面的背景颜色，同样可以给背景添加图片，我们来看一下例子代码和运行效果：

页面背景图

<span style="font-size:18px;"><html><head><title>背景图片</title><style><!--body{ background-image:url(03.jpg); /* 页面背景图片 */}--></style>   </head><body></body></html></span>

运行效果如下：

从上面的小时效果我们看到这个小图片在横向和纵向都布满了这个页面，是不是很漂亮nie，传说中的五叶草，代表自信和坚强，希望看到这篇博文的小伙伴在新的一年，自信坚强，无论遇到什么样的困难，都勇敢无畏，我们刚才看到了一个小小的图片的重复能布满整个页面，但是倘若我们不希望这样重复，我们应该怎么设置呢？看下面的例子和代码：

背景图片的重复

<span style="font-size:18px;"><html><head><title>背景重复</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg1.jpg);  /* 背景图片 */ background-repeat:repeat-y;   /* 垂直方向重复 */ background-color:#0066FF;   /* 背景颜色 */}--></style>   </head><body></body></html></span>

运行效果如下：

如果我们若把background-repeat设置为repeat-x会有怎样的惊喜等着我们nie，小伙伴们可以自己动手试试，我们刚才看到了背景图片的重复，无乱是X轴，还是Y轴，都是从左上角开始的，倘若我们想改变这些呢，我们应该怎么设置，接着，我们来看背景图片的位置，例子代码和运行效果如下：

背景图片的位置

<span style="font-size:18px;"><html><head><title>背景的位置</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg4.jpg);  /* 背景图片 */ background-repeat:no-repeat;  /* 不重复 */ background-position:bottom right; /* 背景位置，右下 */ background-color:#eeeee8;}span{         /* 首字放大 */ font-size:70px; float:left; font-family:黑体; font-weight:bold;}p{ margin:0px; font-size:14px; padding-top:10px; padding-left:6px; padding-right:8px;}--></style>   </head><body> <p><span>雪</span>是大气固态降水中的一种最广泛、最普遍、最主要的形式。大气固态降水是多种多样的，除了美丽的雪花以外，还包括能造成很大危害的冰雹，还有我们不经常见到的雪霰和冰粒。</p> <p>由于天空中气象条件和生长环境的差异，造成了形形色色的大气固态降水。这些大气固态降水的叫法因地而异，因人而异，名目繁多，极不统一。为了方便起见，国际水文协会所属的国际雪冰委员会，在征求各国专家意见的基础上，于1949年召开了一个专门性的国际会议，会上通过了关于大气固态降水简明分类的提案。这个简明分类，把大气固态降水分为十种：雪片、星形雪花、柱状雪晶、针状雪晶、多枝状雪晶、轴状雪晶、不规则雪晶、霰、冰粒和雹。前面的七种统称为雪。</p> <p> 立冬 太阳位于黄经225°，11月7～8日交节<br> 小雪 太阳位于黄经240°，11月22～23日交节<br> 大雪 太阳位于黄经255°，12月6～8日交节<br> 冬至 太阳位于黄经270°，12月21～23日交节<br> 小寒 太阳位于黄经285°，1月5～7日交节<br> 大寒 太阳位于黄经300°，1月20～21日交节</p></body></html></span>

运行效果如下：

通过设置图片的背景的位置，便可以很好的利用一些大图片作为整个网页的背景，而文字在上方。我们刚才的效果可以发现，背景图片与文字的相对位置是固定的，跟着图片一起动，那么我们应该怎么设置固定背景图片呢？我们看下面的例子和运行效果：

固定背景图片

<span style="font-size:18px;"><html><head><title>固定背景图片</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg6.jpg);  /* 背景图片 */ background-repeat:no-repeat;  /* 不重复 */ background-attachment:fixed;  /* 固定背景图片 */}p{ padding:10px; margin:5px; line-height:1.5em; color:#FFFFFF; font-size:22px;}--></style>   </head><body> <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</p> <p>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。</p></body></html></span>

运行效果如下：

我们看到代码里边的background-attachment：fixed将背景图片固定住，当文字移动的时候，背景图片不会随着图片的移动而移动。

小编寄语：该博文，小编主要简单总结了设置页面背景的相关知识，主要接好了页面背景，用背景色给页面分块，页面背景图，背景图片的重复，背景图片的位置以及固定背景图片，其中用背景色给页面分块中在整个body中采用了table来进行分块，就看到了如上的显示效果，这里还要说一点的是，正文部分我们在代码中并没有给其设置颜色，然而在topbanner和leftbanner中却设置了颜色，所以没有设置颜色的就继承body的，设置了之后就覆盖原来的。通过背景色和对整个网页进行分块，能达到很好的排版的效果。BS学习未完待续......

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown: Text-to- HTML conversion tool
Authors: John; Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎