HTML
关注
分享
扫一扫
小白6402
这个作者很懒，什么都没留下…
展开
-
纯css实现翻书效果
前言：在做一些自己网站的时候，如何封装自己的作品链接，如果直接放，感觉太冰冷，所以需要包装啊，用一本本书，封装自己的作品链接，优雅而不失礼，当然你也可以做一些表白的女朋友的效果，打开书籍，看到的是她。emm,话不多说先看效果图：这是页面加载出来的效果图。这是打开书本后的效果，看你自己改哦你也可以这样：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-25 17:29:16 · 2096 阅读 · 2 评论 -
对BFC的理解和使用
对BFC(Block formatting context)深度理解直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.常见的定位方案### 1.普通流1.元素按照其在HTML中的先后位置至上而下进行布局2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行3.所有元素默认都是普通流定位### 2.浮动元素首先按照普通流的位置出现原创 2021-10-09 23:36:23 · 109 阅读 · 0 评论 -
html实现好看的照片墙
照片可缩放可移动效果：鼠标没进入之前的效果鼠标悬浮在某一张图片之上当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把js代码去掉就好了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-09-24 09:24:16 · 7313 阅读 · 1 评论 -
好看实用的六个html登录页面
本人找到了六个html登录页面，感觉还行，也挺好看的。1.效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-09-21 12:34:39 · 218983 阅读 · 42 评论 -
H5中实现拖拽技术
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。拖动事件：dragstart、drag、dragend放置事件：dragenter、dragover、drop拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过even原创 2021-09-14 15:24:16 · 8565 阅读 · 1 评论 -
Canvas绘制时钟
效果图：源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-09-14 11:24:42 · 67 阅读 · 0 评论 -
H5新增video标签的常用属性
video在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用 constrols是控制条 loop是循环播放 autoplay是自动播放poster=’’ 封面 放封面地址 muted静音方法 play原创 2021-09-13 11:24:58 · 1655 阅读 · 0 评论 -
Html 实现手风琴效果
html简单实现手风琴效果这是加载页面的效果这是鼠标悬停的效果鼠标悬停哪一张图片也会相对应的展开（下面是代码，图片自己找几张放上去，路劲修改成自己的就可以了）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam原创 2021-09-10 16:43:58 · 6626 阅读 · 1 评论 -
js简单实现精美轮播图效果
精美轮播效果效果图展示：是不是觉得还是挺好看的。1.首先建一个文档简单的html文档2.引入下面的style样式 body{ background-color: rgb(119,115, 110); } ul{ width: 800px; height: 200px; position:absolute; padding: 0px;原创 2021-09-10 16:20:36 · 1044 阅读 · 2 评论