html5和css3的实用小技巧

在尝试转行虚拟经济的投资行业未果之后，决心重回实体经济做一些实实在在的工作，想到了5年前曾短期从事过的码农工作。并且比较幸运的进入了当地一个比较有名的网络公司，获得了一个从事网页前台的机会。时隔5年，互联网已经是手机移动端的天下，5年前还是新鲜事物的html5、css3早已被广泛运用到移动端网页开发上。我只有一边上w3cschool自学，一边参考同事已完成过的案例，吸取同事的长处、经验，不断实际练手中总结自己的经验。

html5其实并没比老的html改变多少，文档声明更简洁宽松，多了些有语义的标签而已。这是老html的文档声明

这是html5的文档声明

而html5多了些有语义的标签的使用，也可以让文档架构更清晰，据说也可以让浏览器更好的读取页面。

这是老式html的架构布局

这是html5式的架构布局

下面我们来看了，css3，在做移动端网页的时候，要考虑到小尺寸屏幕用户的体验，所以网页上的文字和图片，不管是在小手机还是大屏的某plus抑或是平板上，都要能随屏幕尺寸按比例缩放。所以在设尺寸的时候，都是尽量用百分比，少用写死的像素。比如

这里是一个带文字的图片列表，每一个<li>的宽度都是页面总宽度的width33.3%;然后每一个<li>里的<img>，又都是它的容器<li>d的宽度的95%，.cainixihuan li img{width:95%;}，高度是不用设的，图片会自动按比例缩放。这样无论用户的屏幕宽度尺寸是320还是360，图片都是漂漂亮亮的按比例排列显示。

还有一个经常用到的就是圆角边框，曾经像这样的圆角边框，是没法用代码实现的，只能用切图把圆角背景切下来做背景图。

可是那样一方面是拖慢加载速度，造成流量负担。一方面是要是移动端要按比例缩放，将非常麻烦，屏幕大了图片被放大浏览就不清楚了。5年前我学到的一个原则就是，能够用代码实现的，就尽量不要用切图。而现在css3的border-radius属性可以非常方便的，直接就实现那些圆角功能。若是要实现像上图一那种圆角矩形，只要再设个背景颜色就行了。而上例二中的肉类，蔬菜那种，也只要在设个border:1px solid #e6e6e6;就好了。