pink-css标签

选择器：基础选择器和复合选择器。基础选择器由单个选择器组成。

基础选择器：标签选择器，类选择器，id选择器，通配符选择器。

1.标签选择器

div {

background-color: red;

text-indent: 2em;

}

多个选择器}后也没有标点符号。

2.类选择器

.类名 {

}

多类名：一个标签有多个类名。<div class="red box"></div>空格隔开

3.id选择器(JS)

#id名 {

}

不能用标签名做id名,.star-sing可。不要纯数字或中文。

4.通配符选择器

* {

}

不需要调用

5.CSS字体属性

字体系列：font-family: ‘微软雅黑’,"宋体"；√

各个字体间英文逗号隔开，'',""都可，单个英文单词不用“”隔开即可。

字体大小：font-size: 20px;√

px不能省，用body类选择器只能定义h之外的字体大小，h特殊一般需要单独定义

字体粗细：font-weight: bold light 400 700；(看手册)

字体斜体：font-style： nomal italic;

复合属性：font: italic 700 20px/16px "宋体"；(从下往上的顺序，/后是行高)

顺序不能错，空格隔开。可部分不设置，但必须有size family的

6.CSS文本属性

文本属性有：文本颜色，文本对齐，文本装饰，文本缩进，行间距。

文本颜色：color: pink #00ff00 rgb(0,255,0);逗号隔开

文本水平对齐：text-align: center left right; (本质是让h1盒子里面的文字居中对齐)。

文本装饰(加线)：text-decoration： none underline overline line-through;

文本首行缩进：text-indent： 10px 2em;(一般对段落标签p使用)

em按当前文字一个字大小，若当前元素没有设置大小按父元素的一个字大小(CSS继承)。

行间距(行高)：line-height: 26px;(上间距+文本高度+下间距=26px)，文字默认16px。

*Chrome调试工具->检查

ctrl滚轮调大小。

CSS可改数值颜色。

点元素右侧无样式：类名或样式引入错误；有样式但前有黄色感叹号：样式属性书写错误。

7.CSS引入方式

内部样式表，行内样式表，外部样式表。

内部样式表：上面。上面属性用：键值对形式。

行内样式表：<div style="color: pink;font-size: 12px;">粉色</div>这里style是属性。

外部样式表：CSS代码放到.css文件只有样式div{XX：XX;} 没有style。

*新标签<button>XX</button>

和<input type="button" value="XX">不同在于input应在form内要传到服务器这个不用

实际这里可用placeholder属性

8.emmet语法

生成HTML标签:

生成标签：标签名*3

ul>li div+p

.class名 #id名

$*5

div{XX}

生成CSS样式：单词首字母

CSS复合选择器：

9.后代选择器

元素1 元素2 (元素3)..{} /如/.nav .bg1{}中间无空格会显示不出效果

1. 2必须是1后代，最终选的是元素2，

2. 元素2可为儿子，孙子3只要是后代就可被选出。(所以2可不写，提倡写)

3. 元素可以是任意选择器

选定某父元素的子元素。

10.子选择器

元素1>元素2{}

1. 选元素1所有直接后代且元素2

2. 最终选的是元素2

11.并集选择器

元素1，元素2{}

//样式要求相同的可以为了方便管理放到一类

12.伪类选择器

：hover{}//鼠标经过，只变hover内与之前设置不同部分，hover未变动的按之前样式

：firstchild{}

添加特殊效果。

分类：链接伪类，结构伪类，(表单伪类)。。

(1)链接伪类选择器(比类选择器多个.)

a:link{} //选择所有未被访问过的链接

a:visited{} //选择所有已被访问过的链接

a:hover{} //选择鼠标指在其上的链接

a:active{} //选择鼠标按下未弹起的链接，即活动链接

1. LVHA顺序(上->下)

2. 链接a用body不能指定样式，需要单独指定a。

(2)focus伪类选择器

input：focus{}

获取焦点表单元素。

13.元素显示模式

(1)定义：标签以什么方式显示，为了更好的网页布局。

(2)分类：

块元素：

如：h1~h6,p,div,ul,ol,li...

特点：1.独占一行；

2.高宽，内外边距可设置；

3.宽度默认是父级100%；

4.内可放行内或块级元素。

文字类(如p，h1~h6)内部不能放块级元素。

行内元素：

如a,strong,b,em,i,del,s,ins,u,span...

特点：1.一行可显示多个；

2.宽高直接设置无效；

3.默认宽度是本身内容宽度；

4.内可放文本或其他行内元素，不可放块级元素。

链接里不能放链接。

a内特殊，可以放块级元素，但最好a转换成块级模式更安全。

行内块元素：

如：img,input,td(单元格)...

特点：1.一行可以显示多个(行级元素特点)，中间有空白缝隙

2.默认宽度是本身内容宽度(行级元素特点)

