随笔分类 -  CSS

CSS选择器
摘要：CSS选择器，发现很多都忘记了。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。 CSS选择器笔记 阮一峰 整理 参考网址：456 Berea Street 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签 阅读全文
posted @ 2023-07-03 17:25 笠航 阅读(51) 评论(0) 推荐(0)
AJAX调用完成后的消息提示框
摘要：之前因为写一些验证，会在调用成功或者失败后用到一些消息提示框，但找了很多了没找到比较合适的，对于一些框架中的组件感觉用着也不是很方便，于是自己用js写了一个简单的提示框，代码如下： var appendHTML=function(el, html){ var divTemp = document.c 阅读全文
posted @ 2019-12-30 00:48 笠航 阅读(1599) 评论(0) 推荐(0)
CSS 伪类选择器
摘要：对css的伪类选择器真的是又爱又恨，每次都很完美的被搞混了，还是得做一下总结。 1. :nth-of-type(n) 选择第n个元素 2. :last-of-type 选择最后一个元素 3. :first-of-type 选择第一个元素 4. :nth-child(n) 选择父元素的第n个子元素 5 阅读全文
posted @ 2019-07-29 23:51 笠航 阅读(318) 评论(0) 推荐(0)
CSS中一个冒号和两个冒号有什么区别
摘要：一个冒号是伪类，两个冒号是伪元素 伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。 伪类有：:firs 阅读全文
posted @ 2019-04-05 00:12 笠航 阅读(954) 评论(0) 推荐(0)
CSS画图
摘要：原理是利用边框实现，好处是不用加载图片，节省流量；坏处就是会有很长一段css样式 基本：1.设置width,height为0 ，然后设置一个border-width 利用border可以画很多有趣的图 1.正方形 ? 1 2 3 4 5 6 7 #square{ width:0px; height: 阅读全文
posted @ 2019-01-06 00:21 笠航 阅读(431) 评论(0) 推荐(0)
你知道CSS实现水平垂直居中的第10种方式吗？
摘要：你知道CSS实现水平垂直居中的第10种方式吗？ 仅居中元素定宽高适用： absolute + 负 margin absolute + margin auto absolute + calc absolute + 负 margin absolute + margin auto absolute + c 阅读全文
posted @ 2018-12-28 22:06 笠航 阅读(193) 评论(0) 推荐(0)
CSS水平垂直居中
摘要：水平居中有margin: 0 auto，但是开发中经常要用到垂直居中，现在来看下平时常用的方法有哪些 一、position + margin 方法 （也是最常见的，包括相对定位或绝对定位） 二、position + transform 方法（CSS3） 方法一有个很明显的不足，就是需要提前知道元素的 阅读全文
posted @ 2018-12-26 17:41 笠航 阅读(148) 评论(0) 推荐(0)
前端布局神器display:flex
摘要：2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持 一、Flex布局是什么？ Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定 阅读全文
posted @ 2018-11-15 06:39 笠航 阅读(375) 评论(0) 推荐(0)
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
摘要：1. DIV + CSS 练习：太极阴阳图。 基本思路：由三个div块元素组成； #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 （太极阴阳图：上为阳下为阴或左为阳又为阴） 2. 太极阴阳图底图#taiji： 巧用边框：宽度0高度300px，左右边框150分别1 阅读全文
posted @ 2018-09-25 21:25 笠航 阅读(762) 评论(0) 推荐(0)
【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
摘要：使用CSS3纯代码来实现模拟时钟，及指针动画功能。 在这里主要使用到css3一些基本元素： border-radius：圆角边框，画圆形；表盘 Transform：变换，旋转，扭曲；刻度盘，指针形状 Animation：时分秒指针转动。 :before/:after :伪元素 基本思路： 1.使用d 阅读全文
posted @ 2018-09-25 20:51 笠航 阅读(1250) 评论(0) 推荐(0)
50个CSS技巧
摘要：这里我工作中收集了10个很不错的CSS技巧，你可以用在你的项目上。它可以帮你很好地整理你的元素并让他们看起来蛮酷的。下面开始我们的内容，希望你会喜欢它。下面是我收集的CSS技巧，希望能帮助到你，感觉收藏吧。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ 2. 使用 :not( 阅读全文
posted @ 2018-09-19 22:10 笠航 阅读(364) 评论(0) 推荐(0)
CSS知识总结
摘要：1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: center;align-items: center; 使用 CSS3 transform 父盒子设置:display:relative Div 设置: 阅读全文
posted @ 2018-09-19 20:41 笠航 阅读(144) 评论(0) 推荐(0)
CSS前叙
摘要：1 css是什么？层叠样式表，修饰网页结构2 如何去使用css？a.在html网页中，加入一个style标签，在这个style标签里面写css代码b.可以直接把style里面的代码放到一个单独的文件中，通过link标签去引入 （常用）c.直接在html开始标签的style属性里面去写css代码以上三 阅读全文
posted @ 2018-09-09 23:26 笠航 阅读(165) 评论(1) 推荐(0)