- 博客(10)
- 收藏
- 关注
RSS订阅原创 CSS之字体图标
1.字体图标的产生 字体图标使用场景：主要用于显示网页中使用，常用的一些小图标。 精灵图是由许多优点的，但是缺点明显。 1.图片文件还是比较大的。 2.图片本身放大缩小会失真。 3.一旦图片制作完毕要想更换非常复杂 此时，有一种技术的出现很好解决了哟上问题，就是字体图标iconfont。 字体图标展示的是图标，本质属于字体。 2.字体图标的优点 1.轻量级：一个图标新字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、
2022-04-23 16:01:13
1471
原创 CSS学习之精灵图
1.1为什么需要精灵图 有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。 1.2精灵图（sprites）的使用 使用精灵图核心： 1.精灵技术主要针对于背景图片使用，就是报多个小背景图片正和岛一张大图片中。 2.这个大图片也称sprites精灵图或雪碧图。 3.移动背景图片位置，此时可以使用background-position. 4.移动的距离就
2022-04-23 11:40:31
256
原创 CSS学习之定位
定位 1.1为什么需要定位 1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 2、当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 （以上用标准流和浮动比较难做，需要定位来实现） 所以： 1、浮动可以让多个块级盒子一行没有间隙排列显示，经常用于横向排列盒子。 2、定位则是可以让盒子自由的在某个盒子内移动位置，或者固定屏幕中某个位置，并且可压住其他盒子。 1.2定位的组成 定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 == 定位=定位模式+边偏移== 定位模式：用
2022-04-17 14:24:09
109
原创 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
182
原创 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
95
原创 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
254
原创 CSS之盒子模型
1.盒子模型 2.圆角边框 3.盒子阴影 4.文字阴影 1.1盒子模型 网页布局的本质：摆放盒子。 所谓盒子模型：就是把HTML页面中的布局元素看做一个矩形的盒子，也就是盛装内容的容器。 CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容 ...
2022-03-26 15:53:41
416
原创 CSS学习（2）
1.css的三大特性 2.css的注释 css的三大特性 css有三个非常重要特性：层叠性、继承性、优先级 1、层叠性 相同选择器给设置相同的样式，此时一个样式会覆盖（层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。 层叠性原则： 1）样式冲突，遵循就近原则，离哪个样式结构近，就执行哪个样式。 2）样式不冲突，不会层叠。 <style> div{ color:red ; } div{ col
2022-03-26 13:27:37
309
原创 CSS学习
目录： 1、Emmet语法 2、css复合选择器 3、元素的几种显示模式 4、元素显示模式的互相转换代码 5、背景图片的设置方式 Emmet语法 （一）语法 tab生成骨架 标签+tab=标签名 生成多个标签 *n n个标签 父子级标签 e.g ul>li 兄弟关系 + 5、类名或id的名字(.demo/ e.g. .nav #banner p.one span.gray ul>li#two 6、生成的div有顺序的，...
2022-03-20 17:56:01
451
原创 假期学习之初学html
HTML 标题 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML 段落 <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML 链接 <a href="http://..
2022-01-16 20:23:33
386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人