css基础篇
辰月初九
这个作者很懒,什么都没留下…
展开
-
css3动画实现八大行星
css3动画实现八大行星话不多说 上代码 看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-11-16 17:39:32 · 772 阅读 · 1 评论 -
CSS3 :nth-child(n)
CSS3 :nth-child(n):nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素;p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第n个子元素注意:n是从1开始的如下代码,p:nth-child(1),只会选中第二个div中第一个子元素p;不会选中第一个div中的第一个p,因为第一个di...原创 2019-11-11 11:10:53 · 365 阅读 · 0 评论 -
css3 flex弹性盒子布局
flex弹性盒子布局什么是flexFlex是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table布局和浮动元素内嵌块元素)...原创 2019-11-11 10:23:20 · 777 阅读 · 0 评论 -
CSS/HTML 实现好看的Switch开关
Switch 开关HTML <input type="checkbox" class="switch">CSS /* Switch开关样式 */ /* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */ input[type='checkbox'].switch{ outline: none; appearance...原创 2019-11-06 22:37:33 · 11123 阅读 · 2 评论 -
CSS/HTML复选框自定义样式
CSS/HTML复选框自定义样式话不多说 直接上代码HTML <div class="circle-check"> <input type="checkbox" /> </div> <div class="square-check"> <input type="checkbox"> ...原创 2019-11-06 22:27:46 · 1384 阅读 · 0 评论 -
HTML和CSS content属性特殊字符
HTML和CSS content属性特殊字符常用箭头 图形样式 用于HTML(在字符前加 &# ) 用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) ⇠ 8672 21E0 ⇢ 8674 21E2 ⇡ 8673 21E1 ⇣ 8675 21E3 ↞ 8606...原创 2019-11-04 20:00:57 · 1813 阅读 · 0 评论 -
css清除默认样式和设置公共样式
CSS 清除默认样式通常的清除默认样式:*{ margin:0; padding:0}li{ list-style:none}img{ vertical-align:top; border:none}设置默认字体body,button, input, select, textarea /* for ie */ { font...原创 2019-10-29 14:59:42 · 2672 阅读 · 1 评论 -
CSS3媒体查询
千万不要忘记设置meta标签,如果忘了写,浏览器是不识别媒体查询代码的;媒体查询采用流式布局,站手机端的100%;pc端网页能不给元素设定固定宽高就不要设,这样易于维护;原创 2019-10-24 18:44:35 · 1683 阅读 · 2 评论 -
CSS3 动画
CSS3 动画要创建CSS3动画,你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。实例当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:@keyframes myfirst{0% {background: red;}25% {backgro...原创 2019-10-23 20:33:53 · 402 阅读 · 2 评论 -
CSS3 转换和变形
CSS3 转换和变形以下列出了所有的转换属性:Property描述transform适用于2D或3D转换的元素transform-origin允许您更改转化元素位置2D 转换方法函数描述matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移...原创 2019-10-23 18:07:19 · 250 阅读 · 1 评论 -
浮动与清除浮动
float在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。关于浮动的两个特点:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。三种取值left:向左浮动right:向右浮动none:默认值,不浮动参考案例clear...原创 2019-10-19 19:25:18 · 175 阅读 · 0 评论 -
定位(position)
定位(position)staticstatic 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。relative(相对定位)相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom...原创 2019-10-19 19:13:11 · 198 阅读 · 0 评论 -
CSS基础篇
CSS基础篇2019-010-19 15:23:41分类专栏: css基础篇Web相关概念:1、W3C制定的结构和表现的标准W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。(制定了结构和表现的标准,非赢利性的。)2、WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 ...原创 2019-10-19 19:05:27 · 132 阅读 · 0 评论