#h5+css3
zhang_ntmare
前端开发攻城狮,主攻可视化
展开
-
flex弹性盒子布局3
flex弹性盒子布局3-实例效果图思路:总体分为background,head,body,foot四部分1、background:video标签直接导入视频,设置设置z-index使视频成为背景(z-index大的在上层,可以为负)设置动画时,autoplay时播放属性,loop是循环属性autoplay 属性规定一旦音频就绪马上开始播放。如果设置该属性,则视频将循环播放。loop 属性规定当视频结束后将重新开始播放。如果设置了该属性,音频将自动播放。<video autoplay原创 2020-11-08 22:37:36 · 756 阅读 · 0 评论 -
flex弹性盒子布局2
flex弹性盒子布局2-子元素属性续1总结了一下父容器的各项属性,然后这里梳理一下子元素的一些属性排序语法order:<integer>integer 为一个整数,可以为负数,数值小的排在前面(也可以解决右对齐之后顺序出现的问题).first { -webkit-order: -1; order: -1;}<div class="flex-container"> <div class="flex-item">flex item 1原创 2020-11-08 17:00:44 · 204 阅读 · 0 评论 -
felx弹性盒子布局1
flex弹性盒子布局1-知识梳理用多了相对绝对布局,今天这个实例实在是让我头大得很,然后用了flex原来写几十分钟的布局。十分钟不到搞定了,泪流满面,这东西真的太好用了,哭,恨自己发现的迟设置flex布局:display:flex;flex的属性:Ⅰ、flex-direction语法:flex-direction: row | row-reverse | column | column-reverserow:横向从左到右排列(左对齐),默认的排列方式。row-reverse:反转横向排列(右原创 2020-11-08 16:36:45 · 305 阅读 · 0 评论 -
css动画-3d旋转盒子
left:0; right:0; top:0; bottom:0; margin:auto;会使text居中,如果text没有宽高,则会继承父集的宽高。适合body 内的遮罩 3d动画记得设置3d,transform-style: preserve-3d; 重置3d中心,transform-origin:center center;原创 2020-11-07 22:16:55 · 3180 阅读 · 1 评论 -
css3百叶窗切换效果关于css代码顺序出现的错误
- 第一次遇见css代码顺序出错导致的问题!切记!我是写代码的时候发现的关于ul li:hover和ul:hover liul:hover li{ width: 30px;}ul li:hover{ width: 500px;}第一个是划过ul时 li宽变30px第二个是划过ul里面的li时 宽变500px也就是是说假定有三个元素,划过其中一个时,这个元素的width会变成500px而另外的两个元素width会变成30px效果是这样:⭐!所以这里的代码顺序很重要,如果把li:ho原创 2020-11-07 11:26:31 · 137 阅读 · 0 评论 -
html5+css3-图片切换(js和label)
html5+css3-css动画实例2html5+css3-css动画实例2点击切换背景图的一个效果1、css实现css的label签可以实现2、js实现点击监听事件原创 2020-11-06 23:12:27 · 1266 阅读 · 0 评论 -
web前端入门之html+css实例-css动画1
web前端入门之html+css实例-css动画①学习笔记1、linear-gradient()linear-gradient(to right,red,yellow,blue,green);;linearground(方向,色1,色2,色3…,末色)相当于:linear-gradient(to right,red 0%,yellow 33.3%,blue 66.6%,green 99.9%);默认方法,颜色均分渐变:linear-gradient(to right,red 10%,yello原创 2020-11-06 11:12:30 · 208 阅读 · 0 评论 -
web前端入门之html+css实例①
web前端之html+css实例①去年之前学过一点web前端开发,过了一年,忘得差不多了,又想找一份前端的offer,努力从头复习一下,一起进步(ps:本科在校生),适合小白,大佬勿喷以下相关实例均是最原始的版本,后续优化有想法会做了再发一个热搜推荐自己的思路:1、四个div盒子,背景层一个,标题一个,书两个2、css记得初始化重置,不然浏览器顶端会留空白,如3、第一个盒子大小颜色;第二个盒子引入图和标题文字,设置宽高,布局左对齐;第三个盒子设置宽高,引入图片文字分两列,图片边框,图片和原创 2020-11-04 13:56:44 · 736 阅读 · 0 评论 -
web前端入门之html+css实例②
web前端之html+css实例②以下相关实例均是最原始的版本,后续优化有想法会做了再发表格表单效果图:个人思路1、背景里外两块2、输入框两个,文本框二个3、单项选择按钮,多项选择4、提交按钮...原创 2020-11-04 17:22:58 · 257 阅读 · 0 评论 -
web前端入门之html+css实例③
web前端入门之html+css实例③实例三:思路:1、头部一块,一个大盒子原创 2020-11-04 22:44:27 · 239 阅读 · 0 评论 -
web前端入门之html+css实例④之浮动(float与inline-block)
web前端入门之html+css实例④实例④浮动练习思路:1、背景+内含块2、顶端红线+head标题红线是图片,直接导入即可,也可以自己绘制head为图+文字两部分3、图标+文本*5因为样式都是重复的,所以直接写一个就好html<div id="one"> <img src="img/信息管家.gif" > <p>信息管家</p></div>css:.content img{ width: 95px; hei原创 2020-11-05 15:29:46 · 534 阅读 · 0 评论 -
web前端入门之html+css实例⑤
web前端入门之html+css实例④实例⑤:列表练习思路效果图:总结:1、再次练习了一下浮动布局,加深一下理解2、关于无序列表,如何删除前面的样式list-style: none;与之相关,如何修改li前的黑点:1、定义为图片li{list-style: url("1.png") outside circle;}2、改颜色li{color:#f00;}具体实例可参照博客:伪类模仿 li 前面的圆点及各种符号...原创 2020-11-05 17:30:19 · 151 阅读 · 0 评论