h5+css3
关注
分享
扫一扫
一个蛋挞
这个作者很懒，什么都没留下…
展开
-
html+css设置背景图移动以及人物行走的动画效果
下面展示一些 内联代码片。<style> * { margin: 0; padding: 0; } img { display: block; } .contenter { /* 宽度设定,会出现空白 */ height: 100vh; background-image原创 2021-02-08 21:12:15 · 5266 阅读 · 0 评论 -
行内元素和块级元素设置宽高和边距时需要注意的问题
问题：大家会发现使用一些标签时设置其宽高和边距有些是有效的，有些又是无效的。原因：这些标签分为行内元素和块级元素，对宽高和边距的设置有一定的要求。就拿行内元素span和块级元素div举例。span标签设置宽高和边距时需要注意的是：1、span标签设置其上下边距无效，设置左右边距有效，且其左右边距会叠加，设置宽高无效，仅靠内容撑开宽高。2、如果想让其设置的上下边距有效，可以设置其样式属性display: block或者display: inline-block;让其变成块级元素或者行内块级元素，这样设置的原创 2021-01-30 08:59:51 · 1588 阅读 · 0 评论 -
div用百分比设置高度无效
div用百分比设置高度无效原因：当body里没有设置高度时，直接用百分比设置div的高度是无效的，只能依靠div自身的内容撑开。但是，在这时用绝对值单位（px）设置div的高度是有效的。下面展示一些 内联代码片。 body { font-size: 30px; /* 设置body占满视口区，vh为视口区的单位*/ height: 100vh; } div { width:原创 2021-01-29 20:26:36 · 1020 阅读 · 1 评论 -
div的水平垂直居中
div水平垂直居中的方法多种多样图示：下面展示一些 内联代码片。<body> <div id="parent"> <div id="child"></div> </div></body>方法一：使用flex布局 <style> * { margin: 0; padding: 0; }原创 2020-11-20 23:20:13 · 255 阅读 · 0 评论 -
div元素定位的五种方法及其区别
方法一：默认定位，也就是静态定位，不需要设置定位属性方法二：固定定位，相对于视口区进行定位。position:fiexd区别： 固定在视口区的某一位置， 原先位置不保留，会被后面的元素占有， 如果没有设置定位属性，在原来位置定位。方法三：相对定位，相对于它自己原来的位置进行定位。 position: relative;区别：有定位属性时，原先位置保留，不会被后面的元素占有，不脱离文档流；没有定位属性时，默认在当前位置。方法四：绝对定位，相对于离它最近的定位祖先元素进行定位。 positi原创 2020-11-21 15:34:52 · 9399 阅读 · 0 评论 -
div显示与隐藏的三种方法及其区别
方法一：设置样式属性opacity /* 隐藏 */ opacity: 0; /* 显示 */ opacity: 1;区别：隐藏的时候，位置保留， 元素还在 ，只是不可见。方法二：设置样式display /* 隐藏 */ display: none; /* 显示 */ display: block;区别：隐藏的时候，位置不保留， 元素不在 ，且不可见。方法三：设置样式属性 /* 隐藏*/ visibility: hidden; /* 显示*/ visibility: vi原创 2020-11-21 13:59:55 · 1410 阅读 · 0 评论 -
html页面的基本布局
注意：页面不会随着屏幕大小的改变而移动位置，而是正常的大小伸缩，在布局时要注意清除浮动的影响，用 clear: both清除兄弟元素之间的影响，用overflow: hidden清除父子元素之间的影响，注意，overflow: hidden放在父元素的样式设置中。<style> * { margin: 0; padding: 0; } body { min-width:原创 2020-11-20 10:16:26 · 2531 阅读 · 0 评论 -
HTML+CSS画三角
HTML+CSS画三角图片: <style> * { margin: 0; padding: 0; } #parent { margin: 0 auto; width: 0; height: 0; border-left: 50px solid transparent; bor原创 2020-11-20 09:25:44 · 145 阅读 · 0 评论