web
文章平均质量分 81
鷇韩
网络工程(云计算),向全栈进发,尝试记录学习过程
展开
-
CSS平面转换实现-时钟案例
* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 *//* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 *//* 一圈是360度, 等分成 xx 份 *//* 第一根和第四跟宽度大一些 *//* 盒子底部在盒子中间 *//* 1.定位 *//* 遮罩圆形 */原创 2024-08-04 15:18:11 · 588 阅读 · 0 评论 -
CSS平面转换改变旋转原点
rotate.png(这里因为图片问题,试了一下transform-origin放在img与img:hover效果不一样。transform-origin: 水平原点位置 垂直原点位置;默认情况下,转换原点是。原创 2024-08-04 15:12:16 · 214 阅读 · 0 评论 -
CSS平面转换-旋转
transform: rotate(旋转角度);原创 2024-08-03 00:35:31 · 660 阅读 · 0 评论 -
CSS平移实现双开门效果
一张作为父级背景,两张为兄弟左右布局。之后添加鼠标悬停效果,两张子图分别从左右平移。一共要三张图片,一张作为父级背景,两张为兄弟左右布局。/* right表示精灵图从右面取 */原创 2024-08-03 00:35:09 · 807 阅读 · 0 评论 -
CSS平移实现居中效果
替换为transform: translate(-50%,-50%);以下代码,平移之后减去盒子自身尺寸。无需计算,向左向上移动盒子的一半。原创 2024-08-01 22:37:58 · 209 阅读 · 0 评论 -
CSS平面转换-平移
平面转换-平移属性 transform: translate(X轴移动距离, Y轴移动距离);取值像素单位取值百分比(参照盒子自身尺寸计算结果)正负均可技巧translate()只写一个值表示只沿着X轴移动单独设置X或Y轴距离:translateX()或translateY()原创 2024-08-01 22:25:03 · 449 阅读 · 0 评论 -
CSS界面案例
版心样式网页制作思路hander区域布局Logo制作技巧导航制作技巧搜索区域用户区域banner区域布局左侧导航栏右侧课程表精品推荐精品课程案例baseindex代码原创 2024-03-14 23:08:03 · 425 阅读 · 1 评论 -
CSS定位
相对定位绝对定位定位居中固定定位堆叠层级定位总结CSS精灵字体图标字体图标-下载字体字体图标-使用字体字体图标-上回矢量图垂直对齐方式过渡transition透明度opacity光标类型案例CSS精灵案例-轮播图原创 2024-03-14 22:50:22 · 901 阅读 · 1 评论 -
CSS网页案例-黑马
SEO三大标签Favicon图标版心快捷导航案例basecommonindex代码原创 2024-03-14 23:08:34 · 375 阅读 · 0 评论 -
CSS选择器与盒子模型
结构伪类选择器公式伪元素选择器PxCook盒子模型-组成盒子模型-边框线盒子模型-单方向边框线盒子模型-内边距盒子模型-尺寸计算盒子模型-外边距版心居中清除默认样式盒子模型-元素溢出外边距问题-合并现象外边距问题-塌陷问题行内元素-内外边距问题盒子模型-圆角盒子模型-圆角常见应用盒子模型-阴影案例产品卡片案例-新闻列表CSS书写顺序原创 2024-03-14 22:24:09 · 946 阅读 · 1 评论 -
CSS-浮动与Flex
浮动-基本使用浮动-产品区域布局浮动-清除浮动浮动-额外标签法清除浮动-单伪元素法清除浮动-双伪元素法浮动-总结Flex-认识Flex-组成Flex-主轴对齐Flex-侧轴对齐Flex-修改主轴方向Flex-弹性伸缩比Flex-弹性盒子换行Flex-行对齐方式案例-抖音解决方案原创 2024-03-14 23:10:10 · 424 阅读 · 0 评论 -
CSS选择器 三大特性 背景
子代选择器并集选择器交集选择器伪类选择器伪类超链接CSS特性CSS继承性CSS层叠性CSS优先级优先级权重叠加emmet写法背景图背景图平铺方式背景图位置背景图缩放背景图固定背景图符合属性显示模式显示模式转换热词banner效果原创 2024-03-14 22:23:48 · 904 阅读 · 1 评论 -
HTML知识点
html基本语法,由于记录时方便锻炼,使用HTML书写笔记原创 2024-03-14 21:43:23 · 501 阅读 · 1 评论 -
CSS字体编辑
CSS引入方式标签选择器类选择器id选择器通配符选择器画盒子文字大小属性控制字体粗细控制字体倾斜行高行高-垂直居中文字字体文字复合属性文本缩进文本对齐图片对齐文本修饰线文字颜色调试工具原创 2024-03-14 22:23:28 · 436 阅读 · 1 评论