【免费】Web结课作业，基于html+css的简单网页资源-CSDN文库

共54个文件

jpg：23个

png：21个

html：8个

需积分: 0 39 浏览量更新于2023-04-08 收藏 2.06MB ZIP 举报

在本项目中，我们主要探讨的是使用HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）这两种核心技术来创建一个简单的网页。HTML是用于构建网页结构的基础语言，而CSS则是用于美化和布局这些结构的关键工具。以下是关于这两个重要技术的详细解释以及如何将它们应用于创建静态网页。 1. HTML (超文本标记语言) HTML是万维网的核心语言，它通过一系列预定义的标签来描述网页内容，如标题、段落、图片、链接等。在"Web结课作业"中，HTML文件可能包含了以下元素： - `<head>`：包含元数据，如页面标题、字符编码等。 - `<title>`：定义浏览器标签页上的标题。 - `<body>`：主体内容区域，包含所有可见的网页内容。 - `<h1> - <h6>`：标题标签，表示不同级别的标题。 - `<p>`：段落标签，用于组织文本。 - `<a>`：链接标签，用于创建超链接。 - `<img>`：图像标签，用于插入图片。 - `<div>`：分组元素，常用作布局容器。 - `<ul>` 和 `<li>`：无序列表和列表项，用于列举信息。 2. CSS (层叠样式表) CSS允许我们将样式和布局从HTML内容中分离出来，使网页设计更加灵活和可维护。在“html+css的静态网页(简单版)”中，CSS可能应用了以下技术： - `选择器`：如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，用于指定样式的目标。 - `属性`：如`color`（颜色）、`font-size`（字体大小）、`background-color`（背景色）、`padding`（内边距）、`margin`（外边距）等，定义元素的视觉效果。 - `盒模型`：包括`content`、`padding`、`border`和`margin`，影响元素的尺寸和位置。 - `布局技术`：如浮动（`float`）、定位（`position`）、Flexbox（弹性盒子布局）或Grid（网格布局），用于控制元素的排列和对齐方式。 - `响应式设计`：利用媒体查询（`media queries`）根据设备屏幕尺寸调整样式，实现跨平台的友好展示。在实际操作中，HTML和CSS文件通常是分开的，HTML负责内容，CSS负责样式。HTML文件可能有一个链接到CSS文件的`<link>`标签，如`<link rel="stylesheet" href="style.css">`，这样浏览器就能加载并应用CSS样式。这个“Web结课作业”项目是学习和实践基础网页开发的一个好例子。通过HTML和CSS的结合，学生可以创建出具有清晰结构和美观外观的静态网页。这只是一个起点，随着技能的提升，可以进一步探索JavaScript和其他前端技术，为网页添加交互性和动态功能。

收起资源包目录

html+css的静态网页(简单版).zip （54个子文件）

html+css的静态网页(简单版)

效果图.png 598KB

otherHtml

center.html 424B

header.html 1KB

hubei.html 8KB

scfood.html 8KB

jxfood.html 6KB

hnfood.html 5KB

bffood.html 11KB

image

ddm.jpg 18KB

guobaorou.jpg 63KB

tofu.jpg 47KB

luzhu.jpg 88KB

potato.jpg 28KB

jianbing.jpg 82KB

bf.jpg 258KB

beijing-duck.png 13KB

jianbing.png 7KB

fqfp.png 23KB

sdp.png 10KB

fqfp.jpg 27KB

btg.png 12KB

zf.jpg 31KB

sbj.jpg 35KB

rice-noodle.jpg 40KB

src=http___n.sinaimg.cn_sinacn_w1280h720_20180215_33b2-fyrpeie8812367.jpg&refer=http___n.sinaimg.jpg 155KB

potato.png 12KB

bg1.jpg 106KB

sdp.jpg 15KB

sbj.png 10KB

ddm.png 22KB

guobaorou.png 11KB

tofu.png 8KB

btg.jpg 24KB

hot-pot.png 9KB

zf.png 5KB

meat.png 9KB

hot-pot.jpg 41KB

hotnoodle.jpg 39KB

