前端基础学习-(2)京东搜索框
作为前端学习的小白,个人在学习过程中认知:京东搜索框使用到了浮动(float)、定位(position)、垂直水平居中、图标引用等知识。
实现效果
代码实现
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东搜索框</title>
<link rel="stylesheet" href="../CSS/fontawesome-free-5.12.1-web/css/all.min.css">
<link rel="stylesheet" href="../CSS/reset.css">
<link rel="stylesheet" href="../CSS/京东搜索框.css">
</head>
<body>
<div class="search_wrapper">
<div class="search">
<input class="search_input" type="text" placeholder="派克钢笔">
<a href="#"><i class="fas fa-camera"></i></a>
<span class="search_do">
<i class="fas fa-search"></i>
</span>
</div>
<div class="shopping">
<i class="fas fa-shopping-cart"></i>
<a href="#">我的购物车</a>
</div>
<ul class="key_word">
<li><a href="#" class="active">低至9.9</a></li>
<li><a href="#">寒假阅读</a></li>
<li><a href="#">家有宝贝</a></li>
<li><a href="#">洗发水</a></li>
<li><a href="#">国际好礼</a></li>
<li><a href="#">oled电视</a></li>
<li><a href="#">白酒</a></li>
<li><a href="#">居家年货</a></li>
</ul>
</div>
</body>
</html>
京东搜索框基本CSS样式
/* 整个搜索布局 */
.search_wrapper {
margin: 54px auto;
height: 34px;
line-height: 34px;
width: 750px;
}
/* 搜索框+搜索按钮定位 */
.search {
position: relative;
display: inline-block;
/* border: 2px solid #E2231A; */
}
/* 搜索框样式 */
.search_input {
width: 550px;
height: 32px;
line-height: 32px;
border: 2px solid #E2231A;
padding-left: 10px;
outline: none;
}
/* 搜索框中拍照样式 */
.search a {
position: absolute;
/* 垂直居中 */
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
font-size: 14px;
right: 80px;
}
/* 搜索框中拍照移入状态显示 */
.fa-camera:hover {
color: #E2231A;
}
/* 搜索按钮div样式 */
.search_do {
width: 60px;
height: 34px;
line-height: 34px;
background-color: #E2231A;
text-align: center;
position: absolute;
left: 505px;
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
}
/* 搜索按钮搜索图标样式 */
.search_do i {
font-size: 12px;
color: #ffffff;
}
/* 我的购物车样式 */
.shopping {
display: inline;
height: 34px;
line-height: 34px;
margin-left: 16px;
border: 1px solid #dad8d8;
padding: 6px 16px;
position: relative;
top: 2px;
}
/* 购物车中图标样式 */
.shopping i {
font-size: 12px;
color: #C81623;
margin-right: 8px;
}
/* 我的购物车文字样式 */
.shopping a {
text-decoration: none;
color: #C81623;
font-size: 12px;
}
/* 我的购物车文字移入状态显示 */
.shopping:hover {
border: 1px solid #C81623;
}
/* 设置搜索框下面的内容的样式 */
.key_word li {
float: left;
margin: 0 4px;
}
/* 设置搜索框下面的内容的文字样式 */
.key_word a{
text-decoration: none;
font-size: 12px;
color: #B5B5B5;
}
/* .key_word .active {
color: #E2231A;
} */
/* 设置第一个元素颜色 */
ul.key_word li:first-of-type a {
color: #E2231A;
}
/* 设置搜索框下面的内容移入时效果 */
.key_word a:hover {
color: #E2231A;
}