HTML5+CSS3期末大作业—

页面展示：

首页源码：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="1.css" type="text/css"><link rel="shortcut icon" href="images/37.png" /> <title>我所在的城市--武汉</title>
</head>
<body><div id="box"><div class="img"></div><br><br><br><h1>武汉<span class="h_1">Wuhan</span></h1><h2 class="h_2"><span class="h_1">东方芝加哥</span>·Oriental Chicago</h2><nav><ul><li><a href="1.html" target="_blank"><img src="data:images/12.jpg" alt=""><br><div class="opword">城市与历史</div></a></li><li><a href="2.html" target="_blank"><img src="data:images/9.jpg" alt=""><br><div class="opword">美食与生活</div></a></li><li><a href="3.html" target="_blank"><img src="data:images/13.jpg" alt=""><br><div class="opword">旅行与建筑</div></a></li></ul><ul class="ul2"><li><a href="#"><img src="data:images/18.jpg" alt=""><br><div class="opword">自然与环境</div></a></li><li><a href="#"><img src="data:images/23.jpg" alt=""><br><div class="opword">人文与艺术</div></a></li><li><a href="#"><img src="data:images/21.jpg" alt=""><br><div class="opword">品牌与特产</div></a></li></ul></nav><br><br><br><div id="main"><side><div class="side1"><br><br><br><div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</div><br><h2>简介</h2><br><p>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽，联勤保障部队机关驻地。武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。作为中国经济地理中心，武汉有“九省通衢”之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。</p></div><div><img src="data:images/6.jpg" alt="" width="480" height="500"></div><div class="side1"><br><br><br><div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</div><br><h2>风景</h2><br><p>武汉是首批中国优秀旅游城市，每年举办武汉国际旅游节。武汉自然风光独特，四季气候分明，拥有其他大都市罕有的166个湖泊和众多山峦。武汉的人文景观具有浓郁的楚文化特色。截至2018年末，武汉市有国家A级旅游景区46个，其中5A级3个，4A级19个，3A级24个。</p></div><div><img src="data:images/22.jpg" alt="" width="480" height="500"></div></side><main><div><img src="data:images/4.jpg" alt="" width="720" height="500"></div><div class="main1"><br><br><br><div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</div><br><h2>历史</h2><br><p>武汉是国家历史文化名城，楚文化的重要发祥地，境内盘龙城遗址有3500年历史。春秋战国以来，武汉一直是中国南方的军事和商业重镇，明清时期成为“楚中第一繁盛处”、天下四聚之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心，被誉为“东方芝加哥”。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。武汉地区考古发现的历史可以上溯到距今8000年—6000年前的新石器时代早、中期，其考古发现有东湖放鹰台遗址的含有稻壳的红烧土、石斧、石锛以及鱼叉。市郊黄陂境内的张西湾古城遗址为4300年前古人类生活的重要遗存。盘龙城遗址是距今约3500年前的商朝方国宫城。春秋战国时期，武汉属楚国管辖。</p></div><div><img src="data:images/2.jpg" alt="" width="720" height="500"></div><div class="main1"><br><br><br><div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4</div><br><h2>饮食</h2><br><p>武汉饮食，可谓一早一晚，过早和宵夜最为经典，有“早尝户部巷，夜吃吉庆街”之美谈。武汉菜秉承湖北菜系风格，汇聚东西南北精华，菜品丰富多样，又自成特色，是著名的“美食之都”。武汉特色小吃有热干面、三鲜豆皮、面窝、米粑、豆丝、欢喜坨、鸭脖子、武昌鱼、排骨藕汤、洪山菜薹炒腊肉、糍粑等。</p></div></main>         </div><footer><br><br><br>&nbsp;&nbsp;Copyright&copy;2021.12.14-2021.12.16&nbsp;&nbsp;<br>版权归本人所有&nbsp;学号：2031620214</footer></div>
</body>
</html>

