- 博客(10)
- 收藏
- 关注
原创 CSS之字体图标
1.字体图标的产生字体图标使用场景:主要用于显示网页中使用,常用的一些小图标。精灵图是由许多优点的,但是缺点明显。1.图片文件还是比较大的。2.图片本身放大缩小会失真。3.一旦图片制作完毕要想更换非常复杂此时,有一种技术的出现很好解决了哟上问题,就是字体图标iconfont。字体图标展示的是图标,本质属于字体。2.字体图标的优点1.轻量级:一个图标新字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求2.灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、
2022-04-23 16:01:13 1503
原创 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 208
原创 CSS之浮动
浮动(float)1)传统网页布局的本质——用css来摆放盒子。把盒子摆放到相应位置,CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序): 普通流(标准流) 浮动 定位标准流(普通流/文档流)所谓标准流:就是标签按照规定好默认方式排列1.块级元素会独占一行,从上向下顺序排列。~常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则会自动换行。~常用元素: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:lengthradius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果1)参数值可以为数值或百分比的形式2)如果正方形,想要设置为一个圆,把数值修改为高度或宽度的一半即可,或者直接写50%3
2022-04-03 12:45:12 293
原创 CSS之盒子模型
1.盒子模型2.圆角边框3.盒子阴影4.文字阴影1.1盒子模型网页布局的本质:摆放盒子。所谓盒子模型:就是把HTML页面中的布局元素看做一个矩形的盒子,也就是盛装内容的容器。CSS盒子模型本质是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容...
2022-03-26 15:53:41 482
原创 CSS学习(2)
1.css的三大特性2.css的注释css的三大特性css有三个非常重要特性:层叠性、继承性、优先级1、层叠性相同选择器给设置相同的样式,此时一个样式会覆盖(层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。层叠性原则:1)样式冲突,遵循就近原则,离哪个样式结构近,就执行哪个样式。2)样式不冲突,不会层叠。 <style> div{ color:red ; } div{ col
2022-03-26 13:27:37 327
原创 CSS学习
目录:1、Emmet语法2、css复合选择器3、元素的几种显示模式4、元素显示模式的互相转换代码 5、背景图片的设置方式Emmet语法(一)语法tab生成骨架 标签+tab=标签名 生成多个标签 *n n个标签 父子级标签 e.g ul>li 兄弟关系 +5、类名或id的名字(.demo/e.g. .nav#bannerp.onespan.grayul>li#two6、生成的div有顺序的,...
2022-03-20 17:56:01 483
原创 假期学习之初学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 413
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人