![](https://img-blog.csdnimg.cn/f052e930a0d54461801f139b564d8d43.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css案例
主要搜集了一些个人在平时的学习过程中所练习和遇到的一些案例
小白小白从不日白
这个作者很懒,什么都没留下…
展开
-
flex布局仿知乎导航
这里主要就是综合利用flex布局来进行开发的这里主要分为了四个区域,分别是logo区域、导航区域、搜索区域、登录区域为了能够实现可以随着屏幕的缩放导航可以进行自动收缩,这里用到了 min-width以及max-width对于头部的整个区域我们采用flex布局,这样就可以让四个区域都在同一水平显示,并且设置子项垂直居中:.header-wrapper { margin: 0 auto; height: 52px; min-width: 10原创 2022-04-13 23:42:40 · 1197 阅读 · 0 评论 -
clip-path 实现文字聚光灯效果
效果图:clip-path 简介:概念:使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。语法:/* Keyword values */clip-path: none;/* <clip-source> values */clip-path: url(resources.svg#c1);/* <geometry-box> values */clip-path: margin-box;clip-path: border-b.原创 2022-04-05 11:28:53 · 436 阅读 · 0 评论 -
炫彩流光按钮
做这个的话主要就是利用了基础的html css以及css3的渐变背景以及关键帧动画基本结构如下: <a href="" class="btn">button</a>基本样式如下:* { margin: 0; padding: 0;}a { text-decoration: none; color: #fff;}body { height: 100vh; display: flex; /*原创 2022-04-05 10:54:58 · 577 阅读 · 0 评论 -
3D立体相册
这个主要就是利用 CSS3 的 transform 属性来做的这里先定义一个父级容器以及6个子元素作为6个面 <div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div cla...原创 2022-04-04 17:50:40 · 350 阅读 · 0 评论 -
DNA旋转特效
var()函数在开始这个案例之前先做一下铺垫吧算是用过 less 或者 sass 的人都知道,在这两个预编译里是可以定义变量、函数、混合等,css呢,在后面也推出了var()函数,官网的解释如下:具体语法如下:var( <custom-property-name> , <declaration-value> )第一个参数是要替换的自定义属性的名称(必须)第二个参数用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值(可选)..原创 2022-04-04 15:18:57 · 446 阅读 · 0 评论 -
气泡浮动背景特效
首先,定义一个最外层的容器,以及10个气泡标签,结构大致如下: <div class="container"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div&...原创 2022-04-04 14:28:32 · 1306 阅读 · 2 评论 -
仿小米下拉导航
对于这一部分大致分为三个区域:左侧的logo区域、导航区域、右侧的搜索区域左侧的 logo 区域就是两张图片左侧的导航区域主要用ul li实现,这里需要注意的是第一个li里放的是一张动图右侧的搜索区域就是一个input标签以及button按钮,还有就是模拟当鼠标点击到搜索框后会弹出一个搜索历史其基本机构如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2022-04-03 23:42:55 · 919 阅读 · 0 评论 -
利用定位实现仿小米导航
通过分析不难发现该导航主要分为两部分:左侧导航、右侧导航这里主要就是利用 ul li来实现左侧导航左浮动、右侧导航右浮动导航里面的 li 左浮动再将二维码以及购物车提示框直接写在相应的li的下面,然后利用子绝父相的原理,通过定位来实现当鼠标移动到li上时,就显示出来,反之隐藏对于二维码这一部分我们给了一个明确的宽度和高度,当将二维码以及对应的说明文字都放入该框之后,我们将其高度改为0,这样也就相当于隐藏了,当鼠标移动到 “下载APP”对应的li上时再将其高度设为原来的高度,这...原创 2022-04-03 22:08:54 · 452 阅读 · 0 评论 -
垂直导航栏
垂直导航栏这一类导航栏在很多网站上都是很常见的,比如京东因此可以说是一个前端人员必须要会的吧在这里目前给出了两种方式去实现:第一种就是利用html+css实现,这里模仿的是小米官网的垂直导航、第二种方式就是利用html+css+js实现不管是第一种还是第二种主要都是利用定位来实现的先来看第一种吧先准备相关素材以及一些基础的css样式类,素材这里省略,基础的样式类如下:* { margin: 0; padding: 0;}ul,li { list-s原创 2022-04-02 23:29:16 · 6030 阅读 · 0 评论 -
赛比朋克效果按钮
<!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"> <title&g...原创 2022-04-01 19:25:08 · 494 阅读 · 0 评论 -
充电水滴效果
对于这个的实现主要采用了 html css css3,进行设计的其大致布局结构如下:这里总共有五个div构成,最外层的容器、3个水滴、最底部的一个圆圈容器用于显示数据以及显示文本的span结构: <div class="container"> <!-- 三个水滴 --> <div class="droplet"></div> <div class="droplet">...原创 2022-04-01 10:54:24 · 396 阅读 · 0 评论 -
响应式卡片悬停效果
效果如下:首先要做的就是先考虑清楚布局效果,这里采用上下布局,上面是图片,下面则是图片的一些说明性文本考虑到复用性这里主要利用ul li 进行布局大致的布局如下: <ul> <li> <div class="container"> <div class="img"> <.原创 2022-03-31 13:43:09 · 1268 阅读 · 0 评论 -
H5新特性--日历插件的使用案例
1.引入日历插件的步骤:引入schedule.css文件,放在页面的起始位置 引入alicdn字体文件,设置左右切换按钮的样式<linkrel="stylesheet"href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css"> 引入schedule.js文件2.使用日历插件:在html页面中设置一个div,作为日历插件的容器<divclass=...原创 2021-07-18 09:26:45 · 2856 阅读 · 2 评论 -
canvas之图片无缝滚动
原理及分析:这个案例的重点就在于如何弥补图片移动之后的空白部分,这里需要用到canvas之图片绘制的相关知识,主要需要用到:ctx.drawImage(img对象,裁切x,裁切y,裁切w,裁切h,绘制x,绘制y,绘制w,绘制h) 也就是你差多少,我就裁剪多少给你补上 要注意的是这个案例只涉及到了图片在x轴方向上的移动,跟y轴没有关系 canvas { border: 1px solid } <canvas width="288" hei原创 2021-07-17 10:03:16 · 1261 阅读 · 0 评论 -
H5新特新--canvas之刮刮乐案例
原理及思路分析:首先在“刮刮乐”的底层放置两张图片,一张是中奖的、一张是没中的,然后利用随机数给定一个中奖率。例如,当达到百分之多少时,即为中奖,那么此时就应该显示中奖的那张图片,反之显示未中奖的图片 然后利用canvas给图片增加一个遮罩层,以此来模拟现实中的刮奖效果 再者利用鼠标的按下事件、移动事件以及抬起事件,当鼠标按下并移动时,则利用canvas的擦除也就是clearRect()来进行模拟 最后为了防止当鼠标抬起时,在屏幕上滑动也能实现“刮奖”效果,在这里我们需要清除,也就是当鼠标抬起时,原创 2021-07-17 08:55:23 · 832 阅读 · 1 评论 -
inline-block
inline-block:像文本一样排block元素 没有清除浮动等问题 需要处理间隙示例:.container { width: 800px; height: 200px; /* 解决由于字体大小导致的间隙问题 方式1 */ font-size: 0; } .lef.原创 2021-07-15 20:47:06 · 91 阅读 · 0 评论 -
三栏布局实现的原理
思路:利用浮动布局,左右部分分别左右浮动,但是如果按照常规的左中右这种写法会发现右边的div区域会出现对不齐的情况,那是因为浮动的元素是尽量向上靠的,但是如果按照左中右这种写法,那么右边的元素是无法绕过中间的元素的,因此我们可以将左中右改为左右中,即可解决问题代码: .container { width: 800px; height: 200px; } .left {原创 2021-07-15 17:45:33 · 183 阅读 · 0 评论 -
文字折行-
文字折行:overflow-wrap通用换行控制:属性值:normal:允许内容顶开或溢出指定的容器边界。break-word:内容将在边界内换行。如果需要,单词内部允许断行word-break针对多字节文字:属性值:normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。break-all:该行为与亚洲语言的normal相同。...原创 2021-07-14 16:10:58 · 415 阅读 · 0 评论 -
CSS3--有趣的背景小案例
公共部分: body { background-color: yellow; } .c1 { height: 90px; } <div class="c1"></div> <div class="c2"></div>A: .c2 { h.原创 2021-07-13 17:12:03 · 185 阅读 · 0 评论 -
canvas之小球动画
原理及分析:首先,利用canvas先绘制一个一定半径的球 其次,要注意在小球运动的过程中,小球的x坐标和y坐标是实时都在变化的,因此在绘制小球的时候就不能将其写死 再者,要明白在浏览器上:向右运动是x轴的正方向,向下运动是y轴的正方向;因此在设置小球在x轴和y轴上的运行速度时需要注意 最后,需要设置边界值:当小球在x轴上运动到小于它的半径时,此时应该向右运动了;当小球在x轴上运动到宽度-半径时就应该向左运动;当小球在y轴上运动到高度-半径时,就应该向上运动了;当小球在y轴上运动到小于等于半径时就应原创 2021-07-17 09:18:34 · 630 阅读 · 1 评论 -
rem小案例--表格小案例
table { /* 以1000px为基准 */ width: 5.26rem; height: 0.75rem; font-size: 0.15rem; text-align: center; margin: 0 auto; } tr:nth-child(1) { height: 0.22.原创 2021-07-18 08:22:57 · 100 阅读 · 0 评论 -
canvs之多个小球运动
这个案例的原理及分析和上一个:canvas之小球动画 是一样的;只不过在这里小球的运动速度、小球的半径以及小球的颜色我们都设置为了随机而已 canvas { border: 1px solid }<canvas width="400" height="300">您的浏览器不支持canvas标签</canvas> <script> var mycanvas = document.query原创 2021-07-17 09:40:52 · 343 阅读 · 0 评论 -
checkbox小案例
<div class="checkbox"> <input type="checkbox" id="handsome"/> <label for="handsome">我很帅</label> </div> .checkbox{ } .checkbox input{ display: none; } .c..原创 2021-07-14 16:28:00 · 178 阅读 · 0 评论 -
clip-path的奇思妙想
clip-path:对容器进行裁剪常见几何图形自定义路径使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏公共部分: .container { width: 400px; height: 300px; border: 1px solid red; background: url(./panda.j...原创 2021-07-17 07:59:57 · 144 阅读 · 0 评论 -
background的奇思妙想
示例1: .container { margin: 200px 200px; } .i { width: 20px; height: 20px; background: url(./background.png) no-repeat; background-size: 20px 40px; transitio原创 2021-07-17 08:00:08 · 82 阅读 · 0 评论 -
border-radius的奇思妙想
公共部分: .container { width: 100px; height: 100px; margin: 100px auto; background-color: #f40; }<div class="container"></div>示例1:扇形.container{ border-top-left-radius: 100px;原创 2021-07-17 08:00:32 · 89 阅读 · 0 评论 -
box-shadow小案例
.container { position: relative; width: 36px; height: 36px; border-radius: 50%; margin: 300px auto; background-color: #C63D01; /* box-shadow: x偏移 y偏移 模糊度 扩展 颜色; */ ..原创 2021-07-17 08:00:46 · 190 阅读 · 0 评论 -
下拉菜单中小箭头的几种实现方案
公共部分: <style> /* 公共部分开始 */ /* .dropdown */ .dropdown { position: relative; } .dropdown-toggle { position: relative; z-index: 2; }原创 2021-05-15 20:42:39 · 3056 阅读 · 0 评论 -
导航栏小竖线三种实现方式
话不多说,咱门直接上代码:<style> *{ margin: 0; padding: 0; } a { text-decoration: none; color: #555; } /* 方式1 边框实现法*/ /* div { height: 40px; width: 240px; margin: 20px auto; background:原创 2021-04-21 21:26:27 · 1491 阅读 · 0 评论 -
二级菜单
原理:其核心就是两层ul进行嵌套当鼠标移动到一级菜单时,其对应的二级菜单自动展开下面我们来看具体的代码:<div class="menu-box"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">课程大纲</a> <ul> <li> <a href="#原创 2021-04-21 19:05:06 · 7358 阅读 · 0 评论 -
三级菜单
这是我在做完了一个二级菜单过后,突发奇想想尝试做一个三级菜单,然后在csdn上恰巧看到了几个不错的三级菜单,于是就学着尝试着设计了一个(该案例并非原创)。思路:其html布局就是三层ul嵌套。首先设计出一级菜单,大致效果如下图:其次,设计二级菜单,也就是当鼠标移到一级菜单的li元素上时,二级菜单自动展开,其效果大致如下:最后,当鼠标移动到二级菜单的li元素上时,其对应的三级菜单自动展开,大致效果如下:最后,附上源代码<!DOCTYPE html><html lan翻译 2021-04-21 18:53:22 · 292 阅读 · 0 评论 -
常见的一些css图形
下面是我自己平时整理和制作的一些比较常见的一些css图形,仅供参考和学习!!!下面我们就直接上代码了:<!-- 正方形 --><div class="square"></div><!-- 长方形 --><div class="rectangle"></div><!-- 圆形 --><div class="circle"></div><!-- 椭圆形 -->&l原创 2021-04-23 19:11:41 · 322 阅读 · 0 评论 -
css实现旋转的小箭头
思路:先给div元素设置相对定位再给div的伪元素设置绝对定位,然后将其调整到相应的位置然后再利用c3里面的旋转知识,制作一个倒立的小箭头最后,当鼠标移到小三角上时,小三角旋转225度代码如下:<div></div><style> div { position: relative; width: 249px; height: 35px; border: 1px solid #ccc; margin: 0 auto; } di原创 2021-04-21 20:43:18 · 3316 阅读 · 0 评论 -
垂直导航栏JS版
1.概述对于该案例静态部分主要利用了无序列表、自定义列表以及定位第一部分:首先定义一个容器,为其父类其次书写内容部分,使得内容的总高度为100%,也就是与父元素的高度相等再者利用百分比来平均分配,使每个小的子类的高度总和为100%,这样设计的目的也就是为了更好的、更灵活的平均分配父类的高度最后关于里面的小图标就利用定位来实现;样式在这里就不去叙述了接下来直接上代码,看结果<div class="wrapper"> <nav class="side-nav" id="原创 2021-04-14 16:20:35 · 1835 阅读 · 0 评论 -
下拉菜单
关于下拉菜单这里就不去过多的阐述了,实现的方法呢其实也有很多,这里就主要给出两种吧,一种是纯css实现,一种是利用js实现公共部分: <div class="nav-site"> <div class="container"> <!-- 右侧导航 --> <ul class="fr"> <li class="dropdown fl">原创 2021-05-08 10:00:24 · 209 阅读 · 0 评论 -
利用星星进行评分
在这里有两种实现方式,一种是纯css去实现,但是我们会发现,不管怎样,只要点击了,最后都会有一个星星是被选中的;另一种方法就是利用js去实现,那么就可以避免css中遇到的小bug.下面我们就直接上代码吧!1、css实现* { margin: 0; padding: 0; box-sizing: border-box; list-style: none;}body { display: flex; /* 主轴方向居中对齐 */ jus原创 2021-05-07 22:52:44 · 242 阅读 · 2 评论