使用css/css3优化网页

2023-02-07 分类：网站建设

一，为何要使用css/css3优化网页？一个网站制作流程是：业务-》设计-》前端-》后端；业务给需求、设计给设计稿、前端根据设计稿做出效果网页、后端制作程序、最后，通过一系列测试、调试；网站上线。
前端拿到设计稿时，需要划分哪些是图片、哪些是代码，进而制作出网页。前端在制作页面时，会根据各方面因素综合制造网页。1、一个好的用户体验网站不宜有过多的图片。网站图片过多主要有3点缺点：
1.1，占据服务器太多内存：
一个图片占据服务器虽然不多，但是，当多个图片时，图片就占据服务器的大量内存了。
1.2，对用户体验不好：
加载一个图片，需要向服务器递交一次请求，当用户网络不好时，可能导致图片加载不出来，所以,为了用户体验良好，也会建议一个网页少使用图片。
1.3，不利于seo优化；
因此，很多前端开发者在制作网页时，会使用css制作一系列小图标。2、一个好的用户体验网站能精简化代码，减少代码重复；在现在主流浏览器支持css3的情况下，程序员会更亲睐与使用css3制作一些特效，以此代替js代码。并不是说js代码比css差，两者起着不同功能，但是，在加载方面，css会先于js加载出来。
举个例子，比如你隐藏几个图片，如果使用css，对用户来说，在加载这个网页时，哪怕网络速度很慢，也感觉不出来。
但是，当你使用js时，对用户来说，是个很差的效果体验。哪怕在网络速度很快的情况下，用户也会在网页显示的一瞬间，出现那几个本来应该隐藏的图片。
所以，在某些时候，前端会更青睐与使用css来隐藏。
前端制作CSS代码

二，怎么使用css/css3来优化网页？1、减少图片使用，尽量使用代码来制作出图片。举个例子，使用css/css3制作小图标。
图1
CSS代码2

一般初学者，或者未接触css3的程序员，会认为图一只是一个简单的下右边框效果。但是，如果你加上一行代码后，则会发现可以少切出一个图片。
图2
代码：
.icon-right{
width: 20px;
height: 20px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(-45deg);
}

网页案例