学生DW静态网页设计红色中国文化主题网站设计 ——美丽中国1页HTML+CSS

最新推荐文章于 2024-05-17 15:34:29 发布

优质内容贡献

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量76

点赞数

分类专栏： html网页设计作业 web大学生个人网站作业模文章标签： html css 前端 HTML网页设计结课作业

本文链接：https://blog.csdn.net/qq_524614081/article/details/134907749

版权

web大学生个人网站作业模同时被 2 个专栏收录

558 篇文章 29 订阅

订阅专栏

html网页设计作业

547 篇文章 19 订阅

订阅专栏

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <title>美丽中国</title>
  </head>

  <body>
    <!-- 头部 -->
    <div class="header">
      <img src="./images/img-1.jpg">
    </div>
    <div class="article">
      <h1 align="center" class="title">美丽中国</h1>
      <h3>中国特色文化：</h3>
      <div class="box">
        <div>
          <h5>中国书法</h5>
          <p>
            中国书法是一门古老的汉字的书写艺术，从甲骨文、石鼓文、金文（钟鼎文）演变而为大篆、小篆、隶书，至定型于东汉、魏、晋的草书、楷书、行书等，书法一直散发着艺术的魅力。汉字书法为汉族独创的表现艺术，被誉为：无言的诗，无行的舞；无图的画，无声的乐。汉字是中国书法中的重要因素，因为中国书法是在中国文化里产生、发展起来的，而汉字是中国文化的基本要素之一。以汉字为依托，是中国书法区别于其他种类书法的主要标志。
          </p>
        </div>
        <div class="img" style="width: 30%;height: 200px;margin-left: 1%;">
          <img src="./images/img-2.jpg">
        </div>
      </div>
      <div class="box">
        <div>
          <h5>木版水印</h5>
          <p>
            木版水印（古代彩色版画印刷术）水印字画是中国传统特有的版画印刷技艺。它集绘画、雕刻和印刷为一体，根据水墨渗透原理显示笔触墨韵，既可用以创作体现自身特点的艺术作品，也可逼真地复制各类中国字画。木版水印字画在我国具有悠久的历史。远在唐代，单色木版印刷已经具有相当水平。明末以十竹斋为代表的“饾版”、“拱花”等套色叠印，表明技术有了更大的进步。由于这项技艺始终基于手工进行，所以中国纯粹作为非物质文化遗产予以继承和发展。
          </p>
        </div>
        <div class="img" style="width: 40%;height: 400px;margin-left: 1%;">
          <img src="./images/img-3.jpg">
        </div>
      </div>
      <div class="box">
        <div>
          <h5>茶</h5>
          <p>
            茶，植物学名：Camellia sinensis (L.) O. Ktze.，灌木或小乔木，嫩枝无毛。叶革质，长圆形或椭圆形，先端钝或尖锐，基部楔形，上面发亮，下面无毛或初时有柔毛，边缘有锯齿，叶柄无毛。花白色，花柄有时稍长；萼片阔卵形至圆形，无毛，宿存；花瓣阔卵形，基部略连合，背面无毛，有时有短柔毛；子房密生白毛；花柱无毛。蒴果3球形或1-2球形，高1.1-1.5厘米，每球有种子1-2粒。花期10月至翌年2月。
          </p>
          <p>
            野生种遍见于中国长江以南各省的山区，为小乔木状，叶片较大，常超过10厘米长，长期以来，经广泛栽培，毛被及叶型变化很大。茶叶可作饮品，含有多种有益成分，并有保健功效。
          </p>
          <p>
            2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，茶在3类致癌物清单中。属于对人类致癌性可疑，尚无充分的人体或动物数据的物质类。
          </p>
        </div>
        <div class="img" style="width: 40%;height: 400px;margin-left: 1%;">
          <img src="./images/img-4.jpg">
        </div>
      </div>
      <h3>创新中国：</h3>
      <h5>1、蛟龙号载人潜水器</h5>
      <p>
        蛟龙号载人潜水器是一艘由中国自行设计、自主集成研制的载人潜水器。2010年5月至7月，蛟龙号载人潜水器在中国南海中进行了多次下潜任务，最大下潜深度达到了7020米。2012年6月，在马里亚纳海沟创造了下潜7062米的中国载人深潜纪录，也是世界同类作业型潜水器最大下潜深度纪录。
      </p>
      <div class="img" style="width: 50%;height: 300px;">
        <img src="./images/img-5.jpg">
      </div>
      <h5>2、嫦娥四号登录月球背面</h5>
      <p>
        嫦娥四号，是中国探月工程二期发射的月球探测器，也是人类第一个着陆月球背面的探测器；实现了人类首次月球背面软着陆和巡视勘察，意义重大，影响深远 。
      </p>
      <div class="img" style="width: 50%;height: 300px;">
        <img src="./images/img-6.jpg">
      </div>
      <h5>3、九章量子计算机</h5>
      <p>
        “九章”是中国科学技术大学潘建伟团队与中科院上海微系统所、国家并行计算机工程技术研究中心合作，成功构建76个光子的量子计算原型机，求解数学算法高斯玻色取样只需200秒。2020年12月4日，中国科学技术大学宣布该校潘建伟等人成功构建76个光子的量子计算原型机“九章”。
      </p>
      <div class="img" style="width: 50%;height: 300px;">
        <img src="./images/img-7.jpg">
      </div>
      <h5>4、国产和谐号高速动车组</h5>
      <p>
        和谐号电力动车组是2004年中国引进德国、日本等国的高速动车组技术，在消化吸收再创新的基础上，生产的高速动车组系列的总称，是中国铁路全面实施自主创新战略取得的重大成果，标志着中国铁路客运装备的技术水平达到了世界先进水平。
      </p>
      <div class="img" style="width: 50%;height: 300px;">
        <img src="./images/img-8.jpg">
      </div>
      <h3>绿色中国：</h3>
      <div class="box">
        <div class="img" style="width: 50%;height: 500px;margin-right: 1%;">
          <img src="./images/img-9.jpg">
        </div>
        <div>
          <p>
            “中国绿”，源自先进的生态文明思想和绿色发展理念。中华民族向来尊重自然、热爱自然，中华文明孕育着丰富的生态文化。生态兴则文明兴，生态衰则文明衰。新时代中国大力推进生态文明建设，努力建设美丽中国，实现中华民族永续发展。在辽阔的中国大地上，“绿水青山就是金山银山”“像保护眼睛一样保护生态环境，像对待生命一样对待生态环境”等凝聚起广泛共识。如今，“绿色发展”“生态文明”等理念和词汇已被纳入联合国文件。
          </p>
          <p>
            “中国绿”，源自集中力量办大事的制度优势。随着中国不断推进生态文明顶层设计和制度体系建设，自上而下的决心和智慧正不断拓宽绿色发展之路。研究数据显示，过去17年，中国新增绿色面积的42%来自植树造林，32%来自农业。美国芝加哥大学能源政策研究所去年发表报告指出，2013年至2017年短短4年间，中国治理空气污染取得的进步“不管从哪种标准说都相当卓越”，而美国完成同样的任务用了数十年。联合国官员更是盛赞中国生态环境改善的速度是“人类历史上最快的”。快的背后，是中国的绿色动员能力和执行能力。
          </p>
        </div>
      </div>
      <div class="box">
        <div class="img" style="width: 50%;height: 450px;margin-right: 1%;">
          <img src="./images/img-10.jpg">
        </div>
        <div>
          <p>
            “中国绿”，源自深度参与全球环境治理的大国担当。同世界各国深入开展生态文明领域的交流合作，携手共建生态良好的地球美好家园，这是中国一以贯之的追求，也是构建人类命运共同体的应有之义。推动气候变化《巴黎协定》的达成、生效与实施，出资200亿元人民币设立气候变化南南合作基金，为太平洋岛国应对气候变化提供支持，建立“一带一路”绿色发展国际联盟，将绿色发展合作计划纳入中非“十大合作计划”“八大行动”。
          </p>
          <h5>建设成果</h5>
          <p>
            2019年2月，美国航天局在社交媒体发文：“世界比20年前更绿了！”美国航天局卫星在2000年至2017年间收集的数据显示，全球绿化面积增加了5%，相当于多出一个亚马孙热带雨林。其中，仅中国的植被增加量，就占到过去17年里全球植被总增量的25%以上，位居全球首位。
          </p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <marquee>Copyright © 2022 xxx All rights reserved.</marquee>
    </div>
  </body>