*{margin: 0;
}
body{background: url("images/37.jpg");backgroung-size:cover;background-repeat:round;background-attachment:fixed;}
#box{width:1200px;height:2010px;margin: 0 auto;
}
.img{width: 1200px;height: 600px;background: url("images/26.jpg") no-repeat center center/1200px 600px;
}
.h_1{font-size: 1.3em;color: #FF6537;
}
h1,.h_2{color:#FCFCEE;text-shadow: 1px 1px 2px #666666;
}
nav{width: 1200px;height: 658px;margin-top:70px;
}
nav ul li{display: inline-block;margin-left: -6px;text-align: center;height: 330px;
}
nav ul{margin-left: -34.5px;
}
.ul2{margin-top: -94px;
}
/*设置列表对齐并拢*/
nav ul li img{width:401px;height: 330px;
}
nav ul li a{font-size: 2em;font-weight: 700;color:#fff;line-height: 2.8em;text-decoration: none;
}
.opword{display: inline-block;background-color: rgba(205,202,202,0.5);width:401px;height: 100px;position: relative;top:-230px;
}
/*设置在图片上的透明背景加文字*/
nav ul li a:hover img{transform: scale(1,1.01);
}
nav ul li a:hover{font-size: 2.2em;
}
/*设置鼠标放上去的交互效果*/
#main{background-color: #fff;width:1200px;height: 2010px;margin-top: 100px;
}
/*side和main的盒子*/
side{width:40%;height: 1100px;float:left;
}
.side1{height: 500px;
}
.fra{width:80px;height: 80px;border: 2px solid #5A5858;font-size: 2em;color:#FF6537;line-height: 3.8em;margin-left: 50px;
}
.side1 h2,.side1 p{color: #666666;margin-left: 10px;margin-right: 10px;text-indent: 2em;
}
side p{ line-height: 1.6em;
}
main p{line-height: 1.6em;
}
main{width: 60%;height: 1100px;float: right;
}
.main1{height: 500px;
}
.main1 h2,.main1 p{color: #666666;margin-left: 10px;margin-right: 10px;text-indent: 2em;
}
footer{width: 1200px;height: 130px;background-color: #191919;color: #5D5D5D;font-size: 1.2em;text-align: center;
}

页面2：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="2.css" type="text/css"><link rel="shortcut icon" href="images/37.png" />
<title>美食与生活</title>
</head><body><div id="all"><div class="img"><img src="data:images/28.jpg" alt="" width="1200" height="600"></div><div class="box"><main><br><br><br><h1>唯有美食与爱，不可辜负</h1><br><div class="img1"><img src="data:images/9.jpg" alt="" width="300" height="200"></div><br><div class="box2"><h2>热干面</h2><p>热干面（Hot dry noodles）是武汉最出名的小吃之一，有多种做法，其采用碱水面，并以食油、芝麻酱、色拉油、香油、红油,细香葱、大蒜子、萝卜丁、酸豆角、卤水汁、生抽、醋等为辅助材料。热干面色泽黄而油润，味道鲜美，由于热量高，也可以当作主食，营养早餐，补充人体所需的能量。热干面与山西刀削面、两广伊府面、四川担担面、郑州烩面并称为中国五大名面，是颇具特色的过早小吃。</p></div><br>           <div class="img1"><img src="data:images/27.jpg" alt="" width="300" height="200"></div><br><div class="box2"><h2>三鲜豆皮</h2><p>三鲜豆皮是武汉人“过早”的另一种主要食品，也是武汉民间的一种传统小吃。以前人们逢年过节时用绿豆、大米混合磨浆摊皮，包上糯米、肉丁，油煎后作为节日佳肴；后来成为寻常早点。豆皮制作过程中要求“皮薄、浆清、火功正”，这样煎出的豆皮外脆内软、油而不腻。三鲜豆皮是以馅中有鲜肉、鲜蛋、鲜虾而得名。</p></div>               <br><div class="img1"><img src="data:images/30.jpg" alt="" width="300" height="200"></div><br><div class="box2"><h2>汤包</h2><p>只要提起汤包，武汉人保准异口同声地指向四季美。四季美汤包皮薄肉醇、汤汁鲜香、油而不腻、闻之沁人、观之悦目、食之可口。寄寓“四季美好”之意的四季美汤包是在苏式汤包的传统做法基础上不断改进形成的，没有那么甜，而且在汤包的顶端开了一个小口，便于散热。最经典的吃法是先轻咬破表皮，慢慢吸尽里面的汤汁，然后再吃汤包的面皮和肉馅。</p></div><br><div class="img1"><img src="data:images/32.jpg" alt="" width="300" height="200"></div><br><div class="box2"><h2>烧麦</h2><p>烧麦的制作方法是将肥膘猪肉、馒头、橘饼、花生米、冰糖、葡萄干等切成小丁，略微一炒，再用桂花、红绿丝、白糖调合成馅。面粉加水适量，放少许精盐揉和成面团，擀成一张张荷叶形薄皮，放入馅心，加少许麻油包成。烧麦或炸、或烤、或蒸，皆香甜可口，令人食之不厌。</p></div></main><side><div class="dyna"><br><br><video src="data:images/33.mp4" controls width="290" height="210" autoplay loop muted></video><h4>饮食动态</h4><p>武汉人把吃早餐俗称为“过早”，历史上武汉码头文化兴盛，人们要抓紧时间赶到集市，形成在外“过早”的习惯，并延续至今。清晨，每家早餐铺前都能看到人车交织、拥挤嘈杂的景象，这是属于武汉的市井气息。没有官方或民间统计过，武汉的早餐究竟有多少种，但“吃一个月不重样”是能轻松做到的。今天，我们就来盘点一下，武汉“过早”的十大经典美食。<br><span class="dot"></span></p></div><div class="reco"><h4>为您推荐</h4><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></side></div></div>
</body>
</html>

