精通CSS+DIV网页样式与布局--页面背景
上篇博客，我们主要简单的总结了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学习未完待续......
精通CSS+DIV网页样式与布局--页面背景的更多相关文章
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- 精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
- 精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px ...
- Redis Error：/var/redis/run/redis_6379.pid exists, process is already running or crashed
命令service Redis start /var/redis/run/redis_6379.pid exists, process is already running or crashed 引起 ...
- 2. struct A 和 typedef struct A
2. struct A 和 typedef struct A 2.1 struct A struct A{}定义一个名为struct A的结构体． 下例定义了struct A同时,声明了两个变量(注意 ...
- javascript实现图片的预览
简单javascript代码 实现上传图片预览 <body> <!-- 设置当有图片准备上传时触发javascript代码--> <input type="fi ...
- python环境搭建（python2和python3共存）
安装两个版本的意义 验证自己代码对版本的兼容性 网上下载的某些源码只能在python2或者python3中运行 安装过程记录 1.去python官网下载python的安装包, 下载完成后如下图所示 2 ...
- 设计模式一日一练：中介者模式（Mediator）
Mediator模式,用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式的相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 比较典型的例子是联合国.QQ群等.比如,如果中国有 ...
- MYSQL 索引类型、什么情况下用不上索引、什么情况下不推荐使用索引
mysql explain的使用: http://blog.csdn.net/kaka1121/article/details/53394426 索引类型 在数据库表中,对字段建立索引可以大大提高查询 ...
- 从0到1：制作你的苹果podcast（播客）
注意:本文不是教你如何录音.如何做后期的文章.而是聚焦于如何搭建播客(podcast)需要的环境. 本文科普类文章,干货少,湿货多. 先选一个主机吧 这步的初衷和你自己建站是一样的.你可以购买一个独立 ...
- 【SSH系列】Hibernate映射-- 多对一单向关联映射
在hibernate中非常重要的就是映射,在前面的博文中,小编简单的介绍了基本映射,基本映射是对一个实体进行映射,关联映射就是处理多个实体之间的关系,将关联关系映射到数据库中,所谓的关联关系在对象模型 ...
- TensoFlow实现条件语句
import tensorflow as tf a = tf.constant(20) b = tf.constant(10) result1 = tf.cond(a > b, lambda: ...