CSS学习笔记(基础篇)

CSS概念

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Css是用来美化html标签的,相当于页面化妆。

  • 样式表书写位置:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    // 样式表内容
    </style>
</head>

选择器

选择器是一个选择谁(标签)的过程。

选择器{属性:值; 属性:值; ......}

属性

解释

width:20px;

height:20px;

background-color:red;

背景颜色

font-size:24px;

文字大小

text-align:left | center| right

内容的水平对齐方式

text-indent:2em;

首行缩进(1em = 一个汉字的长度)

color:red;

文字颜色

基础选择器

标签选择器

标签{属性:值;}

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            font-size: 50px;
            color: red
        }
    </style>
</head>
<body>
    <div>等你下课</div>
</body>
</html>
  • 颜色的显示方式
  1. 直接写颜色的名称(比如:red,green等)
  2. 十六进制显示颜色

(#000000; 前2为代表红色,中间2位代表绿色,后边2位代表蓝色。

注意: #EEE == #EEEEEE; #333 == #333333)

  1. rgb(120, 120, 120)
  2. A代表alpha 不透明度,值 0-1 (比如:rgb(120,120,120. 0.5))

类选择器(重点)

.自定义类名{属性:值;  属性:值; }

特点: 谁调用,谁生效。 一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。

  • 类选择器命名规则
  1. 不能用纯数字或者数字开头来定义类名
  2. 不能使用特殊符号或者特殊符号开头(_ 除外)来定义类名
  3. 不建议使用汉字来定义类名
  4. 不推荐使用属性或者属性的值来定义类名
  • 常用的命名

ID选择器

#自定义名称{属性:值;}

特点: 1.一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。 2.一个标签只能调用一个ID选择器。 3.一个标签可以同时调用类选择器和ID选择器。

通配符选择器

*{属性:值;}

特点:给所有的标签都使用相同的样式。 ★不推荐使用,增加浏览器和服务器负担。

复合选择器

概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

标签+类(ID)选择器{属性:值;}

特点:即要满足使用了某个标签,还要满足使用了类选择器或者ID选择器。

后代选择器(重点)

选择器+空格+选择器{属性:值;}

后代选择器首选要满足包含(嵌套)关系。 父集元素在前边,子集元素在后边。 特点:无限制隔代。(下面都会生效)

只要能代表标签,标签、类选择器、ID选择器自由组合。

子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素,下下一代就选不中了。

并集选择器

选择器+,+选择器+,选择器{属性:值;}

文本元素

属性

font-size:50px;         //文字大小
font-weight: 700;       //值从100-900,文字粗细,700约等于Bold,不推荐使用font-weight:bold;
font-family:微软雅黑;    //文本的字体
font-style: normal | italic;  //normal:默认值  italic:斜体
line-height:             //行高

文本属性连写

font: font-style font-weight  font-size/line-height  font-family;
font: italic 700 50px/40px  微软雅黑;

注意:font:后边写属性的值。一定按照书写顺序。 文本属性连写文字大小和字体为必写项。

文字的表达方式

  1. 直接写中文名称
font-family: 微软雅黑;
  1. 写字体的英文名称
font-family: microsoft yahei;
  1. unicode 编码(解析更快)

如何找到某一字体相对应的unicode编码呢? 第一步:f12 第二步:找到console 第三步:输入escape(“宋体”) 注意英文的括号和双引号。


样式表书写位置

  • 内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
  • 外链式写法
<link rel=”stylesheet” href=”1.css”> // 写在head里
  • 行内样式表
<div style="font-size: 30px; color:red;">行内样式表</div>

三种写法特点: 内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。 外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。 行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)


标签分类

块元素

典型代表: div, h1-h6, p, ul, li

特点: 1.独占一行 2.可以设置宽高 3.嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

行内元素

典型代表 span, a, strong, em, del, ins

特点: 1.在一行上显示 2.不能直接设置宽高 3.元素的宽和高就是内容撑开的宽高。

行内块元素(内联元素)

典型代表  input, img

特点: 1.在一行上显示 2.可以设置宽高

三者相互转换

  1. 块元素转行内元素
display:inline;
  1. 行内元素转块元素
display:block;
  1. 块和行内元素转行内块元素(用的最多)
display:inline-block;

CSS三大特性

层叠性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

继承性

