上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录
【考拉海购网站】之【搜索框那一栏】
第一步,分析布局
这是布局的具体情况 >>>
左边一个劳拉网的logo图案
中间一个圆角边的div,div里面包裹了一个没有边线的input输入框和一个放大镜搜索按钮
右边一个圆角的购物车提交框按钮
接上一篇文章(电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】)的代码后面开始写
第二步,在html代码里面补全需要的标签
这些标签的布局结构是根据个人对网页的分析得来的,为了减少文章内容过长造成阅读疲劳,我会把 分析过程注释在代码里面 >>>
index.html文件代码
<!-- 主要内容 -->
<div class="container">
<!-- 搜索栏那一栏 -->
<div class="searchBar">
<a href=""><img src="./logo.png" alt=""></img></a>
<a href="" class="shopCar"><i class="shopIcon"></i> 购物车</a>
<div class="searchText">
<span class="zoomIcon"></span>
<input type="text" placeholder="数据库爆破工具">
<span class="searchButton"><i></i></span>
</div>
</div>
</div>
第三步,写CSS样式美化html
index.css文件代码
/* ---------------搜索框那一栏---------------------*/
/* 搜索框整体 */
.searchBar {
width: 1090px;
height: 100px;
margin: 0 auto;
margin-top: -12px;
}
/* 左边的logo图案,是一个超链接 */
.searchBar a {
display: block;
}
/* 设置左边logo图案 */
.searchBar a img {
float: left;
width: 210px;
height: 68px;
cursor: pointer;
margin-top: 20px;
z-index: 9;
}
/* 搜索输入框部分 */
.searchText {
float: right;
width: 510px;
height: 36px;
padding-left: 1px;
margin-top: 28px;
margin-right: 62px;
background-color: #ffffff;
border: 2px solid #ff2337;
border-radius: 40px;
}
/* 输入框样式设置 */
.searchText input[type="text"] {
display: block;
width: 80%;
margin-top: 9px;
margin-left: 36px;
border: 0px;
}
/* 输入框的提示字段字体样式,这里设置为italic,表示斜体 */
.searchText input[type="text"]::placeholder {
font-style: italic;
}
/* 当时点击输入框时,输入框默认的外边框会别隐藏 */
.searchText input[type="text"]:focus {
outline: none;
}
/* 购物车 */
.shopCar {
display: block;
float: right;
width: 106px;
height: 36px;
margin-top: 28px;
margin-right: 75px;
line-height: 36px;
border: 2px solid #ff1e32;
border-radius: 36px;
font-size: 0.8rem;
font-weight: 500;
text-align: center;
}
/* 当鼠标移动到购物车标签上时,购物车标签的字体颜色和底色的变化 */
.shopCar:hover {
color: #ff1e32;
background-color: #fff4f5;
}
/* 购物车icon图标 */
.shopIcon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 2px;
margin-bottom: -5px;
background: url(./购物车.png) no-repeat 0 0;
}
.searchText img {
transform: scale(0.5);
border: 1px solid;
margin-top: -4px;
background-color: rgb(214, 214, 214);
}
/* 设置输入框左边的那个小放大镜,这里有个细节 */
/* all_Icon.png实际是一个很大的雪碧图,我们这里使用css3的背景定位,设置要裁剪的区域为-466px,-677px这个位置 */
.searchText .zoomIcon {
position: absolute;
width: 14px;
height: 14px;
margin-left: 10px;
margin-top: 11px;
background-position: -466px -667px;
background-image: url('./all_Icon.png');
border: 1px;
}
/* 搜索按钮 */
.searchButton {
display: block;
float: right;
width: 56px;
height: 38px;
margin-right: -4px;
margin-top: -29px;
background-color: #ff2337;
border-radius: 30px;
cursor: pointer;
}
/* 搜索按钮的放大镜图标 */
.searchButton i {
display: block;
width: 56px;
height: 38px;
margin-right: -4px;
margin-top: 0px;
background-image: url('./放大镜大.png');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 30px;
}
/* 当鼠标移动到搜索按钮上时会发生的变化 */
.searchButton:hover {
background: linear-gradient(270deg, #f85a7d, #ff3234);
}
代码部署情况参考 >>>
上面的CSS代码有个细节之处,是关于雪碧图的 >>>
要从雪碧图从裁剪出所需要的图标,需要用到 background-position 属性进行定位
然后设置需要背景的.ZoomIcon类的标签具有一定的 宽和高 能容纳下所裁剪的图标
图标被裁剪后会根据宽高自动填充该 .ZommIcon类的标签