<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业1</title>
<link rel="stylesheet" href="./css/zhanlan.css">
</head>
<body>
<div class="head">
<p>展览设计模板</p>
</div>
<div class="conImg">
<img src="./img/lunbotu.jpg" alt="">
</div>
<div class="headBtoom">
<p>- 展览分类 -</p>
</div>
<div class="classify">
<div>
<img src="./img/l1.png" alt="">
<p>展览设计</p>
</div>
<div>
<img src="./img/l2.png" alt="">
<p>专柜制作</p>
</div>
<div>
<img src="./img/l3.png" alt="">
<p>活动策划</p>
</div>
<div>
<img src="./img/l4.png" alt="">
<p>珍品展示</p>
</div>
</div>
<div class="hot">
<p>- 近期热门 -</p>
</div>
<div class="hotShow">
<div class="hotIntroduce">
<p class="one">某花园奶奶都创作展</p>
<p class="two">官洲12月12日</p>
</div>
<div class="hotimg">
<img src="./img/hot.jpg" alt="">
</div>
<div class="hotimg">
<img src="./img/hot.jpg" alt="">
</div>
<div class="hotIntroduce">
<p class="one">某花园奶奶都创作展</p>
<p class="two">官洲12月12日</p>
</div>
<div class="hotIntroduce">
<p class="one">某花园奶奶都创作展</p>
<p class="two">官洲12月12日</p>
</div>
<div class="hotimg">
<img src="./img/hot.jpg" alt="">
</div>
</div>
<div class="headBtoom">
<p>- 企业优势 -</p>
</div>
<div class="advantage">
<span class="intro">
公司目前在广州、北京、上海拥有自己的大型展览制作工厂与施工队伍，
面积达5000多平方米，业务范围能直接辐射华南、
华北、华中地区及香港、澳门
</span>
<img src="./img/cont-.png" alt="">
<div class="bottomMenu">
<div class="bot">
<p>150+</p>
<p class="bot-two">设计人员</p>
</div>
<div class="bot">
<p>150+</p>
<p class="bot-two">设计人员</p>
</div>
<div class="bot">
<p>150+</p>
<p class="bot-two">设计人员</p>
</div>
<div class="bot">
<p>150+</p>
<p class="bot-two">设计人员</p>
</div>
</div>
</div>
<div class="headBtoom">
<p>- 经典案例 -</p>
</div>
<div class="footer-one">
<div class="back-img">
<div>某美院班毕业魔术站</div>
</div>
<div class="back-img">
<div>某美院班毕业魔术站</div>
</div>
</div>
<div class="headBtoom">
<p>- 计算报价 -</p>
</div>
<div class="footer-bot">
<p>设计面积</p>
<input type="text" placeholder="请输入设计面积">
</div>
<div class="footer-bot foot-two">
<p>装修风格</p>
<input type="text" placeholder="请输入装修风格">
</div>
<div class="result">
<a href="Javascript:;">查看计算结果</a>
</div>
<div class="bottom-maen">
<div>
<span class="iconfont"></span>
<p>首页</p>
</div>
<div>
<span class="iconfont"></span>
<p>展览案例</p>
</div>
<div>
<span class="iconfont"></span>
<p>会展咨询</p>
</div>
<div>
<span class="iconfont"></span>
<p>展览会议</p>
</div>
</div>
</body>
</html>css源码：
@font-face {
font-family: 'iconfont';
src:
url('iconfont.woff2?t=1664887508416') format('woff2'),
url('iconfont.woff?t=1664887508416') format('woff'),
url('iconfont.ttf?t=1664887508416') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body{
padding: 0;
margin: 0;
}
.head{
margin-top:20px;
font-size: 20px;
text-align: center;
}
.conImg{
width: 100%;
}
.conImg img{
width: 100%;
height: 182px;
}
.headBtoom{
border-bottom: 1px solid rgb(241, 241, 241);
display: flex;
justify-content: center;
}
.classify{
display: flex;
justify-content: space-around;
padding-top:30px;
height: 130px;
border-bottom: 10px solid rgb(247, 247, 247);
}
.classify div{
text-align: center;
}
.classify img{
width: 32px;
height: 32px;
}
.classify p{
font-size: 14px;
margin: 0;
}
.hot{
border-bottom: 1px solid rgb(241, 241, 241);
display: flex;
justify-content: center;
}
.hotShow {
display: flex;
flex-flow: wrap;
justify-content: space-between;
border-bottom: 10px solid rgb(247, 247, 247);
}
.hotShow img{
width: 100%;
height: 120px;
}
.hotShow div{
width: 50%;
}
.hotIntroduce{
display: flex;
flex-flow: column;
justify-content: center;
text-align: center;
}
.hotIntroduce p{
margin: 0;
}
.hotIntroduce .one{
font-size: 14px;
}
.hotIntroduce .two{
font-size: 10px;
color: rgb(255, 218, 8);
}
.advantage{
width: 100%;
height: 400px;
padding-top: 35px;
padding-left:15px;
padding-right:15px;
border-bottom: 10px solid rgb(247, 247, 247);
box-sizing: border-box;
text-align: center;}
.advantage .intro{
font-size: 0.8rem;
}
.advantage img{
margin: 25px 0;
width: 70%;
height: 170px;
}
.advantage .bot{
font-size: 0.6rem;
width: 48px;
height: 30px;
}
.bot p{
margin: 0;
}
.bot .bot-two{
color: rgb(255, 196, 0);
}
.bottomMenu{
display: flex;
justify-content: space-around;
}
.footer-one{
display: flex;
justify-content: space-around;
padding: 15px;
border-bottom: 10px solid rgb(247, 247, 247);
}
.footer-one .back-img{
color: aliceblue;
display: flex;
flex-flow: column-reverse;
width: 45%;
height: 100px;
line-height: 40px;
background: url(../img/3国潮.png);
}
.back-img div{
height: 30px;
width: 100%;
background-color: rgba(58, 58, 58, 0.5);
}
.footer-bot{
padding: 15px;
}
.foot-two{
margin-top: -30px;
}
.footer-bot input{
background-color: rgb(238, 240, 241);
padding:0 10px;
border: 0;
width: 95%;
height: 40px;
}
.result{
text-align: center;
width: 80%;
height: 50px;
line-height: 50px;
margin: 10px auto;
background-color: rgba(255, 192, 56, 0.794);
}
.result a{
color: aliceblue;
text-decoration: none;
line-break: normal;
}
.bottom-maen{
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
padding-top:10px;
box-sizing: border-box;
width: 100%;
height: 50px;
background-color: rgba(255, 192, 56);
}
.bottom-maen div{
text-align: center;
}
.iconfont{
font-size: 20px;
}
.bottom-maen p{
margin: 0;
font-size: 10px;
color: aliceblue;
}``` 
