毛主席说过:三日不学习,赶不上刘少奇。
近两月疯赶项目,做得快要吐了,今日才有空浏览一下他人网站,收益良多,解决了我一直以来以为颇为棘手的两大难题。
一、background-image实现border效果
为何要这么费事?不直接用border呢?这是因为手机首页经常用九宫格来排列图片菜单,一般都是用百分比来平均分配每个格子的大小,如果格子再多1px的border,就会非常尴尬不好处理。
background-image的特点是占据元素整个尺寸,包括内边距和边框。
示例:
- background-image: linear-gradient(to left, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
- -webkit-background-size: 1px 100%;
- background-size: 1px 100%;
- background-repeat: repeat-y !important;
也挺麻烦的,但也不失为解决问题的办法,列出以供扩展思路。
二、多图png如何实现background-size为原图一半
一般网站习惯将所有icon图标放到一张png格式的图里,一来是多icon的文件与单个icon的文件大小相差不大,可以更节省空间,另外就是便于加载。
但我之前在做手机网站的时候,因为图片的实际大小是放进去的图的两倍,这样可以实现高清效果,但是图片都放在一个文件的时候,用background-size总是不成功,只好分离成单独的文件来控制。现在参考别人的网站,发现别人实现了:
方法一:
整体:
.main-enter span, .knowlage i {
- background: url("http://img.to8to.com/wap/v2/m3icon.png") no-repeat;
- width: 50px;
- height: 51px;
- background-size: 50px; }
具体的图标只需设置background-position:
.main-enter span.icon-zxgl-enter {
background-position: 0 -58px;
}
方法二、
- background: url(http://img.to8to.com/wap/v2/icon-se174a62dfa.png?v=20150515) no-repeat;
- background-size: 187.5px 1087px;
直接对整张图进行压缩(图片原大小为375*2174)
具体该如何使用还需实际运用中试验。
另外还有以下一些值得学习的地方:
1.百度移动搜索协助适配PC与wap的标签:
<meta name="mobile-agent" content="format=html5;url=http://m.to8to.com/hz">
加上这一条,通过手机百度搜索时会自动导航到手机网站
2.主功能区用section标签
3.各部分代码块加上注释
4.canonical标签用来解决由于网址形式不同内容相同而造成的内容重复问题。
<link rel="canonical" href="http://hz.to8to.com/">
参考网站:土巴兔
http://hz.to8to.com/
http://m.to8to.com/hz