浏览器向服务器发送请求
当我们在电脑上打开网页或者点开链接时，就像是对一个远程厨房说“我要吃饭”。浏览器会向服务器发出请求，说清楚自己想吃什么，比如HTML文档啦、css样式表啊、Javascript脚本之类的。然后服务器收到请求后，就像高级大厨一样，根据你想要的东西来煮菜给你，最后把资料传回你的电脑上。整个过程，都依靠着HTTP协议这座桥梁来相互沟通！
精灵图的使用
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/index.png) no-repeat -182px 0;
}
.box2 {
width: 27px;
height: 25px;
margin: 200px;
background: url(images/index.png) no-repeat -155px -106px;
}
网站加载时，如果有很多小图片做装饰，那浏览器经常要麻烦服务器发请求传输这些小图片，这就给服务器添堵。于是乎，有人想出一妙招——CSS精灵技术。你可以把许多小图片整合成一张大图，这样加载时就只有一个请求就能搞定所有图片了，效率大大提升！
利用精灵图拼出自己的名字
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.c {
width: 109px;
height: 110px;
background-position: -237px -8px;
}
.z {
width: 113px;
height: 112px;
background-position: -479px -557px;
}
.r {
width: 110px;
height: 109px;
background-position: -139px -415px;
}
字体图标的应用场景
除了背景图片,网页里经常会用像打字机似的字体图标来表示一些常见的东西。这叫字体图标，它实际上就是字体文件。用这个方法，前端工程师就能把各种各样的图标弄进网页了，比单独去管每个图标资源省事多了。
字体图标，都藏在字库里头儿，像icomoon字库这种，你把它加进去就能用了。直接导入字体文件，再告诉CSS里哪个是要用的就行。要是想换个新的icon，就重新上传来选新的，然后把旧的替换掉。
CSS三角绘制及界面样式优化
说起设计网页的界面样式，主要就是让大家用得更舒服！特别要说的就是，用CSS画出三角形其实不难？有时候根本不用图片或者图标！
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?q42srk');
src: url('fonts/icomoon.eot?q42srk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?q42srk') format('truetype'),
url('fonts/icomoon.woff?q42srk') format('woff'),
url('fonts/icomoon.svg?q42srk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
优化页面还挺麻烦，得处理很多小细节。比如说，你可以设定鼠标样式，把那烦人的蓝色方框去掉，还能不让文本框被乱拖乱动，这样用起来就舒服多了。而对于那些讨厌的默认白边图片底、会弹出来的省略号和文本溢出这些问题，也别忘了去注意它们的兼容性和具体使用环境！
CSS初始化与京东商城案例
字体图标的使用
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?q42srk');
src: url('fonts/icomoon.eot?q42srk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?q42srk') format('truetype'),
url('fonts/icomoon.woff?q42srk') format('woff'),
url('fonts/icomoon.svg?q42srk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
/* 指定字体，和字体声明中一致 */
font-family: 'icomoon';
font-size: 100px;
color: cyan;
}
为了让网页在各种浏览器上看起来差不多，做网站的时候我们得先做个CSS初始化。这个步骤就是说把浏览器的默认样式给重调一下，这样各种浏览器看起来就都一样了。比如说那个京东商场，你要是去看看他们的源码就能看到这部分的CSS初始化代码。
做 CSS 初始化的时候，得留心中文字体名字别出乱子，还有防止浏览器看不懂我们的CSS。用 Unicode 编码代替文字名就能让页面更美更稳定！
总结与展望
CSS三角制作
.box1 {
width: 0;
height: 0;
border: 10px solid;
border-top-color: cyan;
border-right-color: red;
border-bottom-color: green;
border-left-color: blue;
}
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
/* 要显示的一边改变颜色，其他边透明 */
border-bottom-color: cyan;
}
了解了浏览器向服务器发请求，还有那个CSS精灵技术只要用得好，网页就能更快速地上线。然后就是字体图标这个东西，的确很实用。接着说说CSS三角绘制，听起来很高大上！最后再看看界面样式如何优化，这样会让网站看起来更舒服。一开始设置好的CSS参数也相当重要哟。这样子，我们就对前端开发中的一些核心技巧有更深的认识了，而这些都是为了提高网页浏览速度、增加用户体验和让网页设计变得更加个性化。
网络科技越来越进步了，前端开发说白了就是要跟上时代步伐！不把最新技能学到手怎么在这一行混？怎么提高自己竞争优势？总之，时刻保持学习，紧跟着前端技术变化才有出路呀~
CSS三角应用
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 兼容低版本浏览器 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
是不是有时候也会遇到跟我们差不多的情况？对于前端开发这部分，你有什么独到的见解或者期待吗？赶快告诉我！
li { cursor: pointer; }
。
评论0