1.网页头部导航栏效果实现
解决方案:分别使用左右浮动,利用大盒子的padding和line-height来修饰左右、上下间距
2.Tab切换页面布局效果
解决方案:主要完成基本结构后,头部标题使用列表UL制作,先写出默认样式,然后实现current(当前)效果并上hover的效果。
3.首页商品展示实现蒙版效果
解决方案:主要使用伪类,当鼠标hover上去的时候,给商品图片加一个可以点击跳转(a转行内块元素)的宽高(100%)一样的半透明(使用rgba设置半透明)的盒子,再通过绝对定位,使得蒙版脱离文本流显示在商品上层。
4.首页按钮的立体弹跳效果
解决方案:主要使得按钮(a转换的块级元素)绝对定位,脱离文本流(弹跳的时候影响其他的布局),然后当鼠标hover上去的时候,给按钮来一个位置的偏移量,以及用box-shadow来给盒子设置阴影,制造立体效果。
5.网页页脚的小图片
解决方案:使用精灵图背景图的方式,减少网页的请求,加快网页加载速度,减少向服务器的请求的次数
6.面包屑导航
解决方案:使用div里面包含a标签
7.按钮美化
解决方案:使用label标签的for属性指定到id唯一的input,对input设置隐藏,再对label进行修饰,其中使用到了border-radius变成原形,再使用伪类加定位的方式加入(一个隐藏了两个边框的长方形的只有边框的盒子)一个勾。当选中之后,使用伪类:checked和邻居选择器(+)选中指定label标签进行样式修饰,改变颜色即可。
8.在线地图
解决方案:使用js调用在线百度地图api接口