#all{width:1200px;height: 2500px;margin: 0 auto;margin-top:-10px;
}
body{background:url("images/36.jpg") no-repeat;background-size: cover;background-attachment: fixed;
}
.img img{outline: #fff 1px solid;
}
.box{width: 1200px;height: 2300px;background-color:rgba(205,203,203,0.8);margin-top: -25px;
}
main{width:68%;float: left;margin-left: 10px;
}
main h1{color:#E38003;text-shadow: 2px 2px 1px #7C7C7C;font-size: 2.2em;height: 80px;border-bottom: #E38003 6px solid;
}
.img1 img{border-radius: 110px;box-shadow: 2px 5px 22px gray;padding: 2px;
}
h2{color:aliceblue;font-size: 1.8em;text-shadow: -1px 0 black,0 -1px black;margin-left: 10px;margin-top: 20px;
}
main p{line-height: 1.5em;text-indent: 2em;margin-left: 10px;
}
.box2{width: 816px;height: 250px;border: 1px dashed #4E3514;
}
side{width: 29%;float: right;
}h4{margin-top:30px;color: #924A20;margin-left: 16px;font-size: 1.5em;font-family: 楷体;
}
side video{margin-left: 30px;
}
.dot{  display: inline-block;  height: 1em;  line-height: 1;  text-align: left;  vertical-align: -.25em;  overflow: hidden;
}
.dot::before{  display: block;  content: '正在加载...';  white-space: pre-wrap;  animation: dot 2s infinite step-start both;
}
@keyframes dot{  33% {  transform: translateY(-2em);  }  66% {  transform: translateY(-1em);  }
}
.dyna{background-color: #FFFEEE;border: 5px gray double;
}
.dyna p{color: #924A20;margin-left: 16px;font-size: 1.2em;font-family: 楷体;margin-right: 1em;text-indent: 2em;
}
.reco a{color: #666;font-size: 1.1em;text-decoration: none;
}
.reco li{margin-bottom: 10px;border-bottom: 1px #666 solid;
}

