本期课程会用到更多的Web前端技术，在本节课你会了解和掌握！
display元素类型转换
vertical-align样式
css精灵图技术
padding的灵活运用、
行内块级(inline-block)元素产生的空隙消除技术
那么现在正式进入课程主题！
开发效果如下：
一、构建长方形盒子，然后水平居中1操作步骤1、构建一个名为tab的长方形
divclass="tab"/div
2、设置长方形的宽、高、背景颜色、四个角为圆角
styletype="text/css".tab{width:px;height:50px;background-color:#f7f7f7;border-radius:50px;}/style
3、去掉body默认的外边距margin
body{margin:0;}
4、设置tab长方形在水平方向居中，并与浏览器顶部50px间距
.tab{margin:50pxauto0px;}2实现代码
styletype="text/css"body{margin:0;}.tab{width:px;height:50px;background-color:#f7f7f7;border-radius:50px;margin:50pxauto0px;}/stylebodydivclass="tab"/div/body2实现效果二、添加span标签用来制作选项卡按扭1操作步骤
1、在tab中添加span标签
divclass="tab"span备孕期间/spanspan怀孕/spanspan0-1岁/spanspan1-2岁/spanspan2-3岁/span/div
2、设置选项卡按扭在中间显示
.tab{text-align:center;}
3、修饰span标签样式
.tabspan{border:1pxsolidred;display:inline-block;height:40px;font-size:14px;line-height:40px;padding:0px40px;}2实现代码
styletype="text/css"body{margin:0;}.tab{width:px;height:50px;background-color:#f7f7f7;border-radius:50px;margin:50pxauto0px;text-align:center;}.tabspan{border:1pxsolidred;display:inline-block;height:40px;font-size:14px;line-height:40px;padding:0px40px;}/stylebodydivclass="tab"span备孕期间/spanspan怀孕/spanspan0-1岁/spanspan1-2岁/spanspan2-3岁/span/div/body3实现效果三、精细调整按扭位置和修鉓tab按扭前的小图标1操作步骤
1、去掉span间的空隙
.tab{font-size:0px;}
2、去掉tab加的50px的高度，然后给它加上上下5px的间距
.tab{/*height:50px;*/padding:5px0px;}
3、span前添加i标签，用来制作按扭前小图标
divclass="tab"spani/i备孕期间/spanspani/i怀孕/spanspani/i0-1岁/spanspani/i1-2岁/spanspani/i2-3岁/span/div
4、给i添加宽度，高度和背景图
.tabspani{width:26px;height:26px;display:inline-block;border:1pxsolidblue;background:url("images/icon.png")no-repeat;}2实现代码
styletype="text/css"body{margin:0;}.tab{width:px;/*height:50px;*/background-color:#f7f7f7;border-radius:50px;margin:50pxauto0px;text-align:center;padding:5px0px;font-size:0px;}.tabspan{border:1pxsolidred;display:inline-block;height:40px;font-size:14px;line-height:40px;padding:0px40px;}.tabspani{width:26px;height:26px;display:inline-block;border:1pxsolidblue;background:url("images/icon.png")no-repeat;}/stylebodydivclass="tab"spani/i备孕期间/spanspani/i怀孕/spanspani/i0-1岁/spanspani/i1-2岁/spanspani/i2-3岁/span/div/body3实现效果四、控制按扭前小图标1操作步骤
1、单独设置每一个小图标
我们可以给每个i标签添加不同的样式名，然后单独控制背景其要显示的背景小图标
divclass="tab"spaniclass="icon1"/i备孕期间/spanspaniclass="icon2"/i怀孕/spanspaniclass="icon3"/i0-1岁/spanspaniclass="icon4"/i1-2岁/spanspaniclass="icon5"/i2-3岁/span/div
2、单独控制每个i中的背景图片样式
.tabspani.icon1{background-position:0px0px;}.tabspani.icon2{background-position:-26px0px;}.tabspani.icon3{background-position:-52px0px;}.tabspani.icon4{background-position:-78px0px;}.tabspani.icon5{background-position:-px0px;}
3、控制每个小图标在垂直方向上居中对齐
.tabspani{vertical-align:middle;}
4、设置小图标与左边文字间距
.tabspani{margin-right:8px;}2实现代码
styletype="text/css"body{margin:0;}.tab{width:px;/*height:50px;*/background-color:#f7f7f7;border-radius:50px;margin:50pxauto0px;text-align:center;padding:5px0px;font-size:0px;}.tabspan{border:1pxsolidred;display:inline-block;height:40px;font-size:14px;line-height:40px;padding:0px40px;}.tabspani{width:26px;height:26px;display:inline-block;border:1pxsolidblue;background:url("images/icon.png")no-repeat;vertical-align:middle;}.tabspani.icon1{background-position:0px0px;}.tabspani.icon2{background-position:-26px0px;}.tabspani.icon3{background-position:-52px0px;}.tabspani.icon4{background-position:-78px0px;}.tabspani.icon5{background-position:-px0px;}/stylebodydivclass="tab"spaniclass="icon1"/i备孕期间/spanspaniclass="icon2"/i怀孕/spanspaniclass="icon3"/i0-1岁/spanspaniclass="icon4"/i1-2岁/spanspaniclass="icon5"/i2-3岁/span/div/body3实现效果五、设置当前选中的效果1操作步骤
1、给当前选中的span标签添加类名current，然后单独控制样式显示
divclass="tab"spanclass="current"iclass="icon1"/i备孕期间/spanspaniclass="icon2"/i怀孕/spanspaniclass="icon3"/i0-1岁/spanspaniclass="icon4"/i1-2岁/spanspaniclass="icon5"/i2-3岁/span/div
2、给添加了current类名的span做修饰
.tabspan.current{color:#fff;background-color:#fe94a9;}.tabspan.currenti.icon1{background-position:0px-26px;}
3、给span标签添加圆角效果
.tabspan{border-radius:50px;}
4、去掉添加的辅助线
.tabspan{/*border:1pxsolidred;*/}.tabspani{/*border:1pxsolidblue;*/}2实现代码
styletype="text/css"body{margin:0;}.tab{width:px;/*height:50px;*/background-color:#f7f7f7;border-radius:50px;margin:50pxauto0px;text-align:center;padding:5px0px;font-size:0px;}.tabspan{/*border:1pxsolidred;*/display:inline-block;height:40px;font-size:14px;line-height:40px;padding:0px40px;border-radius:50px;}.tabspani{width:26px;height:26px;display:inline-block;/*border:1pxsolidblue;*/background:url("images/icon.png")no-repeat;vertical-align:middle;margin-right:8px;}.tabspani.icon1{background-position:0px0px;}.tabspani.icon2{background-position:-26px0px;}.tabspani.icon3{background-position:-52px0px;}.tabspani.icon4{background-position:-78px0px;}.tabspani.icon5{background-position:-px0px;}.tabspan.current{color:#fff;background-color:#fe94a9;}.tabspan.currenti.icon1{background-position:0px-26px;}.tabspan.currenti.icon2{background-position:-26px-26px;}/stylebodydivclass="tab"spanclass="current"iclass="icon1"/i备孕期间/spanspaniclass="icon2"/i怀孕/spanspaniclass="icon3"/i0-1岁/spanspaniclass="icon4"/i1-2岁/spanspaniclass="icon5"/i2-3岁/span/div/body3实现效果
如有相关前端方面的技术问题，欢迎加