随笔分类 -  css相关

something about css
关于响应式布局小结
摘要：1.移动端独立浏览器内核： 微软：Trident 火狐： Gecko 开源内核： Webkit 【Android原生浏览器、Safari、Chrome、UC、QQ浏览器】 Opera: Presto 【Opera Mobile、OperaMini、Opera浏览器、Opera HD Beta版】 对 阅读全文
posted @ 2023-05-04 10:31 南韵 阅读(44) 评论(0) 推荐(0)
css水平垂直居中的方法
摘要：如果div给定了固定宽高: 1.绝对定位+margin .div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } 2.margin+calc .div { margin-left: auto; 阅读全文
posted @ 2022-02-23 18:09 南韵 阅读(65) 评论(0) 推荐(0)
上少下多的有序排列弹性布局
摘要：期望实现有序排列如下： 思路: 用到flex弹性布局（flex-direction:row-reverse; flex-wrap: wrap-reverse）+order属性（单个头像、序号、姓名在此看成一个元素模块先不管）， 1. 如果用flex-direction: row; flex-wrap 阅读全文
posted @ 2018-07-27 19:13 南韵 阅读(481) 评论(0) 推荐(0)
利用mask-image蒙层编写异形头像
摘要：需求：后台给了一个规规矩矩的头像，或圆或方，UI要求展示成水滴的形状。正在想到底如何实现的时候，不由自主去翻了鑫神的博客，正好找到了答案，窃喜（·_·) UI给的形状： 后台给的头像（忽略橙色背景色，我加的...） 最终需要的效果： PS：被覆盖图像的宽高与目标形状图越接近越好 废话不多说，贴代码： 阅读全文
posted @ 2018-07-27 18:25 南韵 阅读(552) 评论(0) 推荐(1)
图片展示方法总结
摘要：展示图片的方法一般有两种： 1.css 通过background属性加载图片（适用于本地图片）； .img { width: 100px; height: 100px; background: url('./test.png'); background-size: 100%; } html片段： < 阅读全文
posted @ 2018-02-26 19:27 南韵 阅读(1184) 评论(0) 推荐(0)
css实现三角形
摘要：思路：将宽高设置为0，通过border设置来实现 html片段： <div id="triangle"</div> css码： #triangle { width:0;height:0;border: 20px solid; border-color: transparent;border-bott 阅读全文
posted @ 2017-12-12 15:02 南韵 阅读(447) 评论(0) 推荐(0)
svg动画
摘要：将下面代码嵌入HTML中，直接运行即可。动画时长、小球半径，以及起始位置可自行更改。 <svg height="150" width="200" style="position:absolute;margin-top: 200px;"> <circle cx="29" cy="60" r="2" s 阅读全文
posted @ 2016-10-27 14:53 南韵 阅读(341) 评论(0) 推荐(0)
前端样式修改心得
摘要：今天对公司项目登录页进行了修改。 项目登录页构成：头部和底部为公共模板页，中间部分为登录页自身所有。 鉴于此，中间部分因不用担心改动影响到其它页面，故最好改，不必细谈。对于头部和底部，首先借助浏览器调试工具找到关键元素及其选择器，再在浏览器上进行修改与测试（对于div层数较复杂的，只能靠猜）。若所要 阅读全文
posted @ 2016-09-18 18:51 南韵 阅读(2283) 评论(0) 推荐(0)