</html>

2.CSS样式代码 🏠


* {
  margin: 0;
  padding: 0;
}
body{
  background-image: url("../images/bj.png");
}
img{
  object-fit: cover;
  object-position: center;
}

/* 头部 */
.header{
  width: 1100px;
  box-sizing: border-box;
  margin: 0 auto;
  height: 400px;
  box-shadow: 0 0 10px #ee9c0e;
}
.header img{
  width: 100%;
  height:100%;
}

/* 文章 */
.article{
  background-color: #fff;
  width: 1100px;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 0 10px #ee9c0e;
  padding: 20px 15px 10px 15px;
}
.article .title{
  border-bottom: 2px dashed rgb(221, 106, 106);
  padding-bottom: 10px;
}
.article h3{
  margin-top: 5px;
}
.article h5{
  margin-top: 3px;
  font-size: 16px;
}
.article p{
  text-indent: 2rem;
  line-height: 2;
  margin-bottom: 15px;
}
.box{
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 10px;
}
.box .img{
  flex-shrink: 0;
}
.img img{
  width: 100%;
  height:100%;
}

/* 底部 */
.footer{
  width: 100%;
  background-color: brown;
  color: white;
}
.footer marquee{
  height: 50px;
  line-height: 54px;
}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

优质内容贡献

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学生DW静态网页设计红色中国文化主题网站设计 ——美丽中国1页HTML+CSS

1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。
复制链接

扫一扫