<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>诗词中秋</title>
<link rel="stylesheet" type="text/css" href="./中秋导航条.css" />
<link rel="stylesheet" type="text/css" href="诗词中秋2.css" />
</head>
<body>
<div>
<ul class="nav">
<li><a href="今日中秋.html">今日中秋</a></li>
<li><a href="何为中秋.html">何为中秋</a></li><!--这里href的引入部分可以是另一个html的网页 href="index1.html",依此类推。-->
<li><a href="畅游中秋.html">畅游中秋</a></li>
<li><a href="诗词中秋.html">诗词中秋</a></li>
<li><a href="月圆中秋.html">月圆中秋</a></li>
</ul>
</div>
<div class="abc">
<div class="box1">
<img src="李白.png" />
<img src="徐有贞.png" />
<p>
中秋 唐·李朴<br />
皓魄当空宝镜升,云间仙籁寂无声;<br />
平分秋色一轮满,长伴云衢千里明;<br />
狡兔空从弦外落,妖蟆休向眼前生;<br />
灵槎拟约同携手,更待银河彻底清。
</p><!--这里要考虑到盒子模型的布局如果我们要先将<p>标签写在两张图片上面,这时在box1中就会出现文字的宽高压住图片,从而似的图片的位置发生改变,并且
这个文字的宽还是无法手动更改控制的,它一定是会填满box1的width。所以只要我们将图片都写道文字的上方,并且利用它的父元素的父元素进行控制,通过检查可以发现这时文字就可以盖住图片,从而可以实现图文共存。-->
</div>
<div class="box2">
<p>
中秋月 唐·齐已<br />
空碧无云露湿衣,群星光外涌清规。<br />
东楼莫碍渐高势,四海待看当午时。<br />
还许分明吟皓魄,肯教幽暗取丹枝。<br />
可怜半夜婵娟影,正对五侯残酒池。<br />
</p>
<img src="苏轼.png"/>
<p>
中秋月 唐·白居易<br />
万里清光不可思,添愁益恨绕天涯。<br />
谁人陇外久征戍?何处庭前新别离?<br />
失宠故姬归院夜,没蕃老将上楼时。<br />
照他几许人肠断,玉兔银蟾远不知。<br />
</p>
</div>
<div class="box3">
<img src="张养浩.png" />
<img src="范仲淹.png" />
<p>
八月十五夜玩月 唐·刘禹锡<br />
天将今夜月,一遍洗寰瀛。<br />
暑退九霄净,秋澄万景清。<br />
星辰让光彩,风露发晶英。<br />
能变人间世,翛然是玉京。<br />
</p>
</div>
</div>
</body>
</html>
<!--针对空白处难以出现文字的情况,一个解决思路为把abc这个父级元素分割成三块小的div元素,让这三个小的div元素实现字体环绕的效果-->
没有合适的资源?快使用搜索试试~ 我知道了~
中秋之美-html5+css+js制作中秋网页
共58个文件
png:35个
html:12个
css:7个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 78 浏览量
2024-09-01
19:53:06
上传
评论
收藏 20.24MB RAR 举报
温馨提示
详见:https://blog.csdn.net/Timi2019/article/details/141788729 项目已获导师指导并通过的高分期末大作业项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 基于HTML+CSS+JS的美食网站设计:是一个全面的实践项目,涵盖了前端开发的各个方面,同时锻炼了学生的文档写作和团队协作能力。通过这样的课程设计,学生不仅能够掌握技术,还能理解如何将技术应用到实际问题中,提升自身的综合素质。
资源推荐
资源详情
资源评论
收起资源包目录
中秋之美.rar (58个子文件)
中秋之美
白皮书1.png 1.99MB
猜数字.html 1011B
端午快乐.png 756KB
轮播图背景图.png 324KB
月圆中秋.js 2KB
picture1.png 306KB
guide.html 924B
月圆中秋.html 1KB
picture7.png 326KB
张养浩.png 1003KB
畅游中秋.css 2KB
明月.png 11KB
猜数字源码.js 2KB
孔明灯小号3.png 40KB
月圆中秋2月亮.png 1.44MB
白皮书2.png 818KB
html & css.html 828B
wagye2.html 899B
佳人赏月.png 80KB
picture4.png 132KB
徐有贞.png 912KB
诗词中秋.css 2KB
中秋奇妙游.png 1.74MB
苏轼.png 1.03MB
李白.png 1.02MB
picture9.png 116KB
猜数字.js 2KB
html css 2.html 2KB
何为中秋.css 1KB
超大背景月亮.jpg 1019KB
范仲淹.png 1.08MB
中秋导航条.css 555B
孔明灯小号1.png 24KB
舞蹈.png 72KB
moon picture.png 534KB
picture6.png 357KB
月饼.png 637KB
中秋艺术字抠图.png 102KB
月圆中秋.css 1KB
诗词中秋.html 3KB
孔明灯.png 46KB
picture3.png 399KB
戏曲嫦娥.png 80KB
猜数字源码.html 1001B
今日中秋.css 2KB
picture5.png 692KB
picture10.png 477KB
月娥仙子.png 63KB
中秋奇妙游2.png 1.74MB
picture2.png 402KB
畅游中秋.html 1KB
picture8.png 157KB
今日中秋.html 931B
诗词中秋2.css 3KB
中秋导航条.html 1KB
嫦娥玉兔.png 572KB
何为中秋.html 2KB
孔明灯2.png 89KB
共 58 条
- 1
资源评论
五星资源
- 粉丝: 7145
- 资源: 5605
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功