H5入门基础
tianfen_auster
这个作者很懒,什么都没留下…
展开
-
em+rem+sass
emem:相对单位,它需要一个参考属性。当前元素的字体大小。remrem:相对单位 root em。参考值为:HTML根标签的font-size的值。iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半iPhoneX 375px 187.5rem布局的原理动态修改html根标签中的font-size值。实现方式:1.通过js2.通过vw。百分比布局缺点:1.计算百分数不方便。2.多层嵌套时使用不方便原创 2020-12-24 20:52:48 · 108 阅读 · 1 评论 -
布局+媒体查询
布局方式PC端-三栏布局圣杯双飞翼弹性盒子原创 2020-12-23 20:52:17 · 149 阅读 · 0 评论 -
弹性盒子
弹性盒子垂直居中:传统:绝对定位。flex:flexible box(弹性盒子)。可以轻松控制元素的排列,对齐和顺序。定义使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局。【注】一般是使用display:flex;display:inline-flex极少用。display:fle:如果没有为父元素设置宽,默认为100%;display:inline-flex:如果没有设置宽,,默认为所有子元素的宽的和原创 2020-12-21 20:52:23 · 381 阅读 · 0 评论 -
动画+滤镜
动画之前使用过渡遇到的一些问题:1.需要重复过渡效果时无法实现2.只能通过hover等方式才能出发。动画:1.通过**@keyframs定义**动画。2.在指定元素中,通过animation属性来调用动画。1.定义动画格式:@keyframes 动画名 { from{ /* 初始帧 */ } to{ /* 结束帧 */ }}【注】动画名不要起关键字,最好见名知意原创 2020-12-17 20:48:33 · 147 阅读 · 0 评论 -
3D旋转+位移+透视
3D旋转transform: rotate3D(x,y,z,deg);x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,deg表示旋转的角度 .box { transform: rotate3D(1,1,1,180deg); }rorateX,X轴旋转rorateY,Y轴旋转rorateZ, Z轴旋转 .box:hover { transform: rotateX(180deg); transform: rota原创 2020-12-17 13:27:44 · 273 阅读 · 1 评论 -
transition过渡+transform属性+2D+3D旋转、位移、透视
w3c会员:各大互联网巨头它设定了整个平台的规则,监督整个过程。浏览器前缀谷歌 苹果 -webkit-火狐 -moz-IE -ms-欧朋 -o-过渡transition 过渡之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须ransition-du原创 2020-12-15 19:48:45 · 670 阅读 · 0 评论 -
清除浮动+常用定位+压盖效果
一、清除浮动方法1给父元素设置高度eg:不推荐理由:不能把高度固定死,不适合做自适应的效果。方法2方法3方法4方法5方法6方法7二、伪元素三、ifont图标四、定位1.相对定位2绝对定位3.固定定位4.z-index五、...原创 2020-12-11 20:50:56 · 234 阅读 · 0 评论 -
内外边距+盒模型+浮动
一、盒子盒子:容器盒子模型:英文:box model。最常见的盒子是;div 、span盒子中的区域:content1.宽 width px content2.高 height px content3.内边距 padding4.外边距 margin5.边框 border注意 ; 标准盒模型的宽和高与盒子真实占有的宽高不是一个概念。盒子真实占有的宽:内容的宽+左padding+右padding+左边框+右边框盒子真实占有的高:内容的高+上padding+下padd原创 2020-12-09 20:46:17 · 225 阅读 · 0 评论 -
CSS入门
css1.继承继承:有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性。继承性是从当前元素开始,一直到最小的元素。后代元素能够继承来自祖先元素的文字样式。这些属性包括:color,text-开头,line-开头的,font-开头的。关于盒子、定位、布局的属性,不能被继承。...原创 2020-12-08 20:46:51 · 117 阅读 · 0 评论 -
常见选择器
选择器一、元素选择器1.标签选择器选择器的功能:选中要添加样式的标签元素。标签选择器通过标签名直接选择相应的标签。不管有多复杂的嵌套关系,标签的位置就算藏得很深,依然可以被标签选择器命中。(1)格式标签名{ 声明; }eg: div{ color: red; } p{ background-color: sandybrown; } a{原创 2020-12-07 20:38:21 · 766 阅读 · 1 评论 -
表单+CSS
一、表单1.概念用来收集用户输入或选择的信息,并提交到服务器上。html表单是由网页上可以提供用户输入和选择的一些控件(表单元素)组成的。eg:网站注册:轻注册重验证2.表单元素元素:HTML中,是从开始标签到结束标签中的所有代码。表单元素指的是不同类型的控件。 输入框,密码框,复选框,提交按钮等。3.表单格式表单格式: <form> h1 p div span 表单元素 </form>原创 2020-12-06 22:29:01 · 649 阅读 · 0 评论 -
列表+链接+表格笔记
一.列表1.组成:dl 、dt 、dd,三个标签参与。dl:定义一个定义列表dt:定义标题(列表项)dd:对标题的说明和解释嵌套关系:dl>dt+dd.格式: <dl> <dt></dt> <dd></dd> </dl>2.知识点:dt与dd是同级一个dt可以用多个dd来解释。dd是解释上面最近的一个dt。3. 应用场景:需要原创 2020-12-03 20:35:44 · 118 阅读 · 0 评论