3.高度，行高，内外边距可控制(块级元素特点)

1.只有块级元素默认宽度是父级100%，其他都是本身内容宽度。h p ul ol li

2.只有行级元素不能直接设置宽高，垂直内外间距，不能直接放块级进去，需转换。a

(3)转换：

当一个模式的元素需要另一个元素的特点时。

如：增加链接a的触发范围。display:block;(inline;/inline-block)

snipaste:(Fn+)F1截图(量大小加文字)，F3置顶移动，alt取色，shift切颜色模式，c复制，esc去掉

https://zh.snipaste.com

//代码分析元素应是什么元素，原本是行块级，现在表现为行块级(看是否独占一行、设置了宽高)，怎么转换和设置；

//鼠标经过等设置

小技巧：单行文字垂直居中：让文字行高等于盒子高度。

14.CSS背景

1. 背景颜色(学查手册)

background-color：XX；

默认transport透明

2. 背景图片

background-image：none、url(图片地址)； //默认平铺满重复图

如：logo，装饰性小图片，超大图片。。

相比插入图片非常容易控制位置，图片非透明区压住背景颜色。

3. 背景平铺

background-repeat:repeat/no-repeat/repeat-x/repeat-y

默认平铺至设置的高宽。

4. 背景图片位置(精灵图时大量使用)

background-position:x y;

X/Y可为：

方位名词：top/center/bottom/left/center/right(若XY都指定方位名词，前后顺序不影响效果)。只写一个词时，另一个默认居中。小图div{}，背景图body{top,center}，要写宽高。

精确单位：第一个是X第二个是Y，前后顺序影响效果。只写一个值时，默认写的是X值，垂直默认居中。20px

混合单位：第一个是X第二个是Y。

抠图：检查找图片链接，新标签页打开，图片另存为

5. 背景图像固定

background-attachment:scroll/fixed;

6.背景属性复合写法

background：颜色地址平铺滚动位置(实际顺序没要求)

如：background: pink url("../images/background.jpg") no-repeat fixed center 20px;

7.背景颜色半透明

background：rgba(0,0,0,0.3); //最后一个参数是透明度0~1，0完全透明，IE9+，用

//习惯把0.3的0去掉，只是背景色半透明，其他无影响

alt+shift鼠标拉下来同时输入几列数据

15.CSS三大特性：

层叠性：对相同的选择器的同一属性，附不同的属性值时 -> 就近原则 (即覆盖性)

继承性：部分样式可子承父业，简化CSS代码复杂性。(文字类text-,font-,line-,color),其他不继承

另外a标签样式需要单独设置(因为a浏览器默认指定了样式，优先级>body)

行高可跟单位可不跟单位1.5，写在父元素里时，表示子元素行高继承了子元素现文字大小的1.5倍

子元素可根据自己文字大小调整行高，常用。没设置大小一直找父元素到设置为止。

优先级：同一标签同一属性，附不同的属性值时，

1.同一选择器：层叠性(就近原则覆盖)；

2.选择器不同：选择器权重：

!important(加在CSS重要属性分号的前面)

>style=""行内样式

>id>类/伪类class/:

>标签

>*/继承

3.复合选择器：权重叠加(只叠加，不进位如：10个标签选择器权重为0，0，0，10，因此再多标签选择器叠加优先级依然小于类选择器。。)

*.CSS注释

16.盒子模型：(网页布局核心：盒子模型，浮动，定位)

1.网页布局过程：

1. 先准备好相关网页元素，网页元素基本都是盒子。

2. 用CSS设置盒子宽高，样式，摆到相应位置。(浮动和定位)

3. 往盒子里面装内容。

网页的核心本质就是利用CSS摆放盒子。

2.盒子模型：

把HTML页面中的布局元素看成一个矩形的盒子，盛放内容的容器。用CSS设置边框，内外边距，实际内容。(border,padding,margin,content)

3组成部分:

1. border边框(边框宽度，边框样式，边框颜色)

border-width: XXpx;

border-style: solid/dashed/dotted;

border-color: pink;

简写border: XXpx soild pink;没有顺序要求

指定一个边框样式颜色border-top/bottom/left/right: XXX;

表格的细线边框border-collapse: collapse; //相邻边框合并到一起

边框会影响盒子实际大小。->测盒子本身宽度时，不带边框测；

含边框时：width,height分别-边框宽度*2=盒子本身大小。

2. content内容

直接书写。

3. padding内边距

padding-top: XXpx;

padding-right:

padding-bottom:

padding-left:

padding：1上下左右 2上下左右 3上左右下 4上右下左

如果盒子已附宽高，内边距会影响盒子实际大小。(可盒子本身不给宽高，根据输入多少和padding定宽高，更灵活)

padding只影响默认值或设置值，不影响默认继承的宽度。

