bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
历届学生/罗朝/项目练习/仿简书搜索条效果/css/clear.css Normal file
View File

@@ -0,0 +1,13 @@
/* 专门用来清除浏览器默认的css样式 */
body,p,ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}

61
历届学生/罗朝/项目练习/仿简书搜索条效果/css/index.css Normal file
View File

@@ -0,0 +1,61 @@
/* 页面主要的样式 */
.main {
margin: 40px 80px;
}
.search {
width: 180px;
height: 30px;
border-radius: 40px;
border: 1px solid #e1e1e1;
padding-left: 12px;
box-sizing: border-box;
background: url("../img/search_logo.png") #eee 96% no-repeat;
transition: all 0.4s ease;
}
.search:focus {
width: 220px;
/* background-position: 191px; */
}
.search:focus+.dropdown {
display: block;
}
.dropdown{
width: 240px;
height: 260px;
display: none;
}
.dropdown_arrow {
border-left: 10px solid #ff000000;
border-top: 10px solid #ffff0000;
border-bottom: 10px solid #eee;
border-right: 10px solid #80808000;
width: 0;
height: 0;
margin-left: 10px;
}
.dropdown_menu {
box-shadow: 1px 11px 28px #d2d2d2;
background: #eee;
padding: 8px;
}
.menu_content {
margin-top: 15px;
}
.menu_content ul li {
float: left;
padding: 2px 6px;
border: 1px solid #ddd;
border-radius: 12px;
margin-right: 10px;
margin-bottom: 10px;
}
.menu_content ul li a{
font-size: 12px;
color: #787878;
}
.menu_content ul li:hover {
background: rgb(245, 244, 244);
}

14
历届学生/罗朝/项目练习/仿简书搜索条效果/css/public.css Normal file
View File

@@ -0,0 +1,14 @@
/* 公共的css样式 */
input {
outline: none;
}
.left {
float: left;
}
.right {
float: right;
}
.overflow-hidden {
overflow: hidden;
}

BIN
历届学生/罗朝/项目练习/仿简书搜索条效果/img/search_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

43
历届学生/罗朝/项目练习/仿简书搜索条效果/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>