页面展示：
首页源码：
<!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="images/12.jpg" alt=""><br><div class="opword">城市与历史</div></a></li>
<li><a href="2.html" target="_blank"><img src="images/9.jpg" alt=""><br><div class="opword">美食与生活</div></a></li>
<li><a href="3.html" target="_blank"><img src="images/13.jpg" alt=""><br><div class="opword">旅行与建筑</div></a></li>
</ul>
<ul class="ul2">
<li><a href="#"><img src="images/18.jpg" alt=""><br><div class="opword">自然与环境</div></a></li>
<li><a href="#"><img src="images/23.jpg" alt=""><br><div class="opword">人文与艺术</div></a></li>
<li><a href="#"><img src="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"> 1</div><br>
<h2>简介</h2><br>
<p>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽，联勤保障部队机关驻地。武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。作为中国经济地理中心，武汉有“九省通衢”之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。</p>
</div>
<div><img src="images/6.jpg" alt="" width="480" height="500"></div>
<div class="side1">
<br><br><br>
<div class="fra"> 3</div><br>
<h2>风景</h2><br>
<p>武汉是首批中国优秀旅游城市，每年举办武汉国际旅游节。武汉自然风光独特，四季气候分明，拥有其他大都市罕有的166个湖泊和众多山峦。武汉的人文景观具有浓郁的楚文化特色。截至2018年末，武汉市有国家A级旅游景区46个，其中5A级3个，4A级19个，3A级24个。</p>
</div>
<div><img src="images/22.jpg" alt="" width="480" height="500"></div>
</side>
<main>
<div><img src="images/4.jpg" alt="" width="720" height="500"></div>
<div class="main1">
<br><br><br>
<div class="fra"> 2</div><br>
<h2>历史</h2><br>
<p>武汉是国家历史文化名城，楚文化的重要发祥地，境内盘龙城遗址有3500年历史。春秋战国以来，武汉一直是中国南方的军事和商业重镇，明清时期成为“楚中第一繁盛处”、天下四聚之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心，被誉为“东方芝加哥”。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。武汉地区考古发现的历史可以上溯到距今8000年—6000年前的新石器时代早、中期，其考古发现有东湖放鹰台遗址的含有稻壳的红烧土、石斧、石锛以及鱼叉。市郊黄陂境内的张西湾古城遗址为4300年前古人类生活的重要遗存。盘龙城遗址是距今约3500年前的商朝方国宫城。春秋战国时期，武汉属楚国管辖。</p>
</div>
<div><img src="images/2.jpg" alt="" width="720" height="500"></div>
<div class="main1">
<br><br><br>
<div class="fra"> 4</div><br>
<h2>饮食</h2><br>
<p>武汉饮食，可谓一早一晚，过早和宵夜最为经典，有“早尝户部巷，夜吃吉庆街”之美谈。武汉菜秉承湖北菜系风格，汇聚东西南北精华，菜品丰富多样，又自成特色，是著名的“美食之都”。
武汉特色小吃有热干面、三鲜豆皮、面窝、米粑、豆丝、欢喜坨、鸭脖子、武昌鱼、排骨藕汤、洪山菜薹炒腊肉、糍粑等。</p>
</div>
</main>
</div>
<footer>
<br><br><br>
Copyright©2021.12.14-2021.12.16
<br>版权归本人所有 学号：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="images/28.jpg" alt="" width="1200" height="600"></div>
<div class="box">
<main>
<br><br><br>
<h1>唯有美食与爱，不可辜负</h1><br>
<div class="img1"><img src="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="images/27.jpg" alt="" width="300" height="200"></div><br>
<div class="box2">
<h2>三鲜豆皮</h2>
<p>三鲜豆皮是武汉人“过早”的另一种主要食品，也是武汉民间的一种传统小吃。以前人们逢年过节时用绿豆、大米混合磨浆摊皮，包上糯米、肉丁，油煎后作为节日佳肴；后来成为寻常早点。豆皮制作过程中要求“皮薄、浆清、火功正”，这样煎出的豆皮外脆内软、油而不腻。三鲜豆皮是以馅中有鲜肉、鲜蛋、鲜虾而得名。</p>
</div>
<br>
<div class="img1"><img src="images/30.jpg" alt="" width="300" height="200"></div><br>
<div class="box2">
<h2>汤包</h2>
<p>只要提起汤包，武汉人保准异口同声地指向四季美。四季美汤包皮薄肉醇、汤汁鲜香、油而不腻、闻之沁人、观之悦目、食之可口。寄寓“四季美好”之意的四季美汤包是在苏式汤包的传统做法基础上不断改进形成的，没有那么甜，而且在汤包的顶端开了一个小口，便于散热。最经典的吃法是先轻咬破表皮，慢慢吸尽里面的汤汁，然后再吃汤包的面皮和肉馅。</p>
</div>
<br>
<div class="img1"><img src="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="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="images/35.jpg" alt="" width="1200" height="500"><br><br><br><br><br>
<hr color="#66BECE" size="4">
<p class="img"><img src="images/34.png" alt="" width="120" height="90"></p>
<main>
<h2>景点介绍</h2><br><br>
<div class="img2">
<img src="images/15.jpg" alt="" width="300" height="250"><h3>东湖</h3><p>因江水穿城，武汉被叫做「江城」；而有了湖，武汉才有了「江湖」。 东湖，便是武汉「最快意的江湖」。这里绿树成荫，繁花似锦；人们劈波斩浪，高手如云。它人气爆棚，是外地游客眼中的观光胜地，也是武汉人民身边的城市乐园。在樱花盛开的季节，美丽的樱花更是吸引了不少游客前来观赏。</p>
</div><br><br><br><br>
<div class="img2">
<img src="images/5.jpg" alt="" width="300" height="250"><h3>光谷</h3><p>来到世界城就像进了“迪斯尼”乐园。世界城光谷步行街的商业景观设计，由香港迪斯尼商业景观设计原班人马打造，呈现原汁原味的欧式风情商业街。从凯旋门开始，参观欧洲文化的标志；行走在香榭丽舍大道，欣赏法式繁华；走进德国酒吧街，一品欧式美酒；至罗马凯撒广场，回忆悠久欧洲文明；进多莫大教堂、米兰春天广场，想象浪漫婚典；漫步西班牙广场，共享西班牙的奔放；穿过热情的弗拉门戈广场，漫步到充满沉浸式表演的喷泉广场感受光影与水的艺术魅力。</p>
</div><br>
<div class="img2">
<img src="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> <input type="text" id="username"></p>
<p><label for="tel">电 话：</label> <input type="tel" id="tel"></p>
<p><label for="email">邮 箱：</label> <input type="email" id="email"></p>
<p><label for="content">内 容：</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="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="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="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="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="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);
}
}
需要全部图片文件、源代码可进我的资源里下载。
