长这个样子
插入图片私聊我发，或者上我主页自己下载这个包
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>寒衣节</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="screen1">
<p>
寒衣节，中国传统节日，每年农历十月
初一，又称“十月朝”“祭祖节”“冥
阴节”，民众称为鬼头日，是我国传统
的祭祀节日，相传起源于周代。寒衣节
流行于北方，不少北方人会在这一天祭
扫，纪念仙逝亲人，谓之送寒衣。
</p>
</div>
<div class="screen2">
<div class="title-box">
<h2>寒衣节</h2>
</div>
<h3>中国三大“鬼节”</h3>
<div class="box">
<div>清明节</div>
<div>寒衣节</div>
<div>中元节</div>
</div>
<div class="screen2-box2">
<p>这一天也标志着严冬的到来，
所以也是为父母爱人等所关心
的人送御寒衣物的日子。</p>
</div>
<img src="./img/person1.png" alt="">
</div>
<div class="screen2 screen3">
<div class="title-box">
<h2>寒衣节的由来</h2>
</div>
<div class="screen3-box">
<div class="screen3-box-title">先秦的迎冬礼仪脱胎而成</div>
<div class="screen3-box-title screen3-box-title2">朱元璋“授衣”传说</div>
<div class="screen3-box-title screen3-box-title3">孟姜女千里送寒衣</div>
<p class="p1">
据《礼记·月令》记，农历十月是立冬的月份。这一天，
天子率三公九卿到北郊举行迎冬礼，礼毕返回，要奖赏为
国捐躯者，并抚恤他们的妻子儿女。
</p>
<p class="p2">
相传明初朱元璋在南京称帝，为了显示顺应天时，在十月
初一这天早朝，行“授衣”之礼，并把刚收获的赤豆、糯
米做成热羹赐给群臣尝新。
</p>
<p class="p3">
相传，秦时江南松江府孟、姜两家，种葫芦而得女，取名
孟姜女，配夫范杞良。后来，杞良被抓去修筑北疆长城，
孟姜女千里寻夫送寒衣，寻到长城脚下，不想丈夫已死，
被埋筑城墙里。孟姜女悲愤交加，向长城昼夜痛哭，终于
感天动地，哭倒长城，露出丈夫尸骨。千百年来，这段忠
贞爱情故事广为流传。
</p>
</div>
<img class="img1" src="./img/shang.png" alt="">
<p class="img1-title">已经死去的人怎么受赏呢?
为他们"送寒衣"当是题中
应有之义，上行下效，遂
相沿成习。</p>
<img class="img2" src="./img/li.png" alt="">
<p class="img2-title">南京民谚说：
“十月朝、穿棉袄，
吃豆羹、御寒冷。”
</p>
<img class="img3" src="./img/meng.png" alt="">
<p class="img3-title">由于孟姜女千里寻夫送
寒衣的故事，长城内外
便将农历十月初一这天，
称作“寒衣节”。
</p>
</div>
<div class="screen2 screen4">
<div class="title-box">
<h2>风俗习惯</h2>
</div>
<img src="./img/su.png" alt="">
<div class="screen4-box">
<div class="screen3-box-title">祭祖</div>
<p class="p1">
我国自古以来就有新收时祭奠祖宗的习俗，以示孝敬，
不忘本。农历十月初一祭祀祖先，有家祭、也有墓祭。
</p>
<div class="screen3-box-title screen4-box-title2">烧寒衣</div>
<p class="p2">
在祭祀时，人们把冥衣焚化给祖先，叫作"送寒衣"。
</p>
</div>
</div>
<div class="screen2 screen5">
<div class="title-box">
<h2>引发问题</h2>
</div>
<div class="screen5-box">
<img src="./img/wt.png" alt="">
<p>
祭祀祖先不忘本固然是中华民族的传统美德，不过在
祭拜祖先时，可要注意燃
烧纸钱带来的环境问题。
有环保人士呼吁，尽管焚
烧纸钱是中国民间传统，
但也应尽量考虑环保要求，
加强环保意识，避免造成
环境污染。</p>
</div>
</div>
<div class="footer">
<p>十月朔，俗称十月朝<br/>
人无贫寒，皆祭其先<br>
多烧冥衣之属<br/>
谓之"烧衣节"
</p>
<img src="img/d2.png" alt="" class="aa1">
<img src="img/d1.png" alt="" class="aa2">
<img src="img/he2.png" alt="" class="aa3">
<img src="./img/d4.png" alt="" class="aa4">
</div>
</body>
</html>
index.css部分
body,h2,h3{
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
text-align: center;
}
body{
background-color: #3A445A;
height: 3260px;
width: 375px;
}
.screen1 {
height: 750px;
background: url(../img/bg.png) repeat-x;
background-size: 375px 679px;
position: relative;
}
.screen1 p {
position: absolute;
top: 566px;
left: 43px;
width: 292px;
height: 117px;
font-family: SourceHanSansSC-Heavy;
font-size: 16px;
font-weight: bold;
line-height: 25px;
letter-spacing: 1px;
text-align: left;
color: #ffffff;
}
.screen2 {
width: 352px;
height: 370px;
background-color: #fff;
margin: 30px auto;
border-radius: 8px;
position: relative;
text-align: center;
}
.screen2 .title-box{
position: absolute;
left: 50%;
padding: 3px 4px;
border: solid 7px #3A445A;
margin: -20px -36px;
background-color: #fff;
}
.title-box h2{
font-family: SourceHanSansCN-Heavy;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
color: #242222;
margin: 3px auto;
}
.screen2 h3{
font-family: SourceHanSansSC-Heavy;
font-size: 16px;
letter-spacing: 1px;
color: #3f3f3f;
padding-top: 41px;
}
.box {
margin-top: 16px;
}
.box div{
width: 88px;
height: 88px;
border: solid 2px #3b455b;
border-radius: 50%;
margin-left: 20px;
text-align: center;
float: left;
font-family: SourceHanSansSC-Medium;
font-size: 17px;
font-weight: bold;
letter-spacing: 1px;
color: #3f3f3f;
line-height: 88px;
}
.box div:nth-child(2) {
background-color: #3B455B;
color: #fff;
}
.screen2-box2 {
width: 189px;
height: 81px;
background-color: #7A96AF;
position: absolute;
top: 205px;
border-radius: 25px;
margin-left: 37px;
}
.screen2-box2 p {
padding-top: 5px;
padding-left: 15px;
font-family: SourceHanSansSC-Medium;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
text-align: left;
color: #ffffff;
}
.screen2 img {
position: absolute;
width: 86px;
height: 150px;
top: 198px;
right: 32px;
}
.screen3 {
margin-top: 55px;
height: 1046px;
}
.screen3 .title-box{
position: absolute;
left: 50%;
padding: 5px 15px;
margin: -20px -80px;
}
.screen3-box-title{
position: absolute;
top: 54px;
padding: 2px 8px;
margin-left: -8px;
height: 30px;
background-color: #3A445A;
font-family: SourceHanSansSC-Medium;
font-size: 16px;
height: 34px;
line-height: 30px;
font-weight: bold;
font-stretch: normal;
color: #ffffff;
border-radius: 10px;
text-align: center;
}
.screen3-box p{
width: 321px;
height: 52px;
font-family: SourceHanSansSC-Medium;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
color: #3f3f3f;
text-align: left;
}
.screen3-box .p1 {
position: absolute;
top: 101px;
left: 15px;
}
.screen3-box-title2 {
position: absolute;
top: 380px;
}
.screen3-box .p2 {
position: absolute;
top: 427px;
left: 12px;
}
.screen3-box-title3 {
position: absolute;
top: 725px;
}
.screen3-box .p3 {
position: absolute;
top: 772px;
left: 14px;
}
.screen3 .img1 {
position: absolute;
width: 186px;
left: 31px;
top: 190px;
}
.screen3 .img1-title {
position: absolute;
width: 176px;
left: 203px;
top: 270px;
width: 122px;
height: 71px;
text-align: left;
font-family: SourceHanSansSC-Medium;
text-decoration: underline;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
color: #3f3f3f;
opacity: 0.77;
}
.screen3 .img2 {
position: absolute;
width: 166px;
height: 208px;
left: 41px;
top: 490px;
}
.screen3 .img2-title {
position: absolute;
width: 166px;
height: 208px;
left: 193px;
top: 600px;
width: 122px;
height: 71px;
font-family: SourceHanSansSC-Medium;
text-decoration: underline;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
text-align: left;
letter-spacing: 1px;
color: #3f3f3f;
opacity: 0.77;
}
.screen3 .img3 {
position: absolute;
width: 150px;
left: 181px;
top: 890px;
}
.screen3 .img3-title {
position: absolute;
left: 33px;
top: 930px;
width: 146px;
height: 70px;
font-family: SourceHanSansSC-Medium;
text-decoration: underline;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
text-align: left;
letter-spacing: 1px;
color: #3f3f3f;
opacity: 0.75;
}
.screen4{
height: 430px;
position: relative;
}
.screen4 .title-box{
margin-left: -55px;
}
.screen4 img{
position: absolute;
width: 190px;
height: 170px;
top: 100px;
left: 80px;
}
.screen4-box p {
width: 321px;
height: 252px;
font-family: SourceHanSansSC-Medium;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
color: #3f3f3f;
}
.screen4-box .p1 {
position: absolute;
top: 274px;
left: 20px;
}
.screen4-box-title2 {
position: absolute;
top: 336px;
}
.screen4-box .p2 {
position: absolute;
top: 380px;
left: 20px;
}
.screen5{
height: 240px;
}
.screen5 .title-box{
margin-left: -55px;
}
.screen5-box p{
width: 120px;
font-family: SourceHanSansSC-Medium;
text-align: left;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
color: #3f3f3f;
padding: 35px;
}
.screen5 img{
/* padding: 10px; */
/* margin: 20px; */
width: 119px;
height: 144px;
position: absolute;
top: 60px;
right: 40px;
}
.footer{
position: relative;
height: 200px;
}
.footer p{
width: 144px;
height: 100px;
font-family: SourceHanSansCN-Heavy;
font-size: 8px;
font-weight: bold;
font-stretch: normal;
text-align: bottom;
letter-spacing: 1px;
color: #fefefe;
margin: 70px auto;
}
.footer .aa1 {
width: 30px;
position: absolute;
left: 80px;
top: 70px;
}
.footer .aa2 {
width: 66px;
height: 88px;
position: absolute;
left: 266px;
top: 0px;
}
.footer .aa3 {
width: 60px;
/* height: 88px; */
position: absolute;
left: 30px;
top: 0px;
}
.footer .aa4 {
width: 70px;
/* height: 88px; */
position: absolute;
left: 140px;
top: 70px;
}
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