页面3：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="3.css" type="text/css">
<link rel="shortcut icon" href="images/37.png" />
<title>旅行与建筑</title>
</head><body><div class="all"><img src="data:images/35.jpg" alt="" width="1200" height="500"><br><br><br><br><br><hr color="#66BECE" size="4"><p class="img"><img src="data:images/34.png" alt="" width="120" height="90"></p><main><h2>景点介绍</h2><br><br><div class="img2"><img src="data:images/15.jpg" alt="" width="300" height="250"><h3>东湖</h3><p>因江水穿城，武汉被叫做「江城」；而有了湖，武汉才有了「江湖」。 东湖，便是武汉「最快意的江湖」。这里绿树成荫，繁花似锦；人们劈波斩浪，高手如云。它人气爆棚，是外地游客眼中的观光胜地，也是武汉人民身边的城市乐园。在樱花盛开的季节，美丽的樱花更是吸引了不少游客前来观赏。</p>          </div><br><br><br><br><div class="img2"><img src="data:images/5.jpg" alt="" width="300" height="250"><h3>光谷</h3><p>来到世界城就像进了“迪斯尼”乐园。世界城光谷步行街的商业景观设计，由香港迪斯尼商业景观设计原班人马打造，呈现原汁原味的欧式风情商业街。从凯旋门开始，参观欧洲文化的标志；行走在香榭丽舍大道，欣赏法式繁华；走进德国酒吧街，一品欧式美酒；至罗马凯撒广场，回忆悠久欧洲文明；进多莫大教堂、米兰春天广场，想象浪漫婚典；漫步西班牙广场，共享西班牙的奔放；穿过热情的弗拉门戈广场，漫步到充满沉浸式表演的喷泉广场感受光影与水的艺术魅力。</p></div><br><div class="img2"><img src="data:images/13.jpg" alt="" width="300" height="250"><h3>黄鹤楼</h3><p>黄鹤楼主楼为四边套八边形体、钢筋混凝土框架仿木结构，通高51.4米，底层边宽30米，顶层边宽18米，飞檐五层，攒尖楼顶，顶覆金色琉璃瓦，由72根圆柱支撑，楼上有60个翘角向外伸展；楼外有铸铜黄鹤造型、胜像宝塔、牌坊、轩廊、亭阁等建筑环绕，整楼形如黄鹤，展翅欲飞，檐下四面悬挂匾额，正面悬书法家舒同题“黄鹤楼”三字金匾。</p></div><div><form action="#"><h2>在线留言</h2><p><label for="username">用户名：</label>&nbsp;&nbsp;<input type="text" id="username"></p><p><label for="tel">电&nbsp;&nbsp;&nbsp;话：</label>&nbsp;&nbsp;<input type="tel" id="tel"></p><p><label for="email">邮&nbsp;&nbsp;&nbsp;箱：</label>&nbsp;&nbsp;<input type="email" id="email"></p><p><label for="content">内&nbsp;&nbsp;&nbsp;容：</label><textarea name="content" id="" cols="80" rows="10"></textarea></p><p><input type="submit" value="留言"></p></form></div></main>   <footer><ul class="contact_list"><li><div class="center_vertically contact_p"><img class="shaking" src="data:images/icon_5.png" alt="官方QQ" /></div><p class="contact_list_p"><a href="#">官方QQ</a></p></li><li><div class="center_vertically contact_p"><img class="shaking" src="data:images/icon_6.png" alt="24小时热线" /></div><p class="contact_list_p"><a href="#">24小时热线</a></p></li><li><div class="center_vertically contact_p"><img class="shaking" src="data:images/icon_7.png" alt="官方微信" /></div><p class="contact_list_p"><a href="#">官方微信</a></p></li><li><div class="center_vertically contact_p"><img class="shaking" src="data:images/icon_8.png" alt="官方微博" /></div><p class="contact_list_p"><a href="#">官方微博</a></p></li><li><div class="center_vertically contact_p"><img class="shaking" src="data:images/icon_9.png" alt="邮箱地址" /></div><p class="contact_list_p"><a href="#">邮箱地址</a></p></li></ul></footer></div>
</body>
</html>

