![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 69
zxf_CN
这个作者很懒,什么都没留下…
展开
-
可移动的侧边栏
还是老样子,学习 CodingStartup起码课的 实现可调侧栏 (点击传送门,可以观看 哔哩哔哩up 的视频),就来写文章了,虽然不是什么很好的文章,但我就是要写 ,哈哈哈。今天实现的效果是 可移动的侧栏,鼠标点击拖动,页面重新加载时,可以记录上一次调整的大小,让侧栏保持和上一次调整的大小一致 。以下是修改图:开始吧!关键代码:鼠标点击 mousedown;鼠标移动 mousemove;鼠标松开 mouseup;让页面元素,不能被鼠标选中的样式:user-select:none;转载 2021-05-14 09:11:29 · 639 阅读 · 0 评论 -
文字的背景划过效果
文章中的效果模仿的是 CodePen 网站中的效果: 传送门 。原理: 给 h1 的前面添加一个 伪元素,设置他的收缩比例为 0,收缩中心在 右下角 (right、 bottom; 在鼠标移上时,设置 收缩中心在 左下角 (left、 bottom ;并设置 伪元素 收缩比较为 1,还原为原来的样子; 这样,鼠标在移上时,伪元素 从左边进入,鼠标移出时,伪元素从 右边移出 。代码:<style> html { font-size:原创 2021-05-07 15:40:24 · 88 阅读 · 0 评论 -
翻转的卡片
前言:第二篇 CodingStartup起码课 的视频练习,这几天都在看他的视频,然后跟着做出效果来 。HTML+CSS 制作翻牌效果效果图:要点:使用 position 设置 2 个卡片重叠;正为 正面,反为 背面( transform: roateY(-180deg),待会旋转时,正 旋转 180,变为 背面, 反 旋转 0,回到 正面;设置 正 在上面(不是使用 z-index, 而是使用 backface-visibility: hidden 让处于背面的 div 隐藏 ;转载 2021-04-28 11:37:00 · 173 阅读 · 0 评论 -
塞雷的 汉堡按钮
引用:在哔哩哔哩有一个 up,他是 CodingStartup起码课,他是讲 粤语的哦;他的视频很多都是实现 页面 的一些功能,其中就包括这个 汉堡按钮,这是一个苹果官方网站的按钮 :苹果官方传送门 。这个是视频的地址,感兴趣的小伙伴,可以看看哦 使用 HTML+CSS 制作动态 Hamburger Menu ,不知道之前有没有小伙伴 分享了。下面的展示图 :现在...转载 2021-04-27 08:37:59 · 194 阅读 · 0 评论 -
清除浮动
提问:浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度。你可以按以下哪种方法处理浮动的影响呢?# 回答:### 1. 添加空标签法:在最后添加一个空标签元素,然后设置这个空标签的清除浮动属性为:清除2侧浮动;<style>.float { width: 500px; background-color: pink;}.one { width: 100px; height: 100px; .原创 2020-12-20 16:59:14 · 98 阅读 · 0 评论 -
重复题目 border: none 和 border: 0 的区别
border: none 和 border: 0 的区别边框的样式格式为:border-width: 边框的宽度;border-style: 边框的样式;border-color: 边框的颜色;差异: border: 0; 把 border 设置为 0 ,效果等于 border-width:0, 其他2个属性就采用了 默认值; border: none; 等效于 border-style:none; 当定义边框时,仅设置宽度不可以到达显示效果; 当设置 border:no原创 2020-12-20 14:52:10 · 77 阅读 · 0 评论 -
用 css 绘制三角形
我们可以用 css 的边框样式,来制作一个 三角形 出来:原理:通过设置一个 宽,高为零的块级元素,设置4条边为不同颜色,想要设置哪边就设置其他边为透明就可以了。顺序: 上,右,下,左 。设置:用 css 边框模拟;元素 宽高 设置为零;4个边都要写,在保留需要的边框颜色,其他的设置为透明的;为兼容 低版本浏览器,加上 font-size:0; line-height: 0;版本一:.xx { width: 0; height: 0; border-lef原创 2020-12-14 10:40:57 · 297 阅读 · 0 评论 -
可以使用 calc 画 1px 的线吗?
网上的 1px 都是使用 缩放,也就是 transform: scale(xx); 来得到 1xp 的线,是将 1px 的线进行缩放.a { width: 100px; height: 1px; background-color: #333;}<div class="a"></div>这条线,在 浏览器上不同的手机型号浏览,都会得到不同的 高度(就是大小),所以 1px 高的 线,可能会变成 2px,3px 等等,都有能。于是人们就想到了用 缩放 对吧.a {原创 2020-12-09 15:55:50 · 128 阅读 · 0 评论 -
2020-08-24
你拿到了一张设计稿是基于 苹果6 的,他为(750px),他里面有个 div 有一个边框,量取为 1px,但在 移动端 的情况下,苹果6 的渲染像素 是 375(pc 端的一半),那么我们实际的 div 的边框就是要 0.5px,不是 1px 变宽了,而是实际上只需要 0.5px 而已 。原创 2020-08-24 09:58:32 · 121 阅读 · 0 评论 -
设置背景图片大小,设置的背景图片就看不到了。
设置 backgrond-size 后,背景图片看不到了!记录:问:为什么?设置的背景图片后,想设置背景图的大小,突然背景图片就看不到了!答:可能是因为你写背景图片时,采用简写的形式,再来设置背景图的大小会看不到,所以只能使用 每项分开来写,写详情的形式 ,就可以看到了,但要重新设置背景图的位置,因为大小不一样了。代码:/* 一开始是写这样的 */background: url(../...原创 2020-04-12 10:55:43 · 476 阅读 · 0 评论