随笔分类 -  CSS技能

上一页 1 2
css技能笔记
CSS0008： CSSDIV进度条样式
摘要：1，CSS样式： .progress { margin-top: 2px; width: 200px; height: 14px; margin-bottom: 10px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px 阅读全文
posted @ 2020-07-04 15:52 琥珀君 阅读(223) 评论(0) 推荐(0)
CSS0007： CSS中通过定义宽度的百分比 自动计算高度的尺寸 和高度保持一致大小
摘要：1，如果是顶层DIV ，要保持宽度和高度一致 可以直接定义宽度的尺寸为 10vw， 高度的尺寸也是 10vw，而不是10vh。 2，对不是顶层DIV，如何保持DIV 的宽度和高度一致： .iframe span { position: absolute; z-index: 2; top: 2%; l 阅读全文
posted @ 2020-06-30 11:21 琥珀君 阅读(910) 评论(0) 推荐(0)
CSS0006： CSS常用样式集锦
摘要：.iframe { width: 70%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: fixed; z-index: 999; display: none; } 阅读全文
posted @ 2020-06-29 15:56 琥珀君 阅读(126) 评论(0) 推荐(0)
CSS0005： 两个带边框的DIV并排放置
摘要：1，box-sizing:border-box; 属性 div.container { width:30em; border:1em solid green; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Fire 阅读全文
posted @ 2020-06-29 15:21 琥珀君 阅读(441) 评论(0) 推荐(0)
CSS0004： CSS3中的transition和transform属性
摘要：开门见山的说，transition、transform和translate这三者经常有人搞混，先把这三者做一个简单解释： transform是 转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如 位移、缩放、旋转 等，而其中的位移的函数名就叫translate，所以说，tra 阅读全文
posted @ 2020-03-20 14:19 琥珀君 阅读(345) 评论(0) 推荐(0)
CSS0003： css中的label标签
摘要：在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了<label>标签实现。 一、点击文字，对应选择上控件 - TOP 点击<label>标签文字时，实现对应控件被选择，需要对应表单控件i 阅读全文
posted @ 2020-03-20 12:23 琥珀君 阅读(2294) 评论(0) 推荐(0)
CSS0002： CSS特殊字符
摘要：HTML CSS 特殊字符表 HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就随时可以查到这些特殊字符的 阅读全文
posted @ 2020-03-20 10:41 琥珀君 阅读(528) 评论(0) 推荐(0)
CSS0001： CSS判断手机 平板 PC
摘要：<style> /*手机*/ @media screen and (max-width:600px){ .box_2 { padding-top: 45px; padding-bottom: 50px; /* background: #fff; */ /* 添加背景图片 */ background- 阅读全文
posted @ 2020-03-10 15:10 琥珀君 阅读(3183) 评论(0) 推荐(0)
CSS0000： flex弹性布局 toggle改变样式 延迟加载 js css
摘要：1，让body中所有元素 上下左右居中 body { display: flex; justify-content: center; align-items: center; background: #F8FFAE; background: -webkit-linear-gradient(-65de 阅读全文
posted @ 2020-03-02 15:01 琥珀君 阅读(380) 评论(0) 推荐(0)

上一页 1 2