![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 60
里面详细记录了css的学习笔记、重点、特效、练习、项目
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
小黄呀呀呀
整理的笔记要点主要是记录给自己看的,涉及原创可以私信我修改,谢谢!
展开
-
图片水平、垂直居中
1)、给img设display:inline-block;然后父级text-align:center;2)、给img设display:block; 同时设margin: 0 auto;解法2:定位 + transform: translate(-50%,-50%);【不推荐】另:当已知图片大小时也可以把translate换成margin负值,这里不推荐使用。...转载 2022-06-20 17:23:12 · 1563 阅读 · 0 评论 -
移动web开发项目2: 携程网(移动端、flex布局)
携程网链接:http://m.ctrip.com1.技术选型方案:我们采取单独制作移动页面方案技术:布局采取flex布局2.搭建相关文件夹3.设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href原创 2021-02-16 17:20:41 · 390 阅读 · 0 评论 -
移动web开发重点4:实现中间的盒子随着大小,自由的伸缩(流式布局、flex布局)
实现中间的盒子随着大小,自由的伸缩用flex的方法将最外面的盒子的大小设置为60%,然后将第一个和第三个盒子的宽度和高度设置好,然后父亲盒子的剩余部分就是中间部分,再用flex:1,将父亲盒子的剩余部分分成1份,给第二个盒子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2021-02-15 23:52:20 · 393 阅读 · 0 评论 -
移动web开发重点3:justify-content:flex-end和flex-direction: row-reverse的区别
justify-content:flex-end主轴方向的子元素全部贴在主轴的最右边,子元素之间的排列顺序是不变的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-15 23:51:48 · 1235 阅读 · 0 评论 -
移动web开发重点2:实现盒子水平垂直居中(flex布局和定位的两种方法)
实现盒子水平垂直居中1:用flex布局这里只写一种情况,就是设置主轴是x,侧轴是y,然后设置主轴上的子元素的排列顺序居中,也就是justify-content:center;再设置侧轴行的子元素的排列顺序,这是考虑的是单行的,也就是align-items:center<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-02-15 23:51:21 · 433 阅读 · 0 评论 -
css重点18: 经过图片时,上面显示遮罩的盒子,并有文字
经过图片时,上面显示遮罩的盒子,并有文字html <div class="imgss"> <div> <div> <img src="img/n1.jpg" alt=""> <span>COOLRAIN LABO</span> </div> <div> <i原创 2020-11-07 19:39:23 · 325 阅读 · 0 评论 -
css的重点17:flex实现图片贴底的效果
实现所有的图片贴底的效果代码: display: flex; align-items: flex-end;注意:刚开始出错,是因为没有将margin设置成0原创 2020-11-07 18:43:24 · 259 阅读 · 0 评论 -
css重点16:设置Input:chechkbox的样式改成圆角 修改里面的内容
html<input type="checkbox" />css input[type="checkbox"] { width: 1.64rem; height: 1.64rem; display: inline-block; text-align: center; vertical-align: baseline; line-height: 1转载 2020-09-15 10:46:52 · 1754 阅读 · 0 评论 -
css重点18:经过图片的时候,会显示一个灰色的盒子
<div class="one"> <div class="box">22</div> <img src="images/s.gif" alt=""> </div> .one{ position: relative; } .box{ position: absolute; top: 0; ...原创 2020-09-03 17:55:35 · 192 阅读 · 0 评论 -
css重点17:background-position和清除默认的margin和padding
1、background-position分两种情况:重复【是整体位置的变化】background:url('images/mess.png') repeat left center;不重复【就是这个背景图在这个盒子里的位置】 background:url('images/mess.png') no-repeat left center;2、清除默认的margin和padding【每次写的时候都要先把这个写出来!!】*{margin:0;padding:0;}...原创 2020-09-03 17:24:22 · 393 阅读 · 0 评论 -
css重点16:margin:auto只对块级元素有效,如果不是块级元素那么转为块级元素
margin:auto只对块级元素有效,如果是行内块元素(img)或者行内元素时,需要转为块级元素,才能有效。原创 2020-05-18 21:13:29 · 739 阅读 · 0 评论 -
css重点15:品优购项目的注意事项
1. 网站ico图标1). 使用ico图标首先把favicon.ico 这个图标放到根目录下。再html里面, head 之间 引入 代码。<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 2). 制作ico图标我们可以自己做的图片,转换为 ico图标,以便放到我们站点里面。方法步骤:首先把我们想要的切成图片。要把图片转换为 ico 图标,我们借助于第三方转换网站:原创 2020-05-10 23:52:17 · 127 阅读 · 0 评论 -
css项目8:品优购的项目
1、index.html<!DOCTYPE html><html><head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title> <meta name="description" content="品优购JD.COM-专业的综合网上原创 2020-05-10 22:58:50 · 772 阅读 · 0 评论 -
css重点14:过渡(transition)和表单获取焦点(focus)
1、focus和hover的区别focus:是表单获取焦点之后,也就是点击表单时的hover:只是经过而已,不一定要点2、实现将Input表单获取焦点时,向两侧缓慢移动注意点:(1)对input一定要写宽和高,之前没写,没成功。(2)如果要向两侧缓慢移动,需要将这个表单居中对齐。必须居中对齐<!DOCTYPE html><html lang="en">&l...原创 2020-05-06 23:53:21 · 532 阅读 · 0 评论 -
css重点13:什么时候使用float,行内块,定位
前阵子float用的太多了,动不动就是float,导致我都快忘了行内块了,下面我自己总结了一下什么时候使用float,什么时候使用行内块1、float在一行里面,有多个板块,并且在两边,或者一边或2、行内块如果长度不确定,就转为行内块,因为text-align:center可以将行内元素和行内块元素居中显示。如果长度不确定,用了float的话,再用margin,添加内容的话,整个排...原创 2020-05-06 23:16:42 · 1419 阅读 · 0 评论 -
css重点12:浮动的特性、清除浮动的方法
之前搞页面的时候,搞多了,就一直用标准流,浮动,和定位。然后用的时候我总是会float:left来将两个块级放在一行里显示,显然,我只记住了float这个特点,等到搞页面遇到一个问题的时候,我突然想起来float还有一个特点:不占空间。这篇主要重点来讲一下,之前找那篇文章我找了好久才找到。1、标准流、浮动、定位(1)标准流div、h标签等块级元素(2)浮动float不占据空间,如果没...原创 2020-05-06 22:25:00 · 119 阅读 · 0 评论 -
css重点11:三角形、圆形、扁圆形、盒子阴影、半透明背景、半透明边框、渐变色背景、背景上边深下边淡、颜色渐变色的总结
1、三角形1)将盒子的宽高设置为0,使边框的宽度大一点,就会形成多个三角形2)当想要某个三角形时,只可以将其余方向边框的颜色变成透明色多个三角形.sanjiao { width: 0px; height: 0px; border: 10px solid; border-color: green red purple yellow; }某个方向上的三角形....原创 2020-05-03 15:59:49 · 396 阅读 · 0 评论 -
css重点10:透明边框和透明小圆
1、实现图片左右两边的透明圆框1)首先将这个盒子设置为绝对定位(因为绝对定位不占位置,可以覆盖在其他的表面),父亲设置相对定位2)一般圆框是半圆的。如果想要整圆:border-radius: 50%;如果不是整圆(border-radius有顺序:左上角、右上角、右下角、左下角)2、如果想要多个小圆1)ul>li的组合2)要给定li的width和height,然后border-r...原创 2020-05-03 15:39:57 · 530 阅读 · 0 评论 -
css重点9:li盒子放不进div盒子时的问题,并且消除重叠边框
1、li放不进去的问题最外面的div盒子长度固定,最里面的li盒子的长度也固定,如何将li放在div盒子里。(想要实现的效果是1行4个)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <...原创 2020-05-03 15:05:13 · 1071 阅读 · 0 评论 -
css重点8:水平居中、垂直居中、绝对定位的居中的问题
1、块级盒子的水平居中显示margin: auto;2、盒子中 文本水平居中text-align: center3、盒子中 文本垂直居中行高等于高line-height: height4、vertical-align 垂直居中 (只对行内元素和行内块元素)只对行内元素和行内块元素有效。如果想要块级盒子也能垂直居中显示,可以转为行内块元素3、绝对定位时的居中显示思想:因为是...原创 2020-05-02 11:13:07 · 243 阅读 · 0 评论 -
css项目7:边框实现三角形、精灵技术、出现半透明盒子、滑动门的练习
1、京东三角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { position: relative; wi...原创 2020-05-02 10:49:43 · 173 阅读 · 0 评论 -
css项目6:定位position的一些项目
1、哈根达斯<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>哈根达斯</title> <style> .box { position: relative; width: 310px; heigh...原创 2020-05-02 10:41:41 · 188 阅读 · 0 评论 -
css重点7:元素的隐藏、界面样式、vertical-align 垂直对齐、溢出的文字省略号显示、精灵技术、滑动门、三角形margin负值之美
1、元素的隐藏(1)display ----隐藏后不占据空间(2)visibility —隐藏后占据空间(3)overflow —只对超出的文本前两种常用(4)、当经过a链接时,a里面的元素进行的操作.box a:hover .mask { display:block;}//鼠标经过a时,里面的mask显示出来2、css用户界面样式2.1 鼠标样式curs...原创 2020-05-02 10:33:23 · 277 阅读 · 0 评论 -
css笔记6:css的一些高级技巧
CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)...原创 2020-05-02 09:37:37 · 117 阅读 · 0 评论 -
css重点6:position定位时的一些重点
1、四种模式自己的理解:(1)static(静态):相当于none,基本不怎么用,可忽略(2)relative(相对):1)根据自身的现在的位置开始移动2)移动后,仍然占据空间,一般父盒子会采用这个,保证下面的标准流不会占据他的位置。(3)absolute(绝对):1)要求父盒子也要定位,一般采用relative相对模式,子盒子一般采用absolute绝对模式。如果父盒子不定位,...原创 2020-04-30 22:17:16 · 155 阅读 · 0 评论 -
css笔记5:position的4种模式
定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从普通流...原创 2020-04-30 21:30:43 · 195 阅读 · 0 评论 -
css重点5:在线制作页面的步骤
1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。pink老师:取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件...原创 2020-04-30 14:20:09 · 165 阅读 · 0 评论 -
css项目5:学成网首页制作(div+css)一个大页面!!!
1、index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学成网首页</title> <link rel="stylesheet" href="style.css"></head><...原创 2020-04-30 14:18:59 · 903 阅读 · 1 评论 -
css重点4:父盒子嵌套子盒子时,设置外边距margin时的塌陷问题
1、什么是塌陷<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; height:...原创 2020-04-29 22:01:50 · 775 阅读 · 1 评论 -
css项目4:关于float的简单项目
1、小米的简单页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0...原创 2020-04-29 16:00:36 · 99 阅读 · 0 评论 -
css重点3:关于float的使用
1、css的3种布局机制(1)标准流(也就是之前学的块级和行级元素)行内元素:span、a等块级元素:div、p、h1~h6等(2)float主要是将标准流浮起来,实现多个块级元素在一行显示(之前使用block:line-height行内块实现,但是缺点是块与块之间是有空隙的,所以采用float)(3)定位下节整理,还未学到2、css的口诀(1)浮和漏设置为floa...原创 2020-04-29 15:41:07 · 323 阅读 · 0 评论 -
css笔记4: CSS 的布局的三种机制(标准流、浮动、定位)之浮动
1. 浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通...原创 2020-04-29 11:20:38 · 190 阅读 · 0 评论 -
css重点2:padding margin的使用
1、padding和margin以上图为例(实现上述图的2种方式,分别以padding 和margin来实现):思路:(1)如果想要padding实现,首先要知道padding的意思,Padding是内边距的意思,也就是内容物距离我这个盒子的距离,里面的内容物是G,所以设置R的内边距是20px;(2)如果想要margin实现,首先要知道margin的意思,margin是外边距的意思,也就...原创 2020-04-27 15:45:17 · 114 阅读 · 0 评论 -
css笔记3: css 盒子模型、浮动 、定位(margin padding很重要!!!)
盒子模型(CSS重点)目标:理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质看透网页布局的本质:首先利用CSS设置...原创 2020-04-26 10:55:11 · 210 阅读 · 0 评论 -
css项目3::关于padding margin的使用
1、鲁能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; }...原创 2020-04-26 10:36:05 · 393 阅读 · 0 评论 -
css笔记2:复合选择器、display、line-height、background、css的三大特性、注释
1. CSS复合选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的1.1 后代选择器(重点)中间用空格,子孙后代概念:后代选择器又称为包含选择器作用:用来选择元素或元素组的子...原创 2020-04-23 19:40:20 · 153 阅读 · 0 评论 -
css的选择器的权重的练习6个
方法:(1)修改颜色时,先判断目标元素是否被选中(2)在选中的里面,来依据权重,进行计算注意:div a 表示的是div里的子孙(儿子和孙子)1、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&g...原创 2020-04-23 19:39:50 · 219 阅读 · 0 评论 -
css项目2:使用display:inline-block变成行内块的项目
1、导航栏(1)改变的是背景颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a{ display: inline-b...原创 2020-04-23 19:11:30 · 183 阅读 · 1 评论 -
css项目1:文本大小、颜色的简单项目
1、google<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .blue { font-size: 100px; color: blue; } ...原创 2020-04-23 18:59:10 · 230 阅读 · 0 评论 -
css笔记1:css的初识、基本选择器、文字文本样式
1. 引入CSS样式表(书写位置)1.1 行内式(内联样式)概念: 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式其基本语法格式如下:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都拥有style属性,用来设置行内式。案例:<d...原创 2020-04-23 18:00:03 · 326 阅读 · 0 评论