![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css学习笔记与练习
abc630727719
这个作者很懒,什么都没留下…
展开
-
css学习笔记:变形平移
transform基于本身进行偏移,不会影响其他元素的布局可选值:translateX()水平方向的平移,可以是像素或百分比translateY()垂直方向的平稳,可以是像素或百分比translateZ()调整z轴的视距,需要在html元素中设置默认视距perspectiverotateX() 以X轴为中心进行旋转,单位为像素(px)或角度(deg)rotateY()以...原创 2020-04-11 21:01:29 · 224 阅读 · 0 评论 -
css学习笔记:动画效果
animation动画效果,在设置动画时需要先创建关键帧。/* @keyframes 动画名 */@keyframes test{ /* 开始位置值 */ form{ background-position: 0 0; } /* 结束位置值 */ to{ background-position: 600p...原创 2020-04-02 14:19:28 · 165 阅读 · 0 评论 -
css学习笔记:过渡
transition 过渡属性:transition-property设置过渡效果属性的名称,基本上所有的属性都可以过渡多个属性之间用,分隔,也可以用all代替transition-duration设置过渡的时长,单位s或mstransition-timing-function设置过渡的速度曲线.可行值:ease默认,开始速度慢,然后变快,减速结束ease-in加速...原创 2020-04-01 22:26:13 · 157 阅读 · 0 评论 -
css学习笔记:背景
background设置元素的背景background-color设置背景颜色background-color:red;background-image设置背景图片background-image:url('./src/bg.jpeg');背景颜色与背景图片可以同时设置background-repeat当图片不足以填充元素时,设置元素的填充方式可选值:repea...原创 2020-03-27 09:56:04 · 113 阅读 · 0 评论 -
css作业:京东头部导航
目标:成品:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...原创 2020-03-26 16:43:15 · 511 阅读 · 0 评论 -
css练习:用户登录界面
目标:html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-03-25 13:14:21 · 809 阅读 · 1 评论 -
行高与文字处理
line-height文字占有的实际高度字体框一个字可以看成一个小框,font-size实际上设置的字体框的高度行高会在字体框的上下平均分布设置行高的方式:像素数值以字体大小的倍数设置行高默认的行高为1.33line-height: 100px;line-height: 2;font-weight 字重设置字体的加粗效果属性值:bold(加粗)、norm...原创 2020-03-25 19:04:18 · 197 阅读 · 0 评论 -
css笔记:字体与图标字体
Fontcolor设置字体的颜色font-size设置字体大小font-family设置字体库中的字体可选值:serif 衬线字体sans-serif 非衬线字体monospace等宽字体,每个字母的宽度都是相同的字体可以设置多个,中间用’,'隔开,前面的字体优先使用。当用户电脑中前面的字体不存在时,按顺序使用的后面的字体@font-face也可以将...原创 2020-03-25 10:08:05 · 152 阅读 · 0 评论 -
css布局作业:京东首页轮播图
效果:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-03-24 19:32:13 · 1951 阅读 · 0 评论 -
绝对定位元素的水平与垂直布局
水平布局开启绝对定位的元素进行水平布局,必须设置left与right属性.box{ position:absolute; left:0; right:0;}等式与以前一样。发生过度约束,当有auto值时,自动进行调整,以满足等式。否则margin-right自动补足。可以设置auto值的属性margin、width、left、rightleft、right默认为auto...原创 2020-03-24 15:44:06 · 690 阅读 · 0 评论 -
css定位属性
position设置元素的定位方式属性值static在文档流中默认的状态relative相对定位在文档流中占据原本的位置。根据原本的位置定位,用水平和垂直偏移量来改变元素的位置。不设置偏移量不改变位置。改变后的元素提高了一个层级position:relative;absolute绝对定位从文档流中脱离,原本的位置不保留 用水平和垂直偏移量来改变元素的位置。不设...原创 2020-03-23 22:47:17 · 96 阅读 · 0 评论 -
高度塌陷与BFC、清除浮动影响
高度塌陷当父元素没有设置高度时,父元素的高度是由子元素内容撑开。当子元素设置浮动后,就会脱离文档流。父元素的高度就会为0,这就是造成高度塌陷。下面的元素就会上移,这就会打乱页面的布局,为了防止这种情况我们需要对元素设置BFCBFC (bloce format content)块级格式化内容css隐藏的一个属性,开启BFC元素将变成一个独立的布局区域。开启BFC的特点:父元素不会...原创 2020-03-23 19:33:06 · 258 阅读 · 0 评论 -
css布局作业使用float布局:w3school导航
目标:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2020-03-23 17:48:11 · 227 阅读 · 0 评论 -
css作业使用display布局:w3school导航
目标:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2020-03-23 17:35:16 · 285 阅读 · 0 评论 -
css作业:网易新闻模块
目标:html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-03-23 17:08:06 · 598 阅读 · 0 评论 -
css作业:京东导航条
目标:html源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-03-23 16:59:24 · 296 阅读 · 0 评论 -
css作业:京东图片列表
作业效果:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...原创 2020-03-23 16:30:37 · 336 阅读 · 0 评论 -
浮动与脱离文档流的特点
float 浮动通过浮动可以使元素脱离文档流,处于页面的上方。使元素水平排列,多用于水平布局float的属性值:none 默认,不浮动left 向左侧浮动right 向右侧浮动知识点设置浮动后元素将从文档流中脱离,不占据文档流的位置。下面文档流中的元素会自动向上移动。设置浮动后元素可以向父元素左...原创 2020-03-22 22:38:35 · 371 阅读 · 0 评论 -
css属性与盒子大小
常用属性background-color 设置背景颜色background-color: #F4F4F4;line-height 设置文字在元素中垂直居中,将值设置为height的值height:24px;line-height:24px;font-size 设置文字大小font-size:14px;color 设置文字颜色color:red;text-decora...原创 2020-03-22 20:48:53 · 2344 阅读 · 0 评论 -
css水平布局与垂直布局
水平布局盒子模型水平方向的布局宽度为父类的全部宽度水平方向盒子由以下几个自属性构成:外边距左 + 边框左 + 内边距左 + 内容 + 内边距右 + 边框右 + 外边距右 = 父类全部宽度当上面等式不不足时,则称为:过渡约束。默认浏览器会设置margin-right的值,自动补足当以上属性其中有值为auto时,浏览器会将该属性的值设置为剩余值当有多个auto值时,width为aut...原创 2020-03-22 11:10:49 · 2732 阅读 · 1 评论 -
css盒子模型
盒子模型盒子组成content 内容区width、height设置的是内容区的大小padding 内边距内边距的设置会影响盒子的大小内边距有四个方向padding-toppadding-rightpadding-bottompadding-leftpadding-top: 10px;padding-right: 10px;padding-bottom: 10px;...原创 2020-03-21 23:17:15 · 77 阅读 · 0 评论 -
css选择器的权重与文档流
元素的继承子元素会继承父元素的某些样式。如:size、color选择器权重继承 < * < 元素选择器 < 子选择器 < 类选择器 < id选择器 < 内联样式长度单位px 像素% 相对于父类元素的百分比em 相对于元素的字体大小来计...原创 2020-03-21 22:16:44 · 118 阅读 · 0 评论 -
超链接的伪类与伪元素
超链接的伪类link用来设置没有访问过的链接,正常的链接visited用来设置访问过的链接a:link{ color: green; font-size: 20px;}a:visited{ color:hotpink;}以上两种只能在超链接中使用hover用来设置鼠标移入元素的状态active用来设置鼠标按下时元素的状态a:hover{...原创 2020-03-21 17:19:42 · 593 阅读 · 0 评论 -
css选择器
简单选择器元素选择器根据标签名来选中指定元素语法:标签名{}例:p{},h1{},div{}id选择器通过元素的id属性来确定指定元素id是唯一的,区别大小写语法:#id属性值 {}例:#left{}、#top{}class选择器通过元素的class属性来确定指定元素class属性值可以重复,可以通过class属性值来为元素分组设置样式。一个元素可以指定多个clas...原创 2020-03-21 16:42:53 · 149 阅读 · 0 评论 -
css样式的使用方式
层叠样式表内联样式<p style="color:red; font-size:20px;">今天天气真不错</p>内部样式将样式写在head标签内<style> p{ color: red; }</style>外部样式表通过link标签进行引用。开发中推荐使用<link rel="styl...原创 2020-03-20 23:16:52 · 96 阅读 · 0 评论