chicken.jpg 36KB

wgt.png 13KB

duck.png 5KB

lobster.png 8KB

noodle.png 6KB

wgt.jpg 35KB

chicken.png 6KB

rice-noodle.png 17KB

meat.jpg 29KB

lobster.jpg 33KB

duck.jpg 47KB

beijing-duck.jpg 106KB

luzhu.png 6KB

css

header.css 220B

center.css 216B

index.html 870B

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>北方美食系列</title> <style> .bffood{ margin-left: 10px; margin-right: 10px; } a{ text-decoration: none; color: #00ff00; } .tip{ width: 300px; height: 200px; margin-left: 50px; border: 3px solid #fcebdf; background:#ffe55e } @keyframes fade-in { 0% {opacity: 0;}/*初始状态透明度为0*/ 40% {opacity: 0;}/*过渡状态透明度为0*/ 100% {opacity: 1;}/*结束状态透明度为1*/ } @-webkit-keyframes fade-in {/*针对webkit内核*/ 0% {opacity: 0;} 40% {opacity: 0;} 100% {opacity: 1;} } .bffood { animation: fade-in;/*动画名称*/ animation-duration: 1s;/*动画持续时间*/ -webkit-animation:fade-in 1s;/*针对webkit内核*/ } </style> </head> <body> <div class="bffood"> <div style="height: 10%;text-align: center;"> <h1>北方美食系列</h1> </div> <div style="height: 20%; display: flex;text-align: center;"> <div style="margin-left: 24%;"></div> <div class="tip" onclick="changeDiv(0)"><h1 style="padding: 50px;;">北京烤鸭</h1></div> <div class="tip" onclick="changeDiv(1)"><h1 style="padding: 50px;">煎饼果子</h1></div> <div class="tip" onclick="changeDiv(2)"><h1 style="padding: 50px;">北京卤煮</h1></div> <div class="tip" onclick="changeDiv(3)"><h1 style="padding: 50px;">锅包肉</h1></div> </div> <hr style="height: 3px; background: linear-gradient(#141115,#c9fbff); border: none; margin-top: 20px;"> <div class="dfood" style="display: none;background-color: #ffe37e;border: 3px solid #fff1e6;margin-top: 20px;"> <div> <img src="../image/beijing-duck.jpg" style="border-radius: 50%;" /> </div> <div> <div style="display: flex;"> <img src="../image/beijing-duck.png" width="40px" height="40px" style="padding-top: 25px;" /> <h1>北京烤鸭：</h1> </div> <div> <p> <h2>     烤鸭是具有世界声誉的北京著名菜式，起源于中国南北朝时期，《食珍录》中已记有炙鸭，在当时是宫廷食品。用料为优质肉食鸭北京鸭，果木炭火烤制，色泽红润，肉质肥而不腻，外脆里嫩。北京烤鸭分为两大流派，而北京最著名的烤鸭店也即是两派的代表。它以色泽红艳，肉质细嫩，味道醇厚，肥而不腻的特色，被誉为“天下美味”。 </h2> <h2>     相传，烤鸭之美，是源于名贵品种的北京鸭，它是当今世界最优质的一种肉食鸭。据说，这一特种纯北京鸭的饲养，约起于千年前左右，是因辽金元之历代帝王游猎，偶获此纯白野鸭种，后为游猎而养，一直延续下来，才得此优良纯种，并培育成今之名贵的肉食鸭种。即用填喂方法育肥的一种白鸭，故名“填鸭”。不仅如此，北京鸭曾在百年以前传至欧美，经繁育一鸣惊人。因而，作为优质品种的北京鸭，成为世界名贵鸭种来源已久。 <a href="https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC%E7%83%A4%E9%B8%AD/664769?fr=aladdin">了解更多>></a> </h2> </p> </div> </div> </div> <div class="dfood" style="display: none;background-color: #ffe78e;border: 3px solid #fff1e6;margin-top: 20px;"> <div> <img src="../image/jianbing.jpg" style="border-radius: 50%;" /> </div> <div> <div style="display: flex;"> <img src="../image/jianbing.png" width="40px" height="40px" style="padding-top: 25px;" /> <h1>煎饼果子：</h1> </div> <div> <p> <h2>     煎饼馃子，是中国天津、山东、河北等地的著名小吃，天津人以它为早点。煎饼馃子由绿豆面薄饼、鸡蛋、还有馃子（油条）或者薄脆的“馃篦儿”组成，配以面酱、葱末、腐乳、辣椒酱（可选）作为佐料。 </h2> <h2>     煎饼果子是大家在日常生活中非常喜欢的一种的小吃。说起煎饼果子大家就会想起山东或者天津，这两个地方的煎饼果子不仅美味，而且有着久远的历史，不过哪一个地方才是正宗也是大家都很好奇的事情。关于这个问题，首先，煎饼是产自山东地区的，关于煎饼在山东还有一个历史故事。说是当初诸葛亮刚开始辅佐刘备的时候经常被曹军杀的四散而逃，有一次诸葛亮以及将士被围困在沂河、湅河之间，因为做饭的炊具丢失，诸葛亮便让将士们在铜锣上造出了煎饼。后来，这种制作煎饼的方法慢慢流传了下来，现如今在山东临沂大部分地区，人们的主食还是煎饼，虽然煎饼起源于山东，但是煎饼果子起源于天津地区，在天津地区流传着关于这种食物的种种传说，在明朝的时候，天津地区有很多来自各地的商人，有山东来的商人带来了煎饼，也就促使了煎饼果子在天津产生。而且，天津地区的煎饼果子已经申请成为了非物质文化遗产，这就相当于确定了天津煎饼果子的正宗地位。 <a href="https://baike.baidu.com/item/%E7%85%8E%E9%A5%BC%E9%A6%83%E5%AD%90/474937?fr=aladdin">了解更多>></a> </h2> </p> </div> </div> </div> <div class="dfood" style="display: none;background-color: #ffe37e;border: 3px solid #fff1e6;margin-top: 20px;"> <div> <img src="../image/luzhu.jpg" style="border-radius: 50%;" /> </div> <div> <div style="display: flex;"> <img src="../image/luzhu.png" width="40px" height="40px" style="padding-top: 25px;" /> <h1>北京卤煮：</h1> </div> <div> <p> <h2>     卤煮是北京一道著名的地方传统小吃，它是将火烧、炖好的猪肠和猪肺放在一起煮，买一碗主食，副食和热汤都有了。卤煮起源于北京城南的南横街。据说光绪年间，因为用五花肉煮制的苏造肉价格昂贵，所以人们就用猪头肉和猪下水代替。经过民间烹饪高手的传播，久而久之，造就了卤煮火烧。地道的北京人估计没几个不知道卤煮火烧的。 </h2> <h2>     历史来由：清宫廷中有一道名为苏造肉的菜肴。爱新觉罗·溥杰先生的夫人浩著的《食在宫廷》中介绍，乾隆四十五年（1780年），皇帝巡视南方，曾下榻于扬州安澜园陈元龙家中。陈府家厨张东官烹制的菜肴很受乾隆喜爱，后张东官随乾隆入宫，深知乾隆喜爱厚味之物，就用五花肉加丁香、官桂、甘草、砂仁、桂皮、蔻仁、肉桂等九味香料烹制出一道肉菜供膳。这九味香料按照春、夏、秋、冬四季的节气不同，用不同的数量配制。这种配制的香料煮成的肉汤，因张东官是苏州人，就称苏造汤，其肉就称苏造肉。后来传入民间，加入用面粉烙成的火烧同煮，便成为大众化的风味小吃。出售苏造肉的小贩清晨在东华门外设摊，专为进入升平署的官员做早点。民国之后，什刹海一带的饭馆和东安市场的景泉居出售苏造肉最有名气。《燕都小食品杂咏》中有苏造肉的咏诗一首： “苏造肥鲜饱志馋，火烧汤渍肉来嵌。纵然饕餮人称腻，一脔膏油已满衫。”并注说： “苏造肉者，以长条肥肉，酱汁炖之极烂