TypechoJoeTheme

代码屋

统计
登录
用户名
密码
/
注册
用户名
邮箱

代码屋

拼一个春夏秋冬|赢一个无悔人生
类目归类
Web

HTML+CSS页面

2020-10-25
/
1 评论
/
444 阅读
/
正在检测是否收录...
10/25

Css代码

    
        body{
            background-color: #FFC0CB;/* 页面背景颜色 */
            
        }
        .ym{
               width: 80%;/* 宽度 */
               height: 100%;/* 高度 */
               border:10px double #800080;/* 边框颜色 */
               margin: 0 auto;/* 上下边距为0 */
               background-color: aliceblue;/* 内容DIV背景颜色 */
               padding: 20px;/* 文字和DIV边距 */
               margin-top: 30px;/* 上边距间距 */
        }
        
        .hz{
            
            float: left;/* 左浮动 */
            text-align: center;/* 居中 */
            margin-right:20px; /* div右边文字间距 */
            
            
            }
    
        .hua{
                background-image: url(./images/hua.jpg) ;/* 背景图片 */
                    background-position: right;/*图片出现在右下角*/
                    background-repeat:no-repeat;/* 让背景图片只显示一次 */
        }
        #p{
        color: brown;/*p标签颜色*/
         }
         #a{
             
             color: cornflowerblue;/*a标签颜色*/
         }
         p{text-indent: 2em;}/*首行缩进*/

HTML代码

<div class="ym">
    
    <h1 align="center" id="p">海的女儿</h1>
        <p align="center" id="p">作者:安徒生</p>
        <hr>
        <div class="hz">
        <img src="images/img.jpg">
        </div>
        
<p id="p">在海的远处,水是那么蓝,像最美丽的矢车菊,同时又是那么清,像最明亮的玻璃。就在这片海水里最深的地方
    ,有一座海王的宫殿。</p>

<p id="p">海王和他的老母亲,还有六个小小的海公主就住在里面。六个海公主中,那个顶小的要算是最美丽的了。
    她的皮肤又光又嫩,像玫瑰的花瓣;她的眼睛是蔚蓝色的,像最深的湖水。不过,跟其他的公主一样,她没有腿;
    她的身体下部是一条鱼尾。</p>

<p id="p">这个小公主最爱听些关于海面之上的人类世界的故事。她的老祖母不得不把自己所知道的关于船只、
    森林、城市、人类的知识全都讲给她听。这些总是让她十分愉快。 “等你满十五岁,”老祖母说,“我就准许你浮
    到海面上去。那时你可以看到树林和人类的城市。” “啊,我多么希望我已经有十五岁了呀!”她说,“我想我会
    喜欢上面的世界。” 最后,她真的十五岁了。于是,她轻盈得像一个水泡,冒出了水面。</p>

<p id="a">当她把头伸出海面的时候,太阳已经落下去了,可是所有的云块还是像玫瑰花和黄金似的发着光;淡红的天上,
    太白星已经发出了美丽的光芒。在不远的海面上停着一艘大船。水手们这时正坐在护桅索的周围和帆桁的上面。 
    不时有音乐和歌声从船上传来。当四周变得阴暗的时候,各色各样好看的灯笼就一齐亮起来了。小人鱼一直向舷窗
    那儿游去。每次当海浪把她托起来的时候,她可以透过窗玻璃,望见里面站着许多服饰华丽的男子;其中最美的是一
    位长着一双黑色大眼睛的王子。今天是他的生日,正因为这个缘故,所以才这样热闹。</p>

<div class="hua">
<p id="p">水手们在甲板上跳着舞。当王子走出来的时候,有一百多发火箭一齐向天空射出。天空
    被照得如同白昼,小人鱼感到非常惊恐,赶快沉到海底。可是不一会儿她又把头冒出来了——这时她觉得
    好像满天的星得都在向她落下,她从来没有看到过这样的烟火。许多巨大的太阳在周围发出嘘嘘的响声,光耀
    夺目的大鱼在向蓝色的空中飞跃。这一切都映到这平静的海上。这船全身被照得那么亮。啊,这位年轻的王子多么
    美丽呀!他跟水手们握着手,大声笑着…… </p>

<p id="p">夜色渐渐浓了。这时,在海的深处响起了一种轰轰隆隆的声音。不一会儿,沉重的乌云压
    过来,远处打起了闪电。啊,可怕的大风暴到来了!不一会儿,浪涛像高大的黑山似的高涨,可怜的船挣扎着,一
    会儿被投进洪涛里,一会儿又被抛上浪尖。
终于,船桅像芦苇似的从半中腰折断了。后来船开始倾斜,水向舱里冲了进去。这时小人鱼才知道他
们遭遇到了危险。当这只船裂开、向海的深处下沉的时候,她看到了那个王子。</p>

<p id="p">小人鱼迅速地穿过那些漂浮的船梁和木板,一点儿也没有想到它们可能把她砸死。
    她深深地沉入水里,接着又在浪涛中高高地浮起来,她终于到达了王子的身边。王子的手臂和腿
    开始支持不住,他美丽的眼睛已经闭起来了。要不是小人鱼及时赶来,他一定会淹死的。她把他的
    头托出水面,让浪涛载着他们一起漂流。</p>


<p id="p">天明时分,风暴已经过去了,鲜红的太阳升起来了。王子的眼睛仍然闭着。小人鱼把他湿
    透的长发理向脑后,吻了一下他清秀的高额,希望他能苏醒过来。</p>

<p id="p">现在她前面展开了一片陆地和青翠的高山,山顶上闪耀着的白雪看起来像睡着的天鹅。沿
    着海岸是一片美丽的绿色树林,林子前面有一个漂亮的建筑。她托着这位美丽的王子向那儿游去。她把他放到沙滩上,非常仔细地
    使他的头高高地搁在温暖的太阳光里。</p>
        
    </div>
        </div>

完整下载地址:HTML+CSS.zip

HTML+CSS
朗读
赞 · 1
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

代码屋

本文链接:

https://daimawu.top/Web/1-2.html(转载时请注明本文出处及文章链接)

评论 (1)
  1. Sacenpai 作者
    Android · QQ Browser

    {!{data:image/webp;base64,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}!}

    2020-10-29 回复