HTML与CSS(图解3):背景

设置背景颜色:

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

用背景色为页面分块:

 

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

 图片背景:

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

固定背景图片:(当浏览器的工具条移动时,背景图片不移动)

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

竖排文字:(只局限于IE) 

<html>
<head>
<title>念奴娇 赤壁怀古</title>
<style>
<!--
body{
    background:url(bg9.jpg) no-repeat center top;        /* 页面背景 */
    margin:0px; padding:0px;
    text-align:center;
}
div.content{
    height:260px;
    writing-mode:tb-rl;                            /* 竖排版文字 */
    width:620px;
    text-align:left;
    border:3px solid #666666;
    line-height:30px;
    padding-top:15px; padding-right:8px;
    background: url(bg10.jpg) no-repeat;        /* 文字部分背景 */
}
-->
</style>
   </head>
<body> 
    <div style="height:90px;"></div>
    <div class="content">
        大江东去<br>浪淘尽<br>千古风流人物<br> 
        故垒西边人道是<br>三国周郎赤壁<br> 
        乱石穿空<br>惊涛拍岸<br>卷起千堆雪<br> 
        江山如画<br>一时多少豪杰<br>
        遥想公谨当年<br>小乔初嫁了<br>雄姿英发<br> 
        羽扇纶巾谈笑间<br>强虏灰飞烟灭<br>
        故国神游<br>多情应笑<br>我早生华发<br> 
        人生如梦<br>一尊还酹江月<br>
    </div>
</body>
</html>
原文地址:https://www.cnblogs.com/KeenLeung/p/2494845.html