精通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的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- 如何理解Spring IOC
Spring IOC 思维导图 要了解控制反转( Inversion of Control ), 我觉得有必要先了解软件设计的一个重要思想:依赖倒置原则(Dependency Inversion Pr ...
- jquery 引号问题
varFrozenColumns="[[{'field':'CZ','title':'操作','width':80,'align':'center','formatter':function ...
- 【给你一个承诺 - 玩转 AngularJS 的 Promise】
了解Promise 在谈论Promise之前我们要了解一下一些额外的知识:我们知道JavaScript语言的执行环境是"单线程",所谓单线程,就是一次只能够执行一个任务,如果有多个 ...
- 关于一些基础的Java问题的解答（五）
21. 实现多线程的两种方法:Thread与Runable 在Java中实现多线程编程有以下几个方法: 1.继承Thread类,重写run方法 public class Test { public s ...
- Linux上rpm实战搭建FTP服务器
1.检测是否已安装FTP服务 # rpm -qa|grep vsftpd 2.未安装ftp服务的前提进行使用rpm安装 # yum install vsftpd -y Loaded plugins: ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- 混合式应用开发之Cordova+vue(1)
一.Cordova创建应用 cordova create oneApp Cordova创建应用出错 Cordova安装时不能使用cnpm 应该使用npm,cnpm虽然快但是后期出的错绝对比这省下来的时 ...
- 深入了解Java虚拟机和内存管理
1.java程序的执行过程 java源文件->解析器->class文件->java类加载器->java运行时数据区->执行引擎 2.我们接下来看一下java运行 ...
- windows下 gvim8.0 编译器配置
最近由于各种原因,IDE从source insight换成了vim,参考了诸多博客的文章,折腾了好久折腾了个大概的样子,现在总结一下经验: 主要参考: 改造vim变成source insight Wi ...
- Jmeter(十七)_驱动浏览器做GUI测试
jmeter不光可以完成性能测试.接口测试,现在也可以依靠WebDriver来完成GUI的功能自动化测试了,是不是很神奇? 1:下载JMeterPlugins-WebDriver-1.3.1.zip, ...