左边一个劳拉网的logo图案
中间一个圆角边的div,div里面包裹了一个没有边线的input输入框和一個放大镜搜索按钮
右边一个圆角的购物车提交框按钮
接上一篇文章的代码后面开始写
第二步在html代码里面补全需要的标签
这些标签的布局結构是根据个人对网页的分析得来的,为了减少文章内容过长造成阅读疲劳我会把 分析过程注释在代码里面 >>>
第三步,写CSS样式美化html
要从雪碧图从裁剪出所需要的图标需要用到 background-position 属性进行定位
然后设置需要背景的.ZoomIcon类的标签具有一定的 宽和高 能容纳下所裁剪的图标
图标被裁剪后會根据宽高自动填充该 .ZommIcon类的标签
发布了34 篇原创文章 · 获赞 42 · 访问量 1万+