继承性发生的前提是包含(嵌套关系) ★文字颜色可以继承 ★文字大小可以继承 ★字体可以继续 ★字体粗细可以继承 ★文字风格可以继承 ★行高可以继承 总结:文字的所有属性都可以继承。

特殊情况:

  1. h系列不能继承文字大小。(继承了但是不显示)

(h1显示的是:你设置的font-size * 2 h2显示的是:你设置的font-size * 1.5 .......)

  1. a链接标签不能继承文字颜色(继承了但是不显示,链接标签默认是蓝色)

优先级

 默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !important  
 权重:      0         1            10        100         1000     1000以上

这里的数字不是准确的,其实100个标签选择器叠加的权重也干不过一个类选择器的权重。

特点: 1.继承的权重为0(当没有自己的样式时,听继承的;有自己的样式时,继承的权重为0) 2.权重会叠加。

(上图:类选择器10+标签选择器1=11,所以最后14期威武显示的是黄色)


链接伪类

a:link{属性:值;}       链接默认状态  ( a{属性:值}效果是一样的。) 
a:visited{属性:值;}     链接访问之后的状态
a:hover{属性:值;}      鼠标放到链接上显示的状态    a:active{属性:值;}      链接激活的状态
:focus{属性:值;}     获取焦点

注意: 1.a:visited之后要想回到之前的状态,需要清除缓存。 2.写的顺序要按照link,visited,hover,active的顺序来写,否则可能不显示。

  • 文本修饰
text-decoration:  none | underline | line-through | ...... // 链接下划线/删除线/......

背景属性

background-color:    背景颜色
background-image:    背景图片
Background-repeat:    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺
Background-position:  left  |  right  |  center(默认)  |  top  | bottom  背景定位
Background-attachment   背景是否滚动   scroll(默认)  |  fixed
  • Background-position

background-position: right; // 方位值只写一个的时候,另外一个值默认居中。

background-position: right bottom // 写2个方位值的时候,顺序没有要求

background-position: 20px 30px // 写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向

  • Background-attachment

scroll: 背景图的位置是基于盒子(假如是div)的范围进行显示

fixed:背景图的位置是基于整个浏览器body的范围进行显示,如果背景图定义在div里面,而显示的位置在浏览器范围内但是不在div的范围内的话,背景图无法显示。

背景属性连写

background: red url("1.png") no-repeat 30px 40px scroll;

连写的时候没有顺序要求,url为必写项


行高

浏览器默认文字大小:16px

行高:是基线与基线之间的距离
行高 = 文字高度+上下边距

行高的单位

行高单位

文字大小

20px

20px

20px

2em

20px

20px*2=40px

150%

20px

20px*150%=30px

2

20px

20px*2=40px

总结:单位除了像素以外,行高都是与文字大小乘积000pt �z��l

行高单位

父元素文字大小(定义了行高)

子元素文字大小(子元素未定义行高时)

行高

40px

20px

30px

40px

2em

20px

30px

40px

150%

20px

30px

30px

2

20px

30px

60px

总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。 推荐行高使用像素为单位。


盒子模型

border(边框)

Border-top-style:  solid   实线
                    dotted  点线
                    dashed  虚线
                        none 无边框
Border-top-color   边框颜色
Border-top-width   边框粗细

除了有top系列外还有left,right,bottom系列

  • 边框属性的连写
border-top: 1px solid #fff;

没有顺序要求,线型为必写项

  • 四个边框值相同的写法
border: 1px solid #fff;

没有顺序要求,线型为必写项

边框合并(细线边框)

border-collapse:collapse;

获取焦点

  • label for id 获取光标焦点(点击label也可以选择文本框)
<label for="username">用户名:</label><input type="text" class="username" id="username"></input>

padding(内边距)

padding-left   |   right    |  top  |  bottom
  • padding连写
Padding: 20px;   //上右下左内边距都是20px
Padding: 20px 30px;   //上下20px   左右30px
Padding: 20px  30px  40px;  // 上内边距为20px  左右内边距为30px   下内边距为40
Padding: 20px  30px   40px  50px;   //上20px 右30px  下40px  左  50px
  • 内边距撑大盒子的问题

盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距

  • 继承的盒子一般不会被撑大

包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距(内边距不大于子盒子宽度),不会撑大子盒子。至于设置了上下内边距的话是会撑大子盒子的。(不管怎样父盒子永不变)

margin(外边距)

