,
如果 拉长浏览器的宽度 , 搜索栏也会跟着拉长 ;
实现自动伸缩的效果 :
HTML 标签结构如下 :
最外层的父容器
父容器内部两个半圆形的子容器 ;
中间部分可自动伸缩的子容器盒子
半圆子容器...390 x 44 像素 , 该父容器的高度是 44 像素 ;
由于设备宽度不同 , 这里不设置宽度 , 让宽度自适应即可 ;
css 样式实例 :
.search-btn {
/* 左侧按钮布局...左 ( 顺时针方向 ) ;
css 样式实例 :
.search-btn::before {
/* 在 指定的标签元素内部的 前面 插入内容 */
/* 左侧按钮盒子中 插入 JD 图片...1 像素大小的 盒子实现 , 宽度 1 像素 , 高度 15 像素 , 背景为灰色 ;
可以通过 ::after 伪类插入上述盒子 , 使用绝对定位设置该盒子的位置 , 注意 子绝父相 , 子元素绝对定位...;
在 Fireworks 中测量该精灵图大小为 30 x 29 像素 , 其左上角坐标位置为 166, 0 位置 ;
精灵图的大小是 400 x 400 像素的 , 计算缩放时 , 需要计算缩放比例