好姑凉横起走-CSDN博客

原创 CSS之字体图标

1.字体图标的产生字体图标使用场景：主要用于显示网页中使用，常用的一些小图标。精灵图是由许多优点的，但是缺点明显。 1.图片文件还是比较大的。 2.图片本身放大缩小会失真。 3.一旦图片制作完毕要想更换非常复杂此时，有一种技术的出现很好解决了哟上问题，就是字体图标iconfont。字体图标展示的是图标，本质属于字体。 2.字体图标的优点 1.轻量级：一个图标新字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、

2022-04-23 16:01:13 1504

原创 CSS学习之精灵图

1.1为什么需要精灵图有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。 1.2精灵图（sprites）的使用使用精灵图核心： 1.精灵技术主要针对于背景图片使用，就是报多个小背景图片正和岛一张大图片中。 2.这个大图片也称sprites精灵图或雪碧图。 3.移动背景图片位置，此时可以使用background-position. 4.移动的距离就

2022-04-23 11:40:31 271

原创 CSS学习之定位

定位 1.1为什么需要定位 1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 2、当我们滚动窗口的时候，盒子是固定屏幕某个位置的。（以上用标准流和浮动比较难做，需要定位来实现）所以： 1、浮动可以让多个块级盒子一行没有间隙排列显示，经常用于横向排列盒子。 2、定位则是可以让盒子自由的在某个盒子内移动位置，或者固定屏幕中某个位置，并且可压住其他盒子。 1.2定位的组成定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 == 定位=定位模式+边偏移== 定位模式：用

2022-04-17 14:24:09 137

原创 CSS之PS

4.1 常见的图片格式： 1、jpg图像格式：产品类图片经常使用 2、gift图像格式：实际经常用于一些图片小动画效果 3、png图像格式：想要切成背景透明的图片 4、PSD图像格式：对于前端人员来说最大的优点，可以直接从上面复制文字，获得图片，还可以测量大小和距离。 PS的切图方式：图层切图、切片切图、PS插件切图等。 4.2 图层切图最简单的切图方式：右击图层——快速导出为PNG 但很多情况下，需要合并图层再导出： 1、选中需要的图层，图层菜单——合并图层（ctrl+e） 2、右击——快速导出为PN

2022-04-09 12:05:44 210

原创 CSS之浮动

浮动（float） 1)传统网页布局的本质——用css来摆放盒子。把盒子摆放到相应位置，CSS提供了三种传统布局方式（简单说就是盒子如何进行排列顺序）：普通流（标准流）浮动定位标准流（普通流/文档流）所谓标准流：就是标签按照规定好默认方式排列 1.块级元素会独占一行，从上向下顺序排列。 ~常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。 ~常用元素：span、a、i、em等以

2022-04-03 14:41:49 128

原创 CSS学习（3）

1. 圆角边框 2.盒子阴影 3.文字阴影 tips:去掉li前面的项目符号（小圆点）语法：list-style：none；圆角边框（重点）在css3中，新增了圆角边框的样式,这样我们的盒子就可以变圆角了。 border-radius属性用于设置元素的外边框圆角。语法：border-radius:length radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 1）参数值可以为数值或百分比的形式 2）如果正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写50% 3

2022-04-03 12:45:12 293

m0_62774164的博客

原创 CSS之字体图标

原创 CSS学习之精灵图

原创 CSS学习之定位

原创 CSS之PS

原创 CSS之浮动

原创 CSS学习（3）

原创 CSS之盒子模型

原创 CSS学习（2）

原创 CSS学习

原创假期学习之初学html

空空如也

空空如也