前端实战应用CSS开发小米商城右侧悬浮菜

巧用CSS位和阿里图标开发小米商城右侧浮动栏，本期内容两个核心知识点：

position定位应用

iconfont阿里图标应用

1、设置body的背景颜色

body{background-color:#ddd;}

2、在页面构建一个名为sidebar的div盒子

divclass="sidebar"/div

3、给sidebar添加宽度，高度，背景样式

.sidebar{width:85px;height:px;background-color:#fff;}

4、设置以下样式，把sidebar固定定位到浏览器窗口右下侧

.sidebar{position:fixed;/*固定定位-相对浏览器的位置进行定位*/right:20px;bottom:px;}

5、给body添加px的高度，可以来演示，拖动浏览器的滚动条，sidebar的并没有被移走

body{height:px;}2代码

stylebody{background-color:#ddd;height:px;}.sidebar{width:85px;height:px;background-color:#fff;position:fixed;right:20px;bottom:px;}/stylebodydivclass="sidebar"/div/body3实现效果二、设置sidebar中的每一项的框架1操作步骤

1、在sidebar中添加ul无序列表标签

divclass="sidebar"ulli/lili/lili/lili/lili/lili/li/ul/div

2、给ul标签，添加边框线，作为辅助样式

.sidebarul{border:1pxsolidred;}.sidebarulli{border:1pxsolidblue;}

3、给每个li添加宽度和高度

.sidebarulli{width:85px;height:85px;}

4、取掉ul自带的默认样式

ul,li{margin:0;padding:0;list-style:none;}

5、去掉ul的辅助线，和sidebar最开始添加的固定高度

.sidebarul{/*border:1pxsolidred;*/}.sidebar{/*height:px;*/}2代码

stylebody{background-color:#ddd;height:px;}ul,li{margin:0;padding:0;list-style:none;}.sidebar{width:85px;/*height:px;*/background-color:#fff;position:fixed;right:20px;bottom:px;}.sidebarul{/*border:1pxsolidred;*/}.sidebarulli{border:1pxsolidblue;width:85px;height:85px;}/stylebodydivclass="sidebar"ulli/lili/lili/lili/lili/lili/li/ul/div/body3实现效果三、设置菜单每一项的样式1操作步骤

1、在每个li中添加span和p标签，用来制作每项的图标和文字

divclass="sidebar"ullispan/spanp手机APP/p/lilispan/spanp个人中心/p/lilispan/spanp售后服务/p/lilispan/spanp人工客服/p/lilispan购物车/spanp/p/lilispan/spanp回顶部/p/li/ul/div

2、给每个span添加如下样式

.sidebarullispan{display:block;border:1pxsolidred;height:50px;}

3、去阿里图标

转载请注明：http://www.aierlanlan.com/rzfs/28.html