css项目总结

项目图1-头部制作

1.网页头部导航栏效果实现

解决方案：分别使用左右浮动，利用大盒子的padding和line-height来修饰左右、上下间距

2.Tab切换页面布局效果

解决方案：主要完成基本结构后，头部标题使用列表UL制作，先写出默认样式，然后实现current(当前）效果并上hover的效果。

项目图2-蒙版效果

3.首页商品展示实现蒙版效果

解决方案：主要使用伪类，当鼠标hover上去的时候，给商品图片加一个可以点击跳转（a转行内块元素）的宽高（100%）一样的半透明（使用rgba设置半透明）的盒子，再通过绝对定位，使得蒙版脱离文本流显示在商品上层。

项目首页图-3-按钮立体效果

4.首页按钮的立体弹跳效果

解决方案：主要使得按钮（a转换的块级元素）绝对定位，脱离文本流（弹跳的时候影响其他的布局），然后当鼠标hover上去的时候，给按钮来一个位置的偏移量，以及用box-shadow来给盒子设置阴影，制造立体效果。

页脚-4-精灵图的使用

5.网页页脚的小图片

解决方案：使用精灵图背景图的方式，减少网页的请求，加快网页加载速度，减少向服务器的请求的次数

二级页面-5-面包屑导航

6.面包屑导航

解决方案：使用div里面包含a标签

选中的状态图 单选按钮美化-6

7.按钮美化

解决方案：使用label标签的for属性指定到id唯一的input，对input设置隐藏，再对label进行修饰，其中使用到了border-radius变成原形，再使用伪类加定位的方式加入（一个隐藏了两个边框的长方形的只有边框的盒子）一个勾。当选中之后，使用伪类:checked和邻居选择器（+）选中指定label标签进行样式修饰，改变颜色即可。

在线地图-7

8.在线地图

解决方案：使用js调用在线百度地图api接口