一、作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、作品效果
视频演示
https://live.csdn.net/v/embed/240066
(title-J27JP 二十四节气 6页 无js table表格 表单 浮动 视频)
截图演示
三、 作品代码
隣HTML代码
html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>二十四节气title><linkrel="stylesheet"href="css/style.css"><linkrel="stylesheet"href="css/index.css">head><body><divid="ershisi"><divid="banner"><imgsrc="picture/banner.png"alt="">div><nav><ahref=""class="dangqian">首页a><ahref="spring.html">春a><ahref="summer.html">夏a><ahref="autumn.html">秋a><ahref="winter.html">冬a><ahref="liuyan.html">留言a>nav><divid="mian"><divid="index_main"><imgsrc="picture/index.png"alt=""><h1>二十四节气介绍h1><p>二十四节气是我国历法中表示自然节律变化以及确立十二月建的特定节令,能准确反映自然节律变化,蕴含着悠久的文化内涵和历史积淀,是中华民族悠久历史文化的重要组成部分,被国际气象学界誉为中国的第五大发明,2016年被正式列入联合国教科文组织人类非物质文化遗产代表作目录。p><p>二十四节气最初是依据斗转星移制定,北斗七星循环旋转,斗柄顺时针旋转一圈为一周期,谓之一岁。现行确立二十四节气依据太阳周年视运动,也就是太阳黄经度数。两种确立方法虽然不同,但造成斗转星移的原因则是地球绕太阳公转,因此两者交节时间基本一致。二十四节气表征了地球在公转轨道上的位置和季节、气候的对应关系,它是非常科学的。二十四节气具有普适性,对于我国一些高纬地区,甚至南半球也可以借鉴其定义和内涵。p><p>二十四节气分别为:立春、雨水、惊蛰、春分、清明、谷雨、立夏、小满、芒种、夏至、小暑、大暑、立秋、处暑、白露、秋分、寒露、霜降、立冬、小雪、大雪、冬至、小寒、大寒。节气中的立春、惊蛰、清明、立夏、芒种、小暑、立秋、白露、寒露、立冬、大雪、小寒,分别为干支历寅月、卯月、辰月、巳月、午月、未月、申月、酉月、戌月、亥月、子月、丑月的起始。p><p>二十四节气,是中华民族悠久历史文化的重要组成部分,表达了人与自然宇宙之间独特的时间观念,蕴含着中华民族悠久的文化内涵和历史积淀。二十四节气不仅在农业生产方面起着指导作用,同时还影响着古人的衣食住行,甚至是文化观念。二十四节气形成以来一直是我国农业生产的风向标。农作物的生长发育与光、温、气、热、水等因素密不可分,二十四节气对当今农业生产仍有指导意义。二十四节气还是计算数九、暑伏、春社、秋社等时间点的基准。p>div><divid="liebiao"><h1>交节列表h1><table><trclass="table_title"><td>春季td><td>日期td><td>夏季td><td>日期td><td>秋季td><td>日期td><td>冬季td><td>日期td>tr><tr><td>立春td><td>2月3-5日td><td>立夏td><td>5月5-7日td><td>立秋td><td>8月7-9日td><td>立冬td><td>11月7-8日td>tr><tr><td>雨水td><td>2月18-20日td><td>小满td><td>5月20-22日td><td>处暑td><td>8月22-24日td><td>小雪td><td>11月22-23日td>tr><tr><td>惊蛰td><td>3月5-7日td><td>芒种td><td>6月5-7日td><td>白露td><td>9月7-9日td><td>大雪td><td>12月6-8日td>tr><tr><td>春分td><td>3月20-22日td><td>夏至td><td>6月21-22日td><td>秋分td><td>9月22-24日td><td>冬至td><td>12月21-23日td>tr><tr><td>清明td><td>4月4-6日td><td>小暑td><td>7月6-8日td><td>寒露td><td>10月8-9日td><td>小寒td><td>1月5-7日td>tr><tr><td>谷雨td><td>4月19-21日td><td>大暑td><td>7月22日-24日td><td>霜降td><td>10月23-24日td><td>大寒td><td>1月20-21日td>tr>table>div>div><footer>版权所有footer>div>body>html>
CSS代码
index_main{width:100%;margin-top:20px;}h1{line-height:50px;color:3874AA;border-bottom:1pxdottedccc;}index_mainimg{width:300px;float: left;margin-right:30px;margin-bottom:20px;}index_mainp{text-indent:32px;line-height:30px;margin-top:20px;font-size:18px;color:333;}liebiao{width:100%;margin-top:30px;color:333;background:url(../image/bg3.png) no-repeat;background-size:500px;background-position:600px0px;}liebiaoh1{line-height:50px;text-align: center;}liebiaotable{margin-top:20px;text-align: center;width:100%;line-height:40px;}.table_titletd{font-weight:700;font-size:20px;line-height:40px;color:333!important;}liebiaotabletrtd:nth-child(2n+1){color:3874AA;}
四、更多源码
工粽hao【web网页优选】下载源码
从web基础、计算机基础到前端常用框架的教程,涵盖前端大部分必备知识(学习指南 + 技术文章 + 资源分享)
更多源码:https://blog.csdn.net/bigwhiteshark?type=blog
举报/反馈