IMWeb小白-诗歌作业

来源：互联网发布：对艺术的知乎编辑：程序博客网时间：2024/04/29 00:33

HTML结构：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>凤求凰</title></head> <body> <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1"> < img src="背景.jpg" height="100%" width="100%"> </div> <div id="古诗"> <h1>凤求凰</h1> <p>作者：司马相如</p > <p style="letter-spacing:4px"> 有一美人兮，见之不忘。<br/>一日不见兮，思之如狂。<br/>凤飞翱翔兮，四海求凰。<br/>无奈佳人兮，不在东墙。<br/>将琴代语兮，聊写衷肠。<br/>何日见许兮，慰我彷徨。<br/>愿言配德兮，携手相将。<br/>不得於飞兮，使我沦亡。<br/>凤兮凤兮归故乡，遨游四海求其凰。<br/>时未遇兮无所将，何悟今兮升斯堂！<br/>有艳淑女在闺房，室迩人遐毒我肠。<br/>何缘交颈为鸳鸯，胡颉颃兮共翱翔！<br/>凰兮凰兮从我栖，得托孳尾永为妃。<br/>交情通意心和谐，中夜相从知者谁？<br/>   双翼俱起翻高飞，无感我思使余悲。</p ></div><div id="右美人">< img src="美人图.png" width="350px" height="500px" alt="美人"/></div> </body></html>

css样式：

古诗{

width:500px;height:1000px;text-align:center;float:right; font-family:"楷体";

}

右美人{

width:500px;height:100px; float:right;

}
“`

效果如下：

这里写图片描述

0 0