| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <!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">
- <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
- <link rel="stylesheet" href="./css/reset.css">
- <link rel="stylesheet" href="./css/main.css">
- <title>河南博物院</title>
- </head>
- <style>
- .myTitle {
- letter-spacing: 4px;
- margin: 0 auto;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 270px;
- height: 50px;
- background: url('./img/titleBac.png') no-repeat center;
- background-size: 100% 100%;
- }
- .containers {
- padding-top: 40px;
- width: 100vw;
- max-width: 1080px;
- /* height: 100vh; */
- background-color: #285b5e;
- position: relative;
- }
- .none {
- opacity: 0;
- pointer-events: none;
- letter-spacing: 4px;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- font-size: 30px;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .search {
- width: 280px;
- height: 30px;
- position: absolute;
- top: 50px;
- right: 20px;
- display: flex;
- }
- .search input {
- padding: 0 10px;
- border: none;
- width: 200px;
- }
- input:focus {
- outline: none;
- }
- .searImg{
- cursor: pointer;
- width: 30px;
- height: 30px;
- background: url('./images/searImg.png') #fff no-repeat center;
- background-size: 20px 20px;
- }
- </style>
- <body>
- <div class="containers">
- <div class="myTitle">河南博物院</div>
- <ul class="con"> </ul>
- <div class="none">暂无文物...</div>
- <div class="search">
- <input class="myInp" type="text" placeholder="请输入文物名称搜索" />
- <div class="searImg"></div>
- </div>
- </div>
- <script src="js/jquery.js"></script>
- <script src="js/ui.js"></script>
- </body>
- </html>
|