精通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的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- Python小代码_3_购物车
product_list = [ ('MacBook', 9000), ('kindle', 500), ('tesla', 900000), ('book', 100), ('bike', 2000 ...
- day04 Java Web 开发入门
day04 Java Web 开发入门 1. web 开发相关介绍 2. web 服务器 3. Tomcat服务器启动的问题 4. Tomcat目录结构 5. Web应用程序(虚拟目录映射,缺省web ...
- MarkDown语法学习
功能性需求 输入密码 输入账号 多少度 输入 多少~~@~~度 sdsd 多少度 D是多少啊 [百度]http://www.baidu.com 百度 版本 内容 时间 v0. 需求描述 2018-4- ...
- Go 语言函数闭包
Go 语言支持匿名函数,可作为闭包.匿名函数是一个"内联"语句或表达式.匿名函数的优越性在于可以直接使用函数内的变量,不必申明. 以下实例中,我们创建了函数 getSequence ...
- 拟将博客迁移到github
其实博客园网站速度挺快的, 但是markdown的显示没有github美观. 尤其是代码高亮这一块. 近日发现github pages + vue + github api + stackedit 能 ...
- linux系统性能监控--网络利用率
Linux中提供了许多有助于评估各种 Linux网络性能的监视工具,其中一些监视工具也可用于解决网络问题以及监视性能. Linux内核为用户提供了大量的网络系统信息,这有助于监视网络的健康状态并检测在 ...
- docker 部署cassandra
摘要 本文主要介绍在redhat7 平台,利用docker 部署cassandra 集群,除了介绍基本的部署步骤,另外主要 讨论类似于cassandra 这种分布式集群系统部署 docker如何进行网 ...
- Android通知Notification全面剖析
通知 通知是您可以在应用的常规 UI 外部向用户显示的消息.当您告知系统发出通知时,它将先以图标的形式显示在通知区域中.用户可以打开抽屉式通知栏查看通知的详细信息. 通知区域和抽屉式通知栏均是由系统控 ...
- python 列表解析与map和filter函数
不知哪儿看到一个说法,大概是当map的函数参数可以直接引用一个已有的函数变量时(比如内建函数int,str之类的),用map更优美些,否则还是用列表解析更直观和快速. 我同意此说法. 昨天在写一个函数 ...
- P2P系统,一致性哈希和DHT
数据网格产品经常会使用P2P进行通信,借此机会系统地学习一下P2P网络和其资源搜索策略. 1 P2P网络架构 谈到P2P就涉及到一个概念:Overlay Network(覆盖网络).所谓覆盖网络是应用 ...