![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 70
fullstack_lth
这个作者很懒,什么都没留下…
展开
-
CSS3 @Media 媒体查询
/*大型屏幕pc 超大屏*/ @media screen and (min-width:1200px){ #content { color: #f00; background: #000; } } /*1200>=pc>=992 大屏,字体红色,背景黑色*/ @media screen and (min-width:992...原创 2021-09-22 10:10:29 · 668 阅读 · 0 评论 -
给定宽度,不用height画出正方形
body{width:100%;font-size:0;text-align:center;}div{display:inline-block;width:20%;position:relative;&:before{content:"";...原创 2020-03-29 01:28:20 · 593 阅读 · 0 评论 -
CSS(九)垂直居中详解
一般情况下有的需要问水平居中和垂直居中.常见的水平居中和垂直居中有:水平居中:行内元素: text-align: center; 块级元素:margin: 0 auto; absolute+ transform; flex+ justify-content: center;垂直居中:line-height: height; absolute+ transform; fl...原创 2020-03-28 17:11:59 · 1002 阅读 · 0 评论 -
CSS(八)三栏布局详解
三栏布局,顾名思义就是两边固定,中间自适应。以下一些为公共代码:<!DOCTYPE html><html lang="en"><head> <style> .left { } .right { } .main { } </style></head>...原创 2020-03-23 00:07:40 · 282 阅读 · 0 评论 -
CSS(七)两栏布局详解
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解两栏布局是非常...原创 2020-01-05 23:05:43 · 561 阅读 · 0 评论 -
CSS(六)CSS动画-animation简介
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解一、概念CSS ...原创 2019-10-17 23:47:01 · 698 阅读 · 0 评论 -
CSS(五)CSS动画-transition简介
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解一、概念一个状态...原创 2019-10-17 23:27:49 · 723 阅读 · 0 评论 -
CSS(四)详解Grid布局
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解Grid布局又叫做...原创 2019-08-17 21:20:54 · 1299 阅读 · 0 评论 -
CSS(三)flex布局(flex弹性布局详解)
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解早期CSS三大难题包...原创 2019-08-11 20:28:35 · 14517 阅读 · 2 评论 -
CSS(零)-预热篇
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解最近听了winter...原创 2019-08-10 21:52:43 · 530 阅读 · 0 评论 -
CSS(二)transform详解
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解transform ...原创 2019-08-01 10:48:14 · 4102 阅读 · 0 评论 -
CSS(一)详解position
最近我想深入学习css知识,所以打算对css相关的内容整理下。这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animat...原创 2019-07-25 23:19:59 · 1390 阅读 · 0 评论 -
《css揭秘》学习笔记(一)
第0章 关于本书第1章 引言第二章 背景与边框原创 2017-07-03 23:15:23 · 1826 阅读 · 0 评论 -
《css揭秘》学习笔记(二)
第三章形状9、自适应的椭圆圆形:给一个正方形设置一个大于边长长度一半的border-radius即可。椭圆:border-radius:50%;半椭圆:border-radius:100% 0 0 0;四分之一椭圆:border-radius:100% 0 0 0;10、平行四边形最简单的变形:形状和内容一起变形,不合要求(要求是形状变形,文字不变形)t原创 2017-07-07 00:19:26 · 508 阅读 · 0 评论 -
CSS技巧
1、垂直水平居中水平居中 行内元素: text-align: center 块级元素: margin: 0 auto absolute + transform flex + justify-content: center 垂直居中 line-height: height absolute + transform flex + align-items: cente...原创 2017-04-09 17:40:01 · 284 阅读 · 0 评论 -
CSS(七)实现各种形状和对话框
##CSS实现梯形CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉。首先我们先给一个正方形设置比较宽的边框。如下。代码如下:<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; ...原创 2019-06-02 19:43:58 · 2730 阅读 · 0 评论