写前端样式遇到的一些问题

问题一

我们在写首页的时候，顶部的 如手机app、手机商城、手机微金所这类的 超链接，在hover后会显示出对应的二维码。但是我们鼠标从超链接移出，二维码就消失了。为了解决这个问题，我们可以把二维码进行绝对定位absolute，这样在对超链接hover的时候，微小的移动就不会让二维码立刻消失。
绝对定位的时候把二维码的top设置的离超链接近一点就可以。详细信息见案例-微金所

问题二

同样的 会出现很多 超链接，但是超链接之间有分割线 就是 如导航栏 上各个栏目之间的小竖线。 可以通过 + 下一个兄弟选择器来选择 除第一个以外的所有兄弟，再border-left设置即可。

问题三

一个div里面放一个img,如果div的高度不够高,设置了img的宽和高之后，div可能包裹不住img，因为img是一个行内元素，div的line-height属性会挤压img。导致img掉出div盒子。解决方案：方法（1）img里面display:block;一下改变img的呈现方式。方法（2）把div里面的line-height:0;

问题四

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

关于rem的使用，这里具体的方法我就不细说了，主要介绍一下做项目的时候应该怎么上手。
1.载入flexible.js，精确的控制html的font-size，这个是淘宝的库，就是为了适配不同设备的宽度。直接用！相当于引入了这个库之后，你的页面的font-size会自动调节。例如：视觉设计稿是750px的，flexible.js就会把根元素的font-size自动设置为75px,即1rem。

你所要做的就是把视觉设计图上的尺寸变为rem，然后在你的程序里用转换后的rem值即可。

2.同样移动端也可以加入版心的概念，只不过单位是rem。例如我做的“618活动”里面移动端给我的视觉设计稿是640px的，我就可以用640作为版心，转化为10rem。
即：
.inner_c {
width: 10rem;
margin: 0 auto;
}

问题五

最近老遇到的img显示问题，凡是遇到img，就给父元素display=block;同时设置宽高。让img的width和height都100%

问题六

• 
  
• 关于图片img和background-image的比较。
  

前景图img是数据性的东西，属于页面要展现的内容。
背景图是修饰性的东西，不要也罢。

• 最近在写移动端页面适配的时候，经常会遇到这个问题。当我把图片当作背景用的时候即
  backround-image：url(“../images/topbar.jpg”) no-repeat center;
  -这样产生的结果是：图片能正确适配居中，但是在小尺寸的屏幕上图片是居中显示，而不是缩小适配显示，所以不能这样写。这个时候需要把图片作为页面内容，用img来写，这样才能正确缩小或放大适配盒子。