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

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

时间：2021-06-21 01:17:01

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

文章目录🌰

一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML结构代码 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀

一、网页介绍📖

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>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>蛟龙号载人潜水器是一艘由中国自行设计、自主集成研制的载人潜水器。5月至7月，蛟龙号载人潜水器在中国南海中进行了多次下潜任务，最大下潜深度达到了7020米。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秒。12月4日，中国科学技术大学宣布该校潘建伟等人成功构建76个光子的量子计算原型机“九章”。</p><div class="img" style="width: 50%;height: 300px;"><img src="./images/img-7.jpg"></div><h5>4、国产和谐号高速动车组</h5><p>和谐号电力动车组是中国引进德国、日本等国的高速动车组技术，在消化吸收再创新的基础上，生产的高速动车组系列的总称，是中国铁路全面实施自主创新战略取得的重大成果，标志着中国铁路客运装备的技术水平达到了世界先进水平。</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>“中国绿”，源自集中力量办大事的制度优势。随着中国不断推进生态文明顶层设计和制度体系建设，自上而下的决心和智慧正不断拓宽绿色发展之路。研究数据显示，过去，中国新增绿色面积的42%来自植树造林，32%来自农业。美国芝加哥大学能源政策研究所去年发表报告指出，至短短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>2月，美国航天局在社交媒体发文：“世界比前更绿了！”美国航天局卫星在2000年至间收集的数据显示，全球绿化面积增加了5%，相当于多出一个亚马孙热带雨林。其中，仅中国的植被增加量，就占到过去里全球植被总增量的25%以上，位居全球首位。</p></div></div></div><div class="footer"><marquee>Copyright © 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、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。