CSS+DIV网页样式与布局——页面背景&图片效果

来源：互联网发布：五轴工具磨床编程软件编辑：程序博客网时间：2024/06/04 19:09

在既CSS文字效果之后就是网页的页面了，页面上要有图片才会更加的丰富多彩，是图片让我们的生活更加多样化，如果一篇文章中穿插一些图片就会更吸引人的眼球。现在就揭晓CSS控制下的图片是什么样子的。

首先，加载图片语句：

<td style="text-aligh:left;"><img src="picture.jpg"></td>

一、图片效果

二、页面背景

三、文字效果+图片效果+页面背景

直接综合应用上述的文字和图片以及页面背景的效果，效果如下：

代码：style设置CSS样式

<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>

body中页面元素：

<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>

其实将我们喜欢的图片加载进来，然后通过CSS设置他们的样式很简单，无非就是设置背景色，背景图片的位置，重复方式等。想要图片的效果更佳多姿多彩，还有对图片的滤镜和一些排版等效果。这些内容我们将会在后面学到。要你的网页更加精彩，效果吸引眼球，好好学习CSS吧！

0 0