CSS
关注
分享
扫一扫
cellinlab
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
重学css 0x4 CSS动画
CSS中的动画类型transition补间动画 keyframe关键帧动画 逐帧动画Transition 补间动画位置——平移（left/right/margin/transform） 方位——旋转（transform） 大小——缩放（transform） 透明度（opacity） 其他——线性变化（transform）<!DOCTYPE html>&l...原创 2020-02-25 21:28:53 · 182 阅读 · 0 评论 -
重学css 0x3 CSS效果
box-shadow营造层次感（立体感） 充当没有宽度的边框 特殊效果/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | ...原创 2020-02-24 21:53:27 · 259 阅读 · 0 评论 -
重学css 0x2 CSS布局
发展早期table为主 简单 后来以技巧性布局为主（难） 现在推广flexbox/grid（偏简单）常用布局方法table表格布局 float浮动+margin inline-block布局 flexbox布局表格布局<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2020-02-23 11:06:11 · 232 阅读 · 0 评论 -
CSS布局 0x7 column
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>column</title> <style> .three-column {原创 2019-03-13 14:52:48 · 206 阅读 · 0 评论 -
CSS布局 0x8 flexbox
使用 Flexbox 的简单布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flexbox</title> <style> .cont原创 2019-03-14 13:39:05 · 200 阅读 · 0 评论 -
CSS入门 0x7 形状
border-radius应用（椭圆等）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自适应椭圆</title> <style> .container {...原创 2019-03-22 16:17:43 · 323 阅读 · 0 评论 -
CSS入门 0x8 视觉效果（单侧投影、染色、毛玻璃效果）
单侧投影<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .container { width...原创 2019-03-24 17:34:45 · 345 阅读 · 0 评论 -
CSS float实现首字下沉
方法：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>首字下沉</title> <style> p { width: 400p...原创 2019-04-02 16:57:54 · 556 阅读 · 0 评论 -
CSS浮动布局——高度/宽度计算和清除浮动
宽度计算 当给元素赋予样式时，可能涉及border，会导致整体宽度大于页面宽度。 优先的办法是修改宽度计算方式，使盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。* { box-sizing: border-box;}清除页...原创 2019-04-02 17:47:53 · 1069 阅读 · 0 评论 -
CSS 实现 选项卡消息框 和 固定列表消息盒子
选项卡消息框源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>position案例</title> <style> html { ...原创 2019-04-03 09:10:40 · 936 阅读 · 0 评论 -
DIV&CSS多种方式实现同心圆
div嵌套利用border和boxshadow径向渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-08-23 15:20:21 · 1678 阅读 · 0 评论 -
DIV&CSS实现多种三角形及组合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-08-27 15:42:05 · 580 阅读 · 0 评论 -
纯CSS 用span绝对定位实现四角边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>span绝对定位实现四角边框</title></head><body> <div class="container"> ...原创 2019-08-29 09:29:11 · 1418 阅读 · 0 评论 -
CSS布局 0x6 inline-block
可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用float是一种选择，但是使用inline-block会更简单。使用浮动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>float VS in...原创 2019-03-13 14:40:08 · 186 阅读 · 0 评论 -
CSS布局 0x5 媒体查询(响应式设计)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>responsivelayout</title> <style> @media screen a原创 2019-03-13 13:40:57 · 164 阅读 · 0 评论 -
CSS入门 0x6 背景与边框
半透明边框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>半透明边框</title> <style> #container { ...原创 2019-03-21 18:45:44 · 266 阅读 · 0 评论 -
CSS入门 0x1 背景图像、圆角
背景图像基础 默认，浏览器水平和垂直地重复显示背景图像。body { background-image: url(http://img.pconline.com.cn/images/photoblog/8/9/6/0/8960500/20096/12/1244801595823_mthumb.jpg); } 水...原创 2019-03-20 11:22:56 · 274 阅读 · 0 评论 -
CSS入门 0x2 投影、不透明度
投影 简单css投影<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>background-image</title> <style> .img-wr...原创 2019-03-20 14:23:29 · 457 阅读 · 0 评论 -
CSS入门 0x3 链接样式
链接的伪类选择器注意使用次序 a:link a:visited a:hover a:focus a:active 未访问链接 已访问链接 鼠标悬停 键盘选中 被激活的，发生在单击时 <!DOCTYPE html><html> <head> <meta chars...原创 2019-03-20 16:10:22 · 223 阅读 · 0 评论 -
CSS入门 0x4 列表样式和导航条
基本列表样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>List</title> <style> ul { margin:...原创 2019-03-20 17:53:35 · 359 阅读 · 0 评论 -
CSS入门 0x5 表格和表单的样式
数据表格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单</title> <style> table.cal { bord...原创 2019-03-21 08:56:46 · 259 阅读 · 0 评论 -
CSS布局 0x0 dispaly和margin
"display"属性 CSS display 属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标...原创 2019-03-12 17:54:37 · 492 阅读 · 0 评论 -
CSS布局 0x1 盒模型和box-sizing
盒模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。<!DOCTYPE html><html> <head> ...原创 2019-03-12 18:12:54 · 188 阅读 · 0 评论 -
CSS布局 0x2 position属性
position 属性指定了元素的定位类型。 position 属性的五个值：static,relative,fixed,absolute,sticky。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static static是默认值。任意p...原创 2019-03-12 19:05:37 · 258 阅读 · 0 评论 -
CSS入门 0x6 布局
设置基本结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>博客布局</title> <style> * { margin: ...原创 2019-03-21 10:53:29 · 231 阅读 · 0 评论 -
CSS布局 0x3 浮动布局
floatimg { float: right; margin: 0 0 1em 1em;}clear clear属性被用于控制浮动。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title...原创 2019-03-12 19:42:43 · 198 阅读 · 0 评论 -
CSS入门 0x6 css编码技巧
尽量减少代码重复尽量减少改动时要编辑的地方（这样就不会因为遗漏改动产生问题） 当某些值相互依赖是应该将其关系用代码表示出来（如字体大小和行高，使用em或百分比而不是绝对值）inherit（inherit 可以用在任何 CSS 属性中， 而且它总是绑定到父元素的计算值（对伪元素来说， 则会取生成该伪元素的宿主元素）。 举例来说， 要把表单元素的字体设定为与页面的其他部分相同， 你并不需...原创 2019-03-21 14:37:02 · 207 阅读 · 0 评论 -
CSS布局 0x4 宽度百分比
百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>percent</title> &原创 2019-03-13 08:43:57 · 194 阅读 · 0 评论 -
CSS入门 0x0 选择器和盒模型
常用选择器/*类型选择器也称元素选择器或简单选择器*/p {color:black;}h1 {font-size:10px;}/*后代选择器，作用于blockquote下p*/blockquote p {padding:2px;}/*ID选择器*/#main-content h2 {font-size:1.8em;}/*类选择器*/.date-post {color:#ccc...原创 2019-03-20 08:25:57 · 871 阅读 · 2 评论