43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<!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>仿简书搜索条效果</title>
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
<link rel="stylesheet" href="./css/public.css">
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_794914_jqnbohidczl.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="main">
|
|
<input class="search" type="text" placeholder="请输入关键词">
|
|
<div class="dropdown">
|
|
<div class="dropdown_arrow"></div>
|
|
<div class="dropdown_menu">
|
|
<div class="menu_header overflow-hidden">
|
|
<p class="left">热门搜索</p>
|
|
<p class="right">换一批</p>
|
|
</div>
|
|
<div class="menu_content overflow-hidden">
|
|
<ul>
|
|
<li><a href="">区块链</a></li>
|
|
<li><a href="">小程序</a></li>
|
|
<li><a href="">Vue</a></li>
|
|
<li><a href="">毕业</a></li>
|
|
<li><a href="">PHP</a></li>
|
|
<li><a href="">JAVA</a></li>
|
|
<li><a href="">Dart</a></li>
|
|
<li><a href="">Flutter</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |