HTML静态网页成品作业(HTML+CSS)——24节气之冬至介绍(1个页面)

🎉不定期分享源码，关注不丢失哦

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

<div id="main">
		<div id="header">
			<div class="logo">
				<img src="./image/logo.jpg">
			</div>
			<div class="header_right">
				<a href="">关于我们</a>
				<span>|</span>
				<a href="">联系我们</a>
			</div>
		</div>

		<div id="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">二十四节气</a></li>
				<li><a href="">节气传说</a></li>
				<li><a href="">节气习俗</a></li>
				<li><a href="">节气渊源</a></li>
			</ul>
		</div>

		<div id="banner">
			<img src="./image/banner.jpeg">
		</div>

		<div id="content">
			<div class="content1">
				<div class="content1_top">
					
					<div class="content1_top_item">
						<div class="content_tit">
							<span>冬至介绍</span>
							<a href="">MORE&gt;&gt;</a>
						</div>

						<div class="content_desc">
							冬至，又称日南至、冬节、亚岁等，兼具自然与人文两大内涵，既是二十四节气中一个重要的节气，也是中国民间的传统祭祖节日。冬至是四时八节之一，被视为冬季的大节日，在古代民间有“冬至大如年”的讲法。冬至习俗因地域不同而又存在着习俗内容或细节上的差异。在中国南方地区，有冬至祭祖、宴饮的习俗。在中国北方地区，每年冬至日有吃饺子的习俗。
						</div>
					</div>
					<div class="content1_top_item">
						<div class="content_tit">
							<span>冬至谚语</span>
							<a href="">MORE&gt;&gt;</a>
						</div>

						<div class="content_desc">
							<ul>
								<li>冬至西北风，来年干一春。</li>
								<li>清爽冬至邋遢年，邋遢冬至清爽年。</li>
								<li>冬至晴，正月雨；冬至雨，正月晴。</li>
								<li>冬至晴，新年雨，中秋有雨冬至晴。</li>
								<li>冬至晴，新年雨；冬至雨，新年晴。</li>
								<li>冬至冷，春节暖；冬至暖，春节冷。</li>
								<li>冬至不冷，夏至不热。</li>
								<li>冬至暖，冷到三月中。</li>
								<li>冬至暖，烤火到小满。</li>
							</ul>
						</div>
					</div>
					<div class="cl"></div>
				</div>

				<div class="content1_bom">
					
					<div class="content_tit">
						<span>冬至视频</span>
						<a href="">MORE&gt;&gt;</a>
					</div>

					<video controls autoplay>
					  <source src="./image/1.mp4" type="video/mp4">
					</video>
				</div>
			</div>

			<div  class="content2">
				
				<div class="content_tit">
					<span>冬至风俗</span>
					<a href="">MORE&gt;&gt;</a>
				</div>

				<div class="content_imgs">
					<img src="./image/1.jpeg">
					<img src="./image/2.jpeg">
					<img src="./image/3.jpg">
					<img src="./image/4.jpg">
					<img src="./image/5.jpeg">
					<img src="./image/6.jpg">
					<img src="./image/7.jpg">
					<img src="./image/8.jpg">
					<img src="./image/9.png">
					<img src="./image/10.jpg">
				</div>
			</div>
			<div class="cl"></div>
		</div>

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