<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./demo.css" />
<link rel="stylesheet" href="./font/iconfont.css" />
</head>
<body>
<div id="box">
<div id="header">
<div class="container">
<div class="left">
<img src="./images/logo.png" alt="" />
</div>
<div class="mid">
<div class="address">
<span class="iconfont icon-dizhiguanli picture1"></span>
<span class="city">北京</span>
<span class="iconfont icon-xiajiantou picture2"></span>
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">分类</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="search">
<img src="./images/search.png" alt="" />
<input type="text" placeholder="搜索明星、演出、体育赛事" />
<div class="btn">搜索</div>
</div>
<div class="login">
<span class="iconfont icon-gerenxinxi picture"></span>
<span>登录</span>
</div>
<div class="downLoad">
<span class="iconfont icon-yunduanxiazai picture"></span>
<span>下载</span>
</div>
</div>
</div>
</div>
<div id="main">
<div class="container">
<!-- banner图 -->
<div class="banner">
<img src="./images/banner.jpg" alt="">
</div>
<!-- 列表 -->
<div class="list">
<div class="listItem">
<div class="picture"></div>
<div class="word">演唱会</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">话剧歌剧</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">体育</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">儿童亲子</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">展览休闲</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">音乐会</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">曲苑杂坛</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">舞蹈芭蕾</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">二次元</div>
</div>
<div class="listItem">
<div class="picture"></div>
<div class="word">旅游展览</div>
</div>
</div>
<!-- 展示信息 -->
<div class="shop1"></div>
<div class="shop2"></div>
<div class="shop3"></div>
<div class="shop4"></div>
</div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
</body>
</html>