实际宽=pr+pl+盒子本身宽，高同理。范围固定盒子本身宽高=范围-测量内边距*2

4. margin外边距

margin-top: XXXpx;

margin-right:

margin-bottom:

margin-left:

margin和padding简写方式一致。

不会撑大盒子。

外边距可以让块级盒子实现水平居中，前提：

1. 这个块级盒子必须指定了宽度；

2. 盒子左右的外边距设置为auto。

给父元素添加text-align:center;让行级元素和行级块元素文字实现水平居中。(转化为块级可用外边距实现居中)

外边距合并，分为：

1. 相邻块元素垂直外边距的合并

上下盒子的垂直间距不是margin-bottom，margin-top的和，而是取这俩最大值

解决方法：尽量给一个盒子添加margin值。

2. 嵌套块元素垂直外边距的塌陷

两个嵌套关系的块元素，同时都有上外边距时，外边距合并，父元素塌陷较大的那个外边距。

解决方案：父元素定义上边框/父元素定义内边距/父元素添加overflow:hidden

第三个方法不会变表现盒子的大小，推荐。

浮动，固定，绝对定位没有塌陷问题。

清除内外边距：*{padding:0; margin:0;}

为了照顾兼容性，行级元素可以设置左右内外边距，最好不要设置上下内外边距。(但转换后可以)

h,p,dt特殊，是块级元素但是内部不能放块级元素。

总结：1.标签要符合语义h，p，a。。不能全部div，span等。

2.类名尽量多写，命名规范，方便后期管理和后端渲染。

3.margin和padding大多时候可以混用；定过当前元素宽/高时padding会扩大盒子宽/高需要算数字减一些，此时用margin比较方便；当文字有上下边框等用margin-左右，上下边框会跟着跑，此时用padding比较方便。

4.先模仿再写出自己风格，多用辅助工具。

量盒子尽量不要量到边框，

去掉li前面的小圆点：

list-style:none; //写在单独li里，全部去掉。

PS基本操作

5.圆角边框(567是CSS3新增内容，IE9及以上版本有)

border-radius: XXpx;/ 50%; ...//表示宽度和高度的一半，出圆形或椭圆形

1左上右上右下左下；2左上右下右上左下；3左上右上左下右下；4左上右上右下左下

border-top-left-radius:

border-top-right-radius:

border-bottom-right-radius:

border-bottom-left-radius:

6.盒子阴影

box-shadow:水平距离垂直距离模糊尺寸大小颜色 inset改内部阴影；(颜色常用rgba)

阴影不占用空间，不影响盒子大小和排列。多写outset会导致阴影失效，不要写。

之后学过渡，让阴影慢慢出来。

任何盒子都可加:hover

7.文字阴影

text-shadow:水平距离垂直距离模糊距离阴影颜色；

X偏移量，Y偏移量，阴影模糊半径，阴影扩散半径(大小)，阴影颜色

17.浮动

网页布局PC端3种方式(移动端学新的布局方式)

网页布局的本质：用CSS摆放盒子，把盒子摆到相应位置。

1. 普通流(标准流/文档流)

按块级元素，行级元素，行内块元素默认方式排列。

块级独占一行，由上到下排列：div hr p h ul ol dl form table

行级由左到右，碰到父级元素边缘自动换行：span a i em

元素在同一盒子两端，滚动部分盒子不动，用标准流不方便做。

2. 浮动

3. 定位

浮动可以改变元素标签默认的排列方式。

网页布局准则：

1.多个块级元素纵向排列找标准流，横向排列找浮动。

float: none/left/right;

float属性创建浮动框，将其移动到上级父元素的左/右边缘或包含另一浮动框边缘。

1.浮动特性

1. 浮动的元素会脱离标准流(脱标)

脱离标准流的控制浮起来，并移动到指定位置。

浮动的盒子不再保留原先的位置。

2. 浮动的元素会一行显示并元素顶部对齐

浮动元素是相互贴在一起没缝隙的，若父级元素装不下这些盒子，多出的盒子会另起一行对齐。

3. 浮动的元素会具有行内块元素的特性

任何元素都可以添加浮动，添加后具有行内块元素的特性。可设置宽高，不设按字多少

如：行内元素若有了浮动，不需转换就可以添加宽高。和行内块不同的是中间没有空白缝隙。

为了约束浮动元素位置：先用标准流的父元素排列上下位置，再用内部子元素采取浮动排列左右位置。这样浮动元素以父元素为边缘左右对齐。

2.先设置盒子大小，再设置盒子位置。

height必须设置，否则父元素的height的继承会被float自带的属性覆盖掉

1.浮动和标准流的父盒子搭配；

2.如果一个元素浮动了，理论上所有的兄弟元素也要浮动。