/* CSS Document */
.all{width:1200px;height: 2550px;margin:0 auto;margin-top:-10px;background-color: rgba(227,226,226,0.8);
}
body{background: url("images/29.jpg") no-repeat;background-size: cover;background-attachment:fixed;
}
main{height: 1800px;padding: 10px;
}
.img{position: relative;top:-55px;width: 130px;height: 90px;left:500px;
}
.img2{margin-bottom: 40px;
}
.img2 img{float: left;
}
.img2 p,h3{font-size: 1.3em;line-height: 1.6em;text-indent: 2em;position: relative;left: 10px;
}
h2{font-size: 2.3em;color: cornflowerblue;text-shadow: -1px -1px 2px #2E6CE5;margin-top: -20px;
}
main img{box-shadow: 2px 2px 2px gray,-2px -2px 2px gray;padding: 7px;
}
h3{color:#1B1B1B;
}
form{margin-top: 250px;
}
form p{margin:30px 400px;
}
form label{font-size: 1.3em;font-weight: 700;color:#2E2C2C;
}
form input{padding: 8px 10px;padding-right: 90px;border:none;
}
form textarea{border: none;margin-left: 87px;margin-top: -22px;
}
input[type="submit"]{padding:6px 40px;text-align: center;font-size: 1.3em;font-weight: 700;background-color:#171212;color: #fff;
}
input[type="submit"]:hover{cursor: pointer;
}
input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,textarea:focus{outline: none;background-color: #FEDEB3;
}
footer{width: 1200px;margin: 50px auto;height: auto;color: #333333;text-align: center;overflow: hidden;margin-top: -30px;
}
.contact_list {width: 1200px;padding-top: 60px;height: 230px;font-size: 14px;color: #fff;overflow: hidden;}
.contact_list li {width: 226px;height: 230px;overflow: hidden;display: inline-block;
}
ul{background-color: #fff;margin-left: -37px;
}
.contact_p {padding-top: 52px;width: 100%;height: 70px;overflow: hidden;
}.contact_list_p a{line-height: 60px;color: #999999;text-decoration: none;font-size: 1.1em;
}
.contact_list_p a:hover{color: #EE7438;
}
.shaking {animation: move 3s 0s infinite;-webkit-animation: move 3s 0s infinite;transform-origin: bottom;
}
@keyframes move {0%,65%,100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}70%,80%,90% {-webkit-transform: rotate(6deg);transform: rotate(6deg);}75%,85%,95% {-webkit-transform: rotate(-6deg);transform: rotate(-6deg);}
}
@-webkit-keyframes move {0%,65%,100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}70%,80%,90% {-webkit-transform: rotate(6deg);transform: rotate(6deg);}75%,85%,95% {-webkit-transform: rotate(-6deg);transform: rotate(-6deg);}
}

需要全部图片文件、源代码可进我的资源里下载。

HTML5+CSS3期末大作业——城市简介相关推荐

HTML5+CSS3期末大作业：电影网站设计——黑色扁平的电影工作室静态网页学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:电影网站设计--黑色扁平的电影工作室静态HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码
学生网页课程设计期末作业下载 web网页设计制作成品- 详情介绍常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5+CSS期末大作业：篮球明星个人网站设计——篮球明星介绍(6页) 简单的学生DW网页设计作业成品 web课程设计网页规划与设计简单个人网页设计作业静态HTML旅行主题网页作业 DW
HTML5+CSS期末大作业:篮球明星个人网站设计--篮球明星介绍(6页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有 ...
HTML5+CSS期末大作业：个人博客网站设计——个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计简单的静态网页制作
HTML5+CSS期末大作业:个人主页/个人介绍网站设计--个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. 美食. 公 ...
HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
HTML5+CSS期末大作业：个人主页介绍主题——-我们的挚爱 (7页) 学生DW网页设计作业成品大学生个人网站作业模板简单个人网页制作
HTML5+CSS期末大作业:个人主页介绍主题---我们的挚爱 (7页) 学生DW网页设计作业成品大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
HTML5+CSS期末大作业：环保网站设计——动物保护网(6页) 大学生环境保护网页作品环保网页设计作业模板学生网页制作源代码下载...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5+CSS期末大作业：明星主页网站设计—— 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品
HTML5期末大作业:明星主页网站设计-- 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生 ...

HTML5+CSS3期末大作业——城市简介

HTML5+CSS3期末大作业——城市简介相关推荐

最新文章

热门文章