上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】css
这是布局的具体状况 >>>html
左边一个劳拉网的logo图案
中间一个圆角边的div,div里面包裹了一个没有边线的input输入框和一个放大镜搜索按钮
右边一个圆角的购物车提交框按钮css3
接上一篇文章(电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】)的代码后面开始写web
这些标签的布局结构是根据我的对网页的分析得来的,为了减小文章内容过长形成阅读疲劳,我会把 分析过程注释在代码里面 >>>数据库
<!-- 主要内容 --> <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>
/* ---------------搜索框那一栏---------------------*/ /* 搜索框总体 */ .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代码有个细节之处,是关于雪碧图的 >>>svg
要从雪碧图从裁剪出所须要的图标,须要用到 background-position 属性进行定位
而后设置须要背景的.ZoomIcon类的标签具备必定的 宽和高 能容纳下所裁剪的图标
图标被裁剪后会根据宽高自动填充该 .ZommIcon类的标签
工具