浮动盒子前面的非父级标准流若独占一行会占住下面浮动盒子的部分位置，使盒子贴住这个标准流的底部边缘所在行(可正对边缘或在边缘延长线上)浮动。上一浮动右边缘的延长线->

浮动盒子只会影响该盒子后面的标准流，不会对浮动的盒子的前面具有独占一行属性的标准流造成影响。在此基础上浮动的盒子贴着前一个右边缘延长线，达不到要求就再另起一行

浮动盒子受前面非父级的独占一行盒子影响。

当里面产品很多和新闻不知道长短时，父盒子不写高度，希望父盒子根据子盒子高度撑开。由于浮动元素不再占用原文档流的位置，所以他会对后面元素的排版产生影响。

父盒子没有高度，且子盒子浮动了，且影响下面布局了时清除浮动。

清除浮动的方法：

1. 额外标签法：

在最后一个浮动的子标签后加<div style="clear:both;"></div> 父级{clear: left/right/both;}实质是闭合浮动，把子元素浮动造成的影响闭合到当前父元素里。

通俗易懂，但添加无意义标签，结构化较差。

这个新增的盒子标签必须是块级元素或br，不能是行级元素

2. 父级添加overflow属性

父级{overflow: hidden/auto/scroll;}

简洁，但会溢出隐藏把出父元素外一部分的盒子不换行而是直接切掉

3. 父级添加after伪元素

.clearfix::after{

content: ""; //必写属性

display: block; //必须是块级元素

height: 0; //让看不见这个元素

clear: both; //清除浮动

visibility: hidden; //让看不见这个元素

}

.clearfix{ //为了兼容IE6,7专有

*zoom: 1;

}

4. 父级添加双伪元素

.clearfix:before,.clearfix:after{

content: ""; //必写属性

display: table; //block块级不在一行，不行，因为浮动元素在一行

//转换成块级元素并且在一行显示

}

.clearfix:after{

clear: both; //清除浮动

}

.clearfix{

*zoom: 1;

}

*.定位

常见的网页布局

top banner main(left,right,main1~...) footer

PS切图

1.常见图片格式

jpg：色彩保留好，产品类图片。

gif：保存透明背景和动画效果，图片小动画。

png：jpg，gif优点综合，切成透明背景图片。

psd：可直接复制上面文字图片各信息，不能直接放到页面里。

2.PS使用

1.T复制psd文字

2.图层切图复制图片

1. 点击图层切图:点击导出图片->导出为png(默认原版大小)

选多个图->图层->合并图层->导出为png

沟通

2. 切片切图

切片选中区域->文件导出web->jpeg可调品质->存储->选中切片

透明背景先把背景取消->只有gif，png支持透明背景

切片后移动位置->切完换到切片选择工具

3. PS插件切图(PS完整版可用)

安装cutterman插件->web，路径，png24直接透明..->选图->(合并导出..)导出选中图层

选中含截取部分的选区->矩形截取工具截部分选区->导出选中图层

18.CSS属性书写顺序

1.布局定位属性：display/position/float/clear/visibility/overflow

2.自身属性：width/height/margin/padding/border/background

3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

4.其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient/bgc:rgba()...

19.页面布局整体思路

1.确定页面版心(可视区)w，测量得出。

2.分析页面中的行模块，每个行模块中的列模块。

3.一行中的列模块常浮动布局，先定每个列模块大小，再定位置。

4.制作HTML结构。

5.先清楚布局结构(划分成几个模块，怎么对齐，什么方式布局)

20.案例准备工作

1.创建study目录文件夹，用vscode打开此文件夹

2.在study文件夹内新建文件夹images，新建首页文件index.html,style.css

3.创建HTML骨架并在head内link引入css，写清除内外边距看是否引入成功

4.测版心，标尺w1226居中对齐，写到css公共类w里

5.逐行写，小盒子+margin

导航栏实际开发用ul>li>a写：语义清晰，避免堆砌关键字搜索引擎降权

三个文字块浮动后，想让三文字在一行浮动，文字由li，a隔开，所以应该给li加浮动，因为a是行级元素，本身就会让文字排在一行

字随多少变宽度，所以用padding自动把盒子撑开，给a设置使点其他位置也属于链接

按钮默认有边框。

行内块元素有默认缝隙。

padding增大a链接范围。

21.定位

1.使用场景

1.某元素可以自由地在一个盒子内移动，并且压住其他盒子

2.滚动窗口时，盒子是固定在屏幕的某个位置

2.组成

定位模式+边偏移

定位模式 postion: static静态/relative相对/absolute绝对/fixed固定/sticky;

边偏移 top:80px; bottom:80px; left:80px; right:80px; 定义元素相对父元素上边线的距离

子绝父相，但不是一直不变的。

1.相对定位相对它原来的位置，不脱标，原来的位置保留(主要用于限制绝对定位)

2.绝对定位相对祖元素位置，脱标。行内块特征。

3.固定定位相对于浏览器可视窗口，脱标。可看成特殊的绝对定位。行内块特征。

固定在版心右侧：left:50%;margin-left:版心宽度/2;

4.粘性定位sticky,相对/固定定位混合:浏览器可视窗口为参照点(固),占有原先位置(相)

必须添加top,bottom,left,right其中的一个才有效。兼容性差，IE不支持(大部分用JS)

是否脱标，以谁为基准移动位置。

定位的叠放次序：z-index: 整数；值相同则后来居上，不能加单位

定位的盒子才有z-index

定位中若同一个盒子既有left属性又有right属性，只执行left属性(先左后右，先上后下)

特殊：

1.加绝对定位的盒子不能通过margin:0 auto和定宽度来水平居中，应该通过left和margin-left等实现。浏览器变小也始终在中央。相对定位的盒子能实现水平居中(因为不脱标)

2.绝对定位和固定定位，和浮动类似有类似行内块属性：

添加后不用模式转换，行级可以直接设置高度宽度；块级不设置宽度默认是内容大小；脱标的盒子不会触发外边距塌陷。

3.浮动，定位(固定)因为脱离标准流，所以不会造成外边距合并。

浮动只会压住标准流的盒子，不会压住文字和图片；绝对定位和固定定位会完全压住标准流内容。(因为浮动最初的目的就是做文字环绕效果)

22.元素的显示与隐藏

如：点关闭消失，刷新回来；下拉菜单

1.display:none; 盒子和位置全看不到了 dispaly:block;还有显示元素的意思

2.visibility:hidden; 盒子看不到，位置保留

溢出显示隐藏3.overflow:visible无处理，显示/hidden隐藏超出/auto超出带滚动条/scroll滚动条

有定位的盒子，慎用隐藏(如hot)

*有图片时，一定要让图片和父盒子一样大(如果需求是并且防溢出)

23.精灵图

1.作用

写好网站放服务器里。用户访问图片发送请求给服务器，若每图发一次服务器压力大。

减少服务器接收发送请求的次数，提高页面加载速度：小图整合到一张大图中。

针对小背景图片使用。(因为插入类，产品类图片容易经常更换)

2.使用范围

给一个有大小的盒子设置背景图片。

用background-position移动背景图片x,y坐标位置(横X纵Y，禿往左上走负)

background-position: -152px -20px; //可以简写在background里

24.字体图标

1.使用场景

结构样式比较简单的小图标。方便改颜色、阴影效果、透明、旋转。

2.作用

精灵图是图片文件比较大，放大缩小会失真，图片制作完后想要更换比较复杂。

本质是文字，文字放大缩小不会失真；兼容性高。

3.步骤

1.字体图标的下载

http://icomoon.io 点IcoMoon APP;点Generate Font;Download

http://www.iconfont.cn 淘宝，阿里巴巴图标

2.字体图标的引入(引入到HTML页面中)

在下载的fonts里有.ttf字体文件，电脑默认有；需要把其他后缀字体图标文件引入到电脑中：1.把fonts文件夹粘贴到html旁边(4个文件是为了兼容)；2.把一大段代码复制到css中，不用背；。。。

3.字体图标的追加(以后添加新的小图标)

总结

1. http://icomoon.io选图标或最下Add Icons From Library...

2. 右下Generate Font;Download

3. 把下载好的fonts文件夹放在页面根目录下

4. 下载的style.css里@font-face{}放到CSS部分，引字体图标声明 font-family对应名称

5.下载的demo.html把文字□复制到html对应标签内

6. 在声明下引入的字体是下载的一堆里哪一个

@font-face{}

span{font-family: 'icomoon';} //还可以在这指定字体颜色大小等

7.字体图标追加：http://icomoon.io还是右上icomoon APP；左上import icons；选selection.json打开yes；选好下载；换成新fonts文件

25.CSS三角

矩形盒子外多等腰三角当对话框等。

宽高为0，有边框正方形盒子，三边透明一边带颜色。

为兼容行高，字体大小为0。

应用：三角对于矩形绝对定位，增加top，left其他不变。

26.常见CSS用户界面

1. 鼠标界面

cursor: default/pointer/move/text/not-allowed;

2. 表单轮廓线

默认点进去有蓝色轮廓线，最好默认去掉

input{outline: none;}

3. 防止表单域拖拽

textarea{resize: none;} //文本域也有默认蓝色轮廓，最好也去掉

<textarea></textarea>最好写在一行，否则点进会有空行。

27.vertical-align属性应用

实现图片表单和文字的垂直对齐。写在图片或表单的样式中

设置行内或行内块元素的垂直对齐方式。

vertical-align: baseline/top/middle/bottom;

28.图片底部有空白的bug

div边框和图片之间有空白。

多个img{display: block;}因为基线对齐只对于行内或行内块的图片或表格等。

或img{vertical-align: top/middle/bottom;}建议

29.溢出的文字省略号显示

1.单行

white-space: nowrap; //先强制一行显示文本，normal自动换行

overflow: hidden; //超出的部分隐藏

text-overflow: ellipsis; //用省略号代替超出的部分

一般此盒子有宽高

2.多行

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box; //弹性伸缩盒子

-webkit-line-clamp: 2; //限制在一个块元素文本的显示行数

-webkit-box-orient: vertical; //设置或检测伸缩盒对象的子元素排列方式

然后把超出省略号的行通过改盒子高度截掉。用浏览器调整的高度。

一般此盒子有宽高，兼容性差，在webkit内核可使用，建议让后台写

30.常见布局技巧

1. margin负值的运用

超细边框的盒子让右边margin=-1px压住左边，使边框粗细均匀。

对有细边框的一行盒子都加margin= -1px;即可

因为浏览器对一行html标签渲染css完再执行下一行html标签，先浮动紧贴过来，再左移，所以右边盒子比前边都多向左移动1px，使得压住多余的边框。

*.鼠标放到对应子盒子边框变色

此方法下右边框会被下一个盒子的左边框压住无法显示变色。

无定位时：把选中的盒子变成相对定位。

有定位时：把选中的盒子z-index改优先级(z-index用在不设定位的盒子不生效)

2. 文字围绕浮动的运用

左图片右文字时，可以不左右设置两个盒子，而是利用文字围绕浮动。

外有一个有宽高的父盒子，内有一个又宽高的浮动左盒子和子图片，和标准流文字。

3. 行内块的运用

页码上一页下一页，1234..共10页，到页，确定。

行内块本身有大小间距，给父盒子添加text-align: center;子可水平居中

.box内有a，让a变成行内块；父盒子text-align:center;(对内部文字,行内,行内块元素生效)

4. css三角强化

开始是四个分别设置的15px的边框。

[/]图的/]直角三角，然后压到[]靠右的上面。

1. 先【X】边框下面删掉留[V] border-bottom: 0 solid #fff;

2.把留下的变高，通过上面的角变高 border-top: 20px solid #111;

3.再把左侧去掉得[/] border-left: 0 solid #222;

4.再把上面三角改透明得彩色/] border-top: 20px solid transparent;

31、css初始化

不同浏览器对有些标签默认值不同。如京东-右键-查看网页源代码-firstcss-*~zoom

*beautify自动格式化css

HTML5新增特性

新的标签，表单，表单属性。

1.新增语义化标签

<header>头部标签

<nav>导航标签

<article>内容标签

<section>定义文档某个区域

<aside>侧边栏标签

<footer>尾部标签

标准化针对搜索引擎，使用前ie9最好先把这些元素转化成块级元素，移动端更喜欢使用这些标签。

2.新增视频标签.avi .mp4 .wmv..

src视频路径，autoplay自动播放，muted静音(谷歌设置静音后自动播放才生效)，loop循环播放，poster播放前的画面。reload不播放时是否预先加载，有自动播放是不用写。reload="auto/none"

只支持mp4,webm,ogg,不同浏览器支持不一样，尽量mp4的。

兼容性写法，了解

3.新增音频标签mp3, wav, ogg

尽量用mp3。谷歌把音频自动播放也禁用了。

4.新增input标签

新增type语义类型。验证时必须添加form表单域，点击提交按钮就可以验证表单了。

type="email" type="url" type="date" type="time" type="month" type="week" type="number" 限制用户输入，减少表单验证。type="tel" 电话type="search" 搜索框type="color"

主要number,tel,search（input：search）

5.新增表单标签属性

必须包含在form表单域里。

required="required"必填 placeholder=""提示文本 autofocus="autofocus"自动聚焦表单 autocomplete="off/on"默认显示提交内容(前提：表单有name属性且之前提交过) multiple="multiple"多选文件提交。

主要placeholder和multiple。input::placeholder可改字体颜色。

新增CSS3特性

ie9+支持，移动端优于PC端。新增选择器，盒子模型，其他特性。

1.属性选择器

input[value]{}

input[value=text]{} //重点

input[value^=tex]{} //值以tex开头

input[value$=tex]{} //值以tex结尾

input[value*=tex]{} //值含tex

如果是数字要加""，不是数字可加可不加。

类选择器，属性选择器，伪类选择器权重为10(div[]权重是11)

div.icon交集选择器是div且类名为icon的

2.结构伪类选择器

根据文档结构(兄弟，第几个)选择：

ul :first-child{} //或ul li:first-child 第一个元素在li里，父元素是ul

E :last-child{} 最后一个子元素

E :nth-child(n){}

n可以是数字，关键字，公式。

数字：E标签的第n个子元素，从1开始。 ul li:nth-child(2){}

关键字：隔行变色 E :nth-child(even偶/odd奇){}

公式：n从0开始每次加1往后计算，只能是n不能其他字母。

因为没有第0个孩子和超出部分，会忽略掉。2n 2n+1 5+n(5~) -5+n(1~5)

E :first-of-type{}

E :last-of-type{}

E :nth-of-type(n){}

E li:first-child{}会把所有的孩子都排列序号，先看:first-child把元素选出来，再看元素是否是li

E li:first-of-type{}会看指定li标签的孩子，不满足li标签不看

3.伪元素选择器

用CSS创造标签元素，简化HTML结构。

::before{} 在父元素内容的前面创建元素。(CSS2用:也可以识别)

::after{}

会通过CSS的方式创建一个在文档树找不到的行内元素，{}必须有content属性，和标签选择器一样，权重1。

4.盒子模型

有宽高的padding,border会撑大盒子。

box-sizing:"content-box/border-box"；

content-box 盒子最终大小为width+padding+border默认；

border-box 盒子最终大小为 width,盒子不在随border，padding撑大。(前提border+padding不超过width大小)，可以写在*{}里。

此时垂直居中，line-height=height要减去padding和border。

5.CSS3其他特性

1. 图片变模糊

CSS滤镜filter图片变模糊或颜色偏移。

filter: blur(5px);数越大越模糊

2. 计算盒子宽度width:calc()函数可运算

width: calc(100% - 80px); //+-*/符号的左右一定要有空格

CSS3还有动画，2D，3D新特性。

1.CSS3过渡

logo动画平移，渐变颜色，盒子升起加阴影。可以不使用flash和js。ie9+，不影响布局。

常:hover搭配使用。谁做过渡给谁加。

transtion: 要过渡的属性花费时间运动曲线(默认ease) 何时开始(延迟触发时间默认0);

transtion: all 1s ease 0.5s; //时间必须写单位s

transtion: width 1s,height 2s;

运动曲线 linear匀速 ease慢下 ease-in加速 ease-out减速 ease-in-out先加速再减速

广义HTML5=HTML5+CSS3+JavaScript mdn查询

品优购

1.项目规划

客户沟通，制定方案；签订合同；预付订金(不退，30%)；初稿审核(原型图，效果图)；前台页面设计，后端功能开发；测试验收；上线培训；后期维护。

HTML，图片，CSS，命名规范。

HTML：属性尽量值不简写，""，大小于，4空格，块级换行写，行内同行写。

CSS：书写顺序。

命名：类名小写_ 项目文件夹shoping；样式图片文件夹images；产品图片文件夹upload；样式文件夹css；字体类文件夹fonts；脚本类文件夹js

首页index.html;初始化样式文件base.css;公共样式文件common.css

*.模块化：讲一个项目按功能划分，一个功能一个模块互不影响，重复使用，更换方便。

如：头部尾部在不同页面一样，可写到common.css,再link进来

common.css:头部尾部，版心宽度，清除浮动，页面文字颜色...

*.favicon图标

步骤：1.制作favicon图标；2.favicon图标放在网站的根目录下；3.HTML引入图标

1:图标切成png格式；借助第三方网站png转成ico http://www.bitbug.net/比特虫

3:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />/直接复制网站的

找图标：网站根目录/favicon.ico https://www.jd.com/favicon.ico

*.SEO搜索引擎优化，提升网站排名。页面必须有title,description,keyword标签符合SEO优化。复制SEO的关键词。

<title>品优购</title>网站名(产品名)-网站的介绍

首页

1.shortcut行高会继承，但只能让文本等垂直居中，盒子不能

2.声明字体图标让common.css找到fonts路径，不是index.html，要更换路径

列表页

注册页

发布上线

拓展篇

1.服务器：本地服务器，远程服务器

如果把电脑配成本地服务器，局域网的同学就可以访问自己的网站了 ajax讲

远程谁都可以通过域名访问，如www.mi.com

(电脑下小皮面板不用配置，当服务器)

http://free.3v.do/王若琳

欢迎您使用免费空间，本免费空间仅支持HTML和ASP程序，如需更多功能可购买收费空间！
您的网站地址：http://wrl.3vhost.work
上传方法：免费空间-free.3v.do-帮助：免费空间如何用FTP上传文件访问方法：免费空间-free.3v.do-帮助：免费空间默认首页及上传后的访问方法

激活ftp

二 C3之转换

1.2D转换

转换实现元素的位移，旋转，缩放。

1.transform:translate(x,y); //100px 100px向右下移动的目标点相比初始0，0的坐标

transform:translate(100px,0); //不能省略

translform:translateX(100px); //单个写

最大的优点：不会影响其他盒子的位置

2.transform:translate(50%);

里面参数可以用%，移动的距离是盒子自身的宽高来对比的。

定位要计算，但是transform:translate()不会

