css
Eyes front
还在摸索的前端狗子
展开
-
屏幕缩放,不改变样式
布局方式布局方式:1.百分比布局百分比布局能做到完整的适配,在当中应该少用margin和padding,不然会对后面的样式造成影响2.flex布局比较适用于手机端,在父元素上display:flex或者在行内元素上display:inline-flex设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效参考来源3.设置版心,为了适应不同屏幕下的视觉效果,需要版心作为约束版心的公共类的设定。列子:<div><div styl原创 2020-11-18 14:02:13 · 1579 阅读 · 0 评论 -
文本长短不一致,css让其左右两侧对齐
前言许多小伙伴在写css样式的时候经常会遇到这样的一个需求,让两行长短不一的文本对齐,让其更加美观。部分小伙伴想到的就是text-align:center;但是出来的效果却跟理想的有差距。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-08-13 14:08:09 · 16712 阅读 · 2 评论 -
纯css动画效果--animate的应用
前言需要某个小图标或者文字转圈的效果,部分伙伴会用js去写一个定时器,然后再去清空定时器,这样做是比较麻烦的。之前在学css里的有一个animate方法。下面就讲animate的使用:animate调用的属性值语法:animation: name duration timing-function delay iteration-count direction;1.animation-name 规定需要绑定到选择器的 keyframe 名称。2.animation-duration 规定完成动原创 2020-08-11 17:18:42 · 13335 阅读 · 2 评论