margin-left   | right  |  top  |  bottom
  • 外边距连写
Margin: 20px;    上下左右外边距20PX
Margin: 20px 30px;   上下20px  左右30px
(margin: 0 auto; 盒子居中对齐  text-align:center 是盒子里面的内容居中)
Margin: 20px  30px  40px;     上20px  左右30px   下  40px
Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px
  • 垂直方向外边距合并(取最大值)

两个盒子垂直,一个设置上外边距,一个设置下外边距,取的设置较大的值。

  • 嵌套的盒子外边距塌陷

嵌套的盒子,直接给子盒子设置垂直方向外边距的时候,会发生外边距的塌陷(父盒子跟着移动) 解决方法: 1.给父盒子设置边框 2.给父盒子overflow:hidden;


浮动

文档流(标准流)

元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。

浮动布局

float:  left   |   right (浮动方向)

特点: 1.元素浮动之后不占据原来的位置(脱标) 2.浮动的盒子在一行上显示 3.行内元素浮动之后自动转换为行内块元素。(不推荐使用,转行内元素最好使用display: inline-block;

浮动的作用

  1. 文本绕图
  • 制作导航(经常使用)

把无序列表ul li 浮动起来做成的导航。

  • 网页布局

清除浮动

问题:当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误(占据父盒子的位置)。

清除浮动不是不用浮动,清除浮动产生的问题。

方法一

  1. 额外标签法:在最后一个浮动元素后添加标签。
clear: left  |  right  | both // 工作里用的最多的是clear:both;

方法二

  1. 给浮动元素的父集元素使用overflow:hidden;

注意:如果有内容出了盒子,不能使用这个方法。

方法三(推荐使用)

  1. 伪元素清除浮动

: after 相当于在当前盒子后加了一个盒子。


CSS初始化

  • 腾讯
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}
  • 新浪
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
  • 淘宝
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

overflow

overflow属性规定当内容溢出元素框时发生的事情.

scroll:一直有滚动条. auto:只有内容出了盒子才有滚动条。


定位

定位方向: left | right | top | bottom

静态定位(默认值)

position: static; // 就是文档流式的定位模式。

绝对定位

position:absolute;

然后使用left | right | top | bottom 来确定具体位置。

特点: 1.元素使用绝对定位之后不占据原来的位置(脱标) 2.元素使用绝对定位,位置是从浏览器出发。 3.嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。 4.嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。 5.给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;

相对定位

position: relative;

特点: 1.使用相对定位,位置从自身出发。 2.不脱标,其他的元素不能占有其原来的位置。 3.子绝父相(父元素相对定位,子元素绝对定位),用的最多的场景。 4.行内元素使用相对定位不能转行内块元素。

固定定位

position:fixed;

特点: 1.固定定位之后,不占据原来的位置(脱标) 2.元素使用固定定位之后,位置从浏览器出发。 3.元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;)

定位(脱标)的盒子居中对齐

margin:0 auto; 只能让标准流的盒子居中对齐

定位的盒子居中:子绝父相,然后子盒子先往右走父盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)

PS:z-index:10改变层叠优先级,值越大优先级越高


标签包含规范

  • div可以包含所有的标签。
  • p标签不能包含div h1等标签(一般包含行内元素)。
  • h1可以包含p,div等标签(一般不这样)。
  • 行内元素尽量包含行内元素,行内元素不要包含块元素。

规避脱标流

  1. 尽量使用标准流。
  2. 标准流解决不了的使用浮动。
  3. 浮动解决不了的使用定位。
margin-left:auto; //盒子一直往右冲,一直冲不动为止。也是 margin:0 auto; 的由来。

图片和文字垂直居中对齐

vertical-align 主要用在 inline-block 标签上,效果最好。
默认属性是: vertical-align:baseline;

CSS可见性

overflow:hidden;   溢出隐藏    
visibility:hidden;   隐藏元素    隐藏之后还保留原来的位置。
display:none;       隐藏元素    隐藏之后不保留原来的位置。
Display:block;     元素可见
----------------------------------------------------
Display:none  和display:block  常配合js使用(如:鼠标经过时出现,鼠标离开时消失)。

css之内容移除(logo优化)

  • 方法一:
text-indent:-5000em;

之所以要写着两个字是为了SEO,因为背景图片SEO看不懂.

  • 方法二:

将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

.box{
  width:300px;
  height:0;
  padding-top:100px;
  overflow:hidden;
  background:red;
}

CSS精灵图

1:上图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。

2:然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites)。 简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,如下图所示为淘宝网站中的一个精灵图。

工作原理: CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }

        ul, li{
            list-style: none;
        }

        .box{
            height: 48px;
            background: #222;
            margin-top: 50px;
        }

        .con{
            width: 1182px;
            height: 48px;
            margin: 0 auto;
            position: relative;
        }

        .con ul li{
            float: left;
            
        }

        .con ul li a{
            text-decoration: none;
            color: #fff;
            display: inline-block;
            height: 48px;
            font: 16px/48px microsoft yahei;
            padding: 0 18px;
        }

        .con ul li a:hover{
            background: #2774A2;
        }

        .con .hot{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -58px 0;
            left:221px;
            bottom:35px;
        }

        .con .new{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -135px 0;
            left:90px;
            bottom:35px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">IOS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">C/C++</a></li>
                <li><a href="#">UI设计</a></li>
                <li><a href="#">前端与移动开发</a></li>
                <li><a href="#">问答专区</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">网络营销</a></li>
                <li><a href="#">活动专区</a></li>
            </ul>
            <div class="hot"></div>
            <div class="new"></div>
        </div>
    </div>
</body>
</html>

PS:之所以选择con作为父盒子而不是box作为父盒子,是因为box的宽度不定,不同的显示器宽度不同,那么new和hot的定位就有问题。


属性选择器

input[type="text"][class] {
  width: 20px;
  height: 20px;
}  

选择有type属性为text,并且有class属性的标签。

input[type="text"][class="id"] {
  width: 20px;
  height: 20px;
}  

选择有type属性为text,并且有class属性,并且class属性为 id 的标签。


CSS滑动门

边上是这种圆弧型的或者其他形状的,可以变换长度的样式。

特点:浮动之后宽度不是父盒子的宽度,而是内容撑开的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            float: left;
        }
        ul li a{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c1.png") no-repeat;
            padding-left: 7px;
        }

        ul li a span{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c2.png") right;
            padding-right: 25px;
            color: #fff;
            line-height: 35px;
        }

        ul li a:hover{
            background: url("bbg_r1_c1.png");
        }

        ul li a:hover span{
            background: url("bbg_r1_c2.png") right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><span>网易云音乐</span></a></li>
        <li><a href="#"><span>微信</span></a></li>
        <li><a href="#"><span>蚂蚁花呗</span></a></li>
    </ul>
</body>
</html>

微信案例:

现象:鼠标经过时,背景凸起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li,a,span{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .nav{
            height: 74px;
            background: url("weixin_bg.jpg");
        }

        .nav-con{
            width: 600px;
            margin: 0 auto;
        }

        li{
            float: left;
            height: 74px;
            line-height: 74px;
            margin-right: 60px;
        }

        li a{
            display: inline-block;
            text-decoration: none;
            color: #fff;
            height: 33px;
            line-height: 33px;
            background: url("bg.png") no-repeat 0 -144px;
            padding-left: 13px;
        }

        a span{
            display: inline-block;
            height: 33px;
            background: url("bg.png") no-repeat right -144px;
            padding-right: 13px;
        }

        a:hover{
            background: url("bg.png") no-repeat 0 -192px;
        }

        a:hover span{
            background: url("bg.png") no-repeat right -192px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li><a href="#"><span>首页</span></a></li>
                <li><a href="#"><span>下载文章</span></a></li>
                <li><a href="#"><span>微信公众公众公众助手</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG   兼容性: IE 8~11 Ed...

24160
来自专栏Danny的专栏

前端基础——CSS+DIV布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

34310
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

15450
来自专栏非著名程序员

基础篇章:React Native之Flexbox的讲解(Height and Width)

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天在讲解Flexbox之前,我们先讲解一下...

23070
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

89490
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

21080
来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

23620
来自专栏进击的君君的前端之路

网页布局基础

54520
来自专栏AndroidTv

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

13520
来自专栏编程

前端学习自学笔记:day02

今天是第二天的学习内容笔记,我一般无事都会一直更新下去,直到我前端学的差不多了,我到时候才会转学其他语言,如果在学习中有什么发现,我都会分享上来. ? 在此之前...

213100

扫码关注云+社区

领取腾讯云代金券