对行内元素没有效果

2.rotate旋转

transform:rotate(度数);

度数单位deg不能省略，正值顺时针

补充：

过度写到本身上，谁做过度给谁加。

transition:all 1s;

3.1>

>可以先正方形旋转45度，然后只要右边两条边

不用下载，比>更好控制大小

3.2旋转中心点

transform-origin:x y; 和bgp一样，空格隔开，默认50%,50%中心；可以设置成top center left，左上开始50px,50px

鼠标放上，图片上下移动使用

hover里的deg：是转到多少deg，不是转了多少deg

对行内元素没有效果

*。overflow:hidden;不占位置

3.缩放scale

transform:scale(x,y);

x轴y轴方向放大多少倍，所以里面跟数字，不是单位，2是两倍；可以放大缩小

xy只写一个数，是宽度和高度等比例缩放

1.直接用宽高放大缩小盒子：上边框不移动，左右下缩放，影响其他盒子布局

2.用transform:scale(x,y);放大缩小盒子：不会影响其他盒子，可以设置中心点

4.2D转换综合写法（不会影响其他盒子）

transform:translate(50px,%) rotate(180deg) scale(1.1);

旋转会导致坐标轴改变，平移写到最前面

二 css3动画

更多控制，可以连续自动播放，(而2d要hover)

1.定义动画

keyframes关键帧%可以写多个，有时0%可以省略；里面的百分比是总时间的划分。

三 3D

重点：3d位移transform:translate3D(x,y,z坐标)，3d旋转transform:rotate3D(deg)。

透视perspective，3d呈现transform-style

1.transform:translate3d(x,y,zpx);

transform:translateX(常%。可px)；

transform:translateY();

transform:translateZ(常px);

transform:的都会后面把前面覆盖，可以连写

transform:translateX(px) translateY(%);

1.translateZ要通过透视perspective才能看到效果。

2.属性名中X,Y,Z大写，3d小写。

3.使用3d连写时，不能省略，没有的轴的值要写0

2.透视

人眼离物体(透视)：近大远小（只看到的），单位px

z是translateZ，d是透视，物体显示大小由两者共同决定.

但是一般父元素同一个透视，通过translateZ调整不同盒子不同大小。

透视写在被观察元素的祖先盒子上面

z为负值，结合实际考虑。默认0

3.3d旋转

transform:rotate3d(1，0，0，45deg);//沿着x轴旋转45°，具体方向左手准则

transform:translate(1,1,0,45deg);沿着x，y轴矢量方向旋转45度。

transform:rotateX(deg);单杠，默认延盒子中心。+透视

deg正值，上面变小往后翻。

transform:rotateY(deg);

transform:rotateZ(deg);

和2d旋转没啥区别，抽奖转盘

翻转方向左手准则（大拇指指向该轴正方向）：deg正值旋转的方向

4.3d呈现transform-style:默认子元素不开启3d空间flat，需要设置。

transform-style:preserve-3d;只能直接加给父元素

浏览器私有前缀

最后一行写没私有前缀的总的代码

pink-css标签相关推荐

div css标记,前端初学者必学的div加css标签
原标题:前端初学者必学的div加css标签今天给大家分享前端初学者必须要学习的标签,这些标签你都会了吗? DIV加css标签页头:header 登录条:loginBar 标志:logo 侧栏:si ...
史上最全的HTML和CSS标签常用命名规则
文件夹主要建立以下文件夹: 1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存 ...
[css] 标签、class和id选择器三者的区别是什么？分别在什么时候用？
[css] 标签.class和id选择器三者的区别是什么?分别在什么时候用? 标签选择器:tag{} 选取对应的标签例如 a span div class选择器:.class-name{} 选取对应c ...
html a标签 onload,动态加载script和css标签的onload问题
在firefox下,动态加载script标签和css标签,是可以简单地监听onload事件的,但在ie下,监听onload事件无效.为了解决这个问题,可以改用监听onreadystatechange, ...
CSS 标签诡异添加 injected stylesheet
injected stylesheet css的一个异常标签,今天出现一个非常诡异的事情,就是在css标签里面,我并没有添加 injected stylesheet 这类的属性反而在有些电脑上会自 ...
目前最新《脑动力 html+css标签速查效率手册[刘丽霞] 》
介绍: HTML是所有网页制作技术的核心和基础,也是每个网页制作者必须掌握的基本知识.CSS是用于控制网页内容显示效果的一种标记语言,可以制作更美观的页面.两者在网页设计中不可或缺. <脑动力: ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS标签选择器(二)
一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...
CSS——标签选择器，类选择器
文章目录选择器(重点) CSS基础选择器标签选择器(元素选择器) 类选择器类选择器小案例小案例制作一个简易Google图标选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要 ...

pink-css标签

pink-css标签相关推荐

最新文章

热门文章