zoukankan      html  css  js  c++  java
  • 设置层叠效果

    文字显示在前,背景显示在后。

    代码:

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3     <title>设置层叠效果</title>
     4     <style type="text/css">
     5         h2 {
     6 
     7         font-family:黑体;
     8 
     9         font-size:16pt
    10 
    11       }
    12 
    13     .lowdiv {
    14 
    15         position: absolute;
    16 
    17         top: 55pt;
    18 
    19         left: 230pt;
    20 
    21         z-index:1
    22 
    23       }
    24 
    25     .place {
    26 
    27         font-size:11pt;
    28 
    29         color:#CC0000;
    30 
    31         text-indent:20pt;
    32 
    33         position: absolute;
    34 
    35         top: 70pt;
    36 
    37         left: 30pt;
    38 
    39         z-index:2
    40 
    41       }
    42 
    43 
    44     </style>
    45 </head>
    46 <body >
    47     <h2>蜻蜓的眼泪</h2>
    48 
    49     <div class="lowdiv"><img src="../images/02.jpg" alt="蜻蜓的眼泪"></div>
    50 
    51     <div class="place">
    52 
    53         男孩跟女孩是一对热恋中的恋人,很不幸的是女孩在一次体操比赛中倒下了,医生确诊为:白血病。男孩每天都陪在女孩的病床前,看着女孩那苍白僬悴的脸,男孩哭了,哭的很伤心,男孩每天晚上都在女孩的病床前,为女孩折上几只千纸鹤,就这样过了几个月,女孩已经奄奄一息了,一直昏迷着,男孩还是重复的为女孩折千纸鹤,男孩折到1000只整的时候,病房被照亮了,天使忽然出现在男孩面前,男孩被吓呆了,揉了揉哭肿了的眼睛,握着女孩的手,哭着对天使说,求你救救这个善良的姑娘吧,天使对男孩说,只要你愿意,为女孩做三年的蜻蜓,女孩会慢慢的好起来,男孩毫不犹豫的答应了,天使消失了,同时男孩也变成了一只蜻蜓。女孩果然慢慢的好起来了,女孩醒了,睁开眼睛却不见男孩的身影,病房里只有一直蜻蜓停留在病房的窗子上,起初几个月里女孩非常想念男孩,女孩自言自语的说,男孩一定变心了不在喜欢我了,于是女孩每天都对着窗子上的蜻蜓发呆,蜻蜓扇动着翅膀仿佛要对女孩说着什么。过了1年,时间冲淡了一切,女孩似乎忘记了男孩,跟照顾她的医生走在了一起,女孩决定跟医生马上就举行婚礼,婚礼的当天,蜻蜓也飞到了教堂的红地毯上,蜻蜓望着女孩健康的笑容,哭了,眼泪落在了红地毯上,这时候天使又出现在蜻蜓的面前,天使问蜻蜓:你后悔吗?蜻蜓流着眼泪对天使说,我不后悔,天使消失了,蜻蜓默默的为女孩祝福,漫漫的飞出教堂,消失在黄昏的地平线上。 <br/>
    54 
    55         <img src="../images/02.jpg" width="110" align="right">
    56 
    57     </div>
    58 
    59 
    60 </body>
    61 </html>
    蜻蜓的眼泪

    效果:

  • 相关阅读:
    Linux安全应用之防垃圾邮件服务器的构建
    Postfix邮件系统安装配置视频
    Linux常用的安全工具
    Linux系统安全加固(一)
    全球开源软件发展趋势分析
    安装配置FreeBSD9全过程体验
    P1441-砝码称重
    POJ-2376 Cleaning Shifts
    P1514-引水入城
    P1378-油滴扩展
  • 原文地址:https://www.cnblogs.com/huangzhen22/p/3252653.html
Copyright © 2011-2022 走看看