CSS知识点
文章平均质量分 64
看pink老师学前端CSS部分
不爱吃菜的蔡菜
这个作者很懒,什么都没留下…
展开
-
HTML+CSS PC端品优购项目
记得引入CSS初始化文件模块化:将一个项目按照功能划分,一个功能一个模块,互不影响可以将相同的样式放在一起,common.css 写好一个样式,其余页面用到这些相同的元素模块化开发具有重复使用,修改方便等优点。记得在html中引入css文件网站 favicon图标favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。1.制作favicon图标把图片切成png图片把png图片转换为ico图标2.favicon原创 2022-04-08 14:05:42 · 255 阅读 · 0 评论 -
HTML+CSS 淘宝焦点布局
pink老师 html+css 淘宝轮播图原创 2022-03-29 17:46:43 · 151 阅读 · 0 评论 -
CSS3|两面翻转的盒子案例
要实现 鼠标经过就会盒子翻转要有一个大盒子,大盒子里面装着两个小盒子 两个小盒子要加定位,其中前面的盒子加上z-index:1;这样就会覆盖后面的盒子 然后让后面的小盒子y轴旋转180deg,这样当让大盒子旋转180deg的时候后面的小盒子可以出现 当让大盒子旋转的时候,小盒子也要保持3d效果,给小盒子的父亲加上transform-style:preserve-3d; 如果想让盒子翻转效果更明显,给body加上透视(要在谷歌浏览器打开)<!DOCTYPE html>&原创 2022-04-10 17:20:46 · 1200 阅读 · 7 评论 -
CSS|奔跑的熊大 案例(有图+代码)
让白色的熊大跑到屏幕中间熊:山:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-..原创 2022-04-09 16:54:55 · 832 阅读 · 0 评论 -
HTML+CSS 土豆网鼠标经过显示遮罩
!!!当鼠标经过时,让里面的遮罩层显示出来:.tudou:hover .mask { display:block;}//当经过tudou时,显示mask里面被隐藏的东西<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed...原创 2022-03-29 19:59:26 · 396 阅读 · 0 评论 -
CSS3 | 3D导航栏
要做一个 鼠标经过可以上下翻转的导航栏ul里面有着li 给宽度和高度,设置背景颜色等 当底部翻转90deg的时候它在前面的中间部位,所以要向下走半个高度translateY 为了大盒子旋转的时候不跑偏 旋转中心点不变 让前面的盒子沿着z轴走半个高度 必须先移动 后旋转 要让父盒子里面的小盒子保持3d效果,给li加transform-style:preserve-3d;<!DOCTYPE html><html lang="en"><...原创 2022-04-10 18:28:01 · 238 阅读 · 0 评论 -
CSS3|大数据热点图案例(带图+代码)
原图:.....这图为透明,是pink老师的原图设置小点dotted,用定位 波纹用pulse,颜色用阴影shadow表示 设置动画 opacity 是透明度的意思 opacity:1;完全不透明 opacity:0;完全透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-...原创 2022-04-09 15:15:48 · 1418 阅读 · 3 评论 -
CSS | 旋转木马案例
做一个 鼠标放上去就停止的旋转木马案例section里面有六个小盒子,每个盒子旋转60° 正前面第一个盒子沿着z轴正方向走200px 第二个先y轴旋转60°,然后再沿着z轴走200px(先旋转后方向轴改变) 后面的盒子旋转度数依次递增60° 给body加上透视(用谷歌浏览器打开),给section加上transform-style-preserve-3d;使子盒子保持3d效果 给section加上y轴旋转,做上动画效果<!DOCTYPE html><html.原创 2022-04-10 21:58:46 · 275 阅读 · 0 评论 -
CSS3 | 3D转换
三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴:水平向右 注意: x 右边是正值,左边是负值 y轴:垂直向下 注意: y 下面是正值,上面是负值 z轴:垂直屏幕 注意: 往外面是正值,往里面是负值3D移动 translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。translform:translateX(100px):仅仅是在x轴上移动 translform:translateY(100px):仅仅是在Y轴.原创 2022-04-10 22:02:13 · 299 阅读 · 0 评论 -
CSS3 | 动画的基本使用+动画常用属性+动画简写属性+速度曲线细节
动画动画的基本使用制作动画分为两步:先定义动画 再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)0%是动画的开始,100%是动画的完成。这样的规则就是动画序列 在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 请用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100% 百分比就是划分的时间2.使用动画 /* 1.定义动画 */ @keyframes m原创 2022-04-09 17:27:10 · 1429 阅读 · 0 评论 -
CSS | 2D转换
目录2D转换二维坐标系2D转换之移动 translate让盒子实现水平居中和垂直居中2D转换之旋转rotate旋转案例-小三角设置转换中心点transform-origin旋转中心点案例2D转换之缩放scale图片放大案例分页按钮案例2D转换综合写法2D转换转换(transform) 是CSS3中具有颠覆性的特征之一,可以实现元素的位移,选择,缩放等效果移动:translate 旋转:rotate 缩放:scale二维坐标系2原创 2022-04-08 20:23:14 · 186 阅读 · 0 评论 -
HTML5 和 CSS3 提高
HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持HTML5新增的语义化标签不用在设置 <div class="header"></div> 了<header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区域,大号的div <aside&g原创 2022-04-03 20:31:38 · 325 阅读 · 0 评论 -
CSS高级技巧 | 对CSS进行初始化+CSS用户界面样式+vertical-align属性应用+常见布局技巧
CSS用户界面样式更改鼠标样式cursor选择器 { cursor:pointer;}表单轮廓线outline给表单添加outline:0;或者outline:none; 可以去掉默认的边框 <style> input { outline: none; } </style>防止拖拽文本域resize可拖拽变大,导致布局变乱,为了防止拖拽...原创 2022-04-01 21:23:18 · 394 阅读 · 0 评论 -
CSS高级技巧-精灵图+字体图标+CSS三角
目录精灵图精灵图的使用精灵图案例-拼出自己名字字体图标icon font字体图标的优点下载字体图标的网站CSS三角案例应用-京东小三角精灵图精灵图:把一些小图片放在一张大图片上,服务器只需要请求一次就可以了使用CSS精灵技术的目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度精灵图缺点:图片文件本身较大 图片本身放大和缩小会失真 一旦图片制作完毕想要更换非常复杂精灵图的使用使用精灵图核心:精灵技术主要针对于背景图.原创 2022-03-30 15:47:22 · 241 阅读 · 0 评论 -
CSS属性的书写顺序+页面布局整体思路+导航栏注意点
CSS书写顺序布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写,毕竟关系到模式) 自身属性:width / height / margin / padding / border / background 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word原创 2022-03-27 16:52:11 · 90 阅读 · 0 评论 -
CSS定位 + 元素的显示与隐藏
1.定位1.1 为什么需要定位定位可以让盒子自由的在某个盒子内移动位置 或者 固定屏幕中的某个位置,并且可以压住其他盒子1.2 定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位 =定位模式 + 边偏移定位模式:用于指定一个元素在文档中的定位方式边偏移:决定了该元素的最终位置1.2.1 定位模式定位模式决定元素的定位方式,通过CSS的position属性来设置,值可以分为四个:static ...原创 2022-03-29 16:27:04 · 531 阅读 · 0 评论 -
CSS浮动+常见网页布局+清除浮动+PS切图
1. 浮动1.1传统网页布局的三种方式网页布局的本质---用CSS来摆放盒子,把盒子摆放到相应位置。CSS提供了三种传统布局方式:普通流(标准流 ) 浮动 定位 1.2 标准流(普通流/文档流)就是标签按照规定好默认方式排列 块级元素会独占一行,从上向下顺序排列 div p h1~h6 ul ol 行内元素会按照顺序从左到右顺序排列,碰到父元素边缘会自动换行 span a em标准流是最基本的布局方式实际开发...原创 2022-03-26 15:56:20 · 220 阅读 · 0 评论 -
去掉无序列表 l i 前面的小圆点:
去掉无序列表 l i 前面的小圆点:list-style: none;原创 2022-03-22 16:00:42 · 4039 阅读 · 1 评论 -
CSS盒子模型
盒子模型1.1 看透网页布局的本质网页布局过程:先准备好相关的网页元素,网页元素基本都是盒子Box 利用CSS设置好盒子样式,然后摆放到相应位置 往盒子里面装内容1.2 盒子模型(box model)组成把HTML页面中的布局元素看作是一个矩形的盒子包括:边框(border),外边距(margin),内边距(padding),实际内容(content)1.3 边框borderborder可以设置元素的边框。由三部分组成:边框宽度(粗细),边框样式(实心),边框颜色b原创 2022-03-22 13:06:45 · 419 阅读 · 0 评论 -
CSS的三大特性
CSS的三大特性1.1层叠性相同选择器给设置相同的样式,此时样式就会 覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则: 样式冲突,遵循的是 就近原则 ,哪个样式离结构近,就执行那个样式 样式不冲突,不会层叠 1.2.继承性CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。恰当的使用继承可以简化代码,降低CSS样式的复杂性 子元素可以继承父元素的样式(text-,fon...原创 2022-03-19 14:40:57 · 85 阅读 · 0 评论 -
圆角边框+盒子阴影+文字阴影
1. 圆角边框border-radius:length;用于设置元素的外边框圆角length越大, 半径越大,半径的圆越大,弧线越强烈。参数值可以为数值或者百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或宽度的一半即可,或者直接写为50% .yuanxing { width: 200px; height: 200px; background-color: palevioletred;原创 2022-03-24 17:07:37 · 142 阅读 · 0 评论 -
快速生成语法+复合选择器+元素显示模式(块元素...)+CSS背景设置
目录Emmet语法1.快速生成HTML结构语法2.快速生成CSS样式语法3.快速格式化代码CSS的复合选择器1.后代选择器(重要)2.子选择器3.并集选择器(重要)4.伪类选择器 4.1链接伪类选择器4.2:focus伪类选择器CSS的元素显示模式1.块元素2.行内元素3.行内块元素4.元素显示模式转换单行文字垂直居中的小技巧CSS背景1.背景颜色2.背景图片3.背景平铺4.背景图片位...原创 2022-03-17 18:36:55 · 374 阅读 · 0 评论 -
CSS简介/语法规范+选择器+字体属性+文本属性
目录CSS简介CSS语法规范CSS简介CSS也是一种标记语言,美化HTML,布局网页CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等),图片的外形以及版面的布局和外观显示样式结构(HTML)与样式(CSS)相分离CSS语法规范CSS规则由两个主要的部分构成:选择器 以及 一条或多条声明h1{color:red; font-size:25px} h1 是选择器 color 是属性 red是值在 <head>里面添加<.原创 2022-03-13 23:58:04 · 384 阅读 · 0 评论