适合练习CSS的精美小案例
weixin_47207556
这个作者很懒,什么都没留下…
展开
-
js分割文本
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分割文本</title> <style> *{ box-sizing: border-box; } body{ height: 100vh; .原创 2021-12-03 17:51:20 · 1450 阅读 · 0 评论 -
css小练习----提问app
效果图代码1.label标签的for属性用来关联同一文档中另一元素的id属性。详见MDN<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回答问题</title> <style> *{ box-sizing: border-box; }原创 2021-12-02 12:30:22 · 855 阅读 · 0 评论 -
CSS练习——进度条
等待真的是最磨人的~除了练习什么也干不进去。使用到了伪元素,可以熟悉伪元素的使用。注意的点:伪元素的content总是忘加代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> *{ box-sizing: border-b.原创 2021-11-03 15:19:50 · 171 阅读 · 0 评论 -
js实现简单记事本
用的localstorage存储。先上效果图这里确实有很多容易忘的细节,还有需要理解的代码。不过配的颜色还挺满意的,这里是代码<!DocType html><html><head> <title>记事本</title> <meta charset="UTF-8"> <link rel="stylesheet" href="../iconfont/font_2905111_ufj9v4xzgl/ic原创 2021-11-01 17:35:53 · 888 阅读 · 1 评论 -
手机页面导航案例+iconfont的使用
CSS小练习,先看效果图通过这个练习还熟悉了iconfont图标的使用。步骤如下1.到iconfont搜索想要的图片,加入购物车;2.选中所有需要下载的图标(最好将所有需要的图标放在一个项目中),点击下载3.下载得到的是一个压缩包,解压缩拿到文件夹。文件夹中内容如下图4.在你需要使用图标的文件内引入iconfont样式文档,上图红线文档。5.添加span标签,class设置为iconfont 以及你要使用的图标的名字。图标名字可以在文件夹的demo_index页面中查看。6.设置span标原创 2021-10-31 15:54:01 · 183 阅读 · 0 评论 -
加载动画一
之前在B站收藏了一个加载动画合集,但是一直忘记看了。今天先写另外一个加载动画。先上效果图这是一个简单的加载动画,正好熟悉一下之前学习伪元素和动画<!DocType html><html><head> <meta charset="UTF-8"> <title>加载动画</title> <style> *{ box-sizing: border-box;原创 2021-10-29 22:23:50 · 62 阅读 · 0 评论 -
会扩展的图片
先上效果图上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>会展开的画</title> <style> *{ box-sizing: border-box; } body{ display: flex;原创 2021-10-23 22:26:18 · 52 阅读 · 0 评论 -
热点图热点图
热点的城市是自己动手加的,然后找的图片上就没有海南了。不怪我,不是故意的。效果图粘完图发现速度设置的快了animation时间调大就好了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>热点图</title> <style> body{ background-co原创 2021-10-19 21:26:12 · 71 阅读 · 0 评论 -
日历 ——练习CSS结构伪类选择器
今天拿到一个日历的练习题,试着实现了一下。题目照片如下:然后下面是我最后实现的感觉还可以,第一次拿着图实现。主要是练习结构伪类选择器。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rili</title> <style> *{ box-sizing:原创 2021-10-01 18:09:51 · 203 阅读 · 0 评论 -
js实现todoList
原来用js也能写出来很漂亮的todoList实现了todolist的添加,切换完成状态,删除功能。数据是存储在localStorgage上的因此刷新,或者重新进入数据都是存在的。思路:将每个li节点用js对象来模拟,监听form,提交时添加li元素并追加到ul列表中。为每个创建的li绑定事件,切换状态。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-09-30 11:26:26 · 1491 阅读 · 1 评论 -
喝水小案例
先上效果图感觉github上这个系列是专门练习flex布局的,而不是css整个。每个案例基本都是flex布局踩得坑:大杯子的样式cup中align不要设置center,overflow设置为hidden<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>喝水</title> <style>原创 2021-09-17 18:05:15 · 70 阅读 · 0 评论 -
火车移动小球长大
我不想断更啊,我也不想水的,但是最近笔试太多了。唉,菜是原罪起因是笔试的时候遇到了一个题让实现小球运动以及长大的(人家是一起的)。我就想去看看动画这块的东西,然后继感受到JS的酷之后,我又被CSS震撼到了,是我没见识了。代码很少,我就不分开了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>火车移动和小球放大</title&g原创 2021-09-08 23:02:10 · 83 阅读 · 0 评论 -
五彩斑斓板
那天看到一个贼好看的小案例,一看代码还挺简单,马上我就抄了一遍今天自己写出来了。非常简单。先上效果图,是不是很酷炫代码index<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>色彩斑斓</title> <link rel="stylesheet" href="style.css"></he原创 2021-09-03 22:49:16 · 63 阅读 · 0 评论 -
js轮播图-简易粗糙版
粗糙简易版轮播图实现效果代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title> <style> *{ box-sizing: border-box; } body{ display: fl原创 2021-08-31 12:03:47 · 68 阅读 · 0 评论 -
canvas实现画板
Canvas API提供了一个js和html元素来绘制图形。案例中涉及的canvas的方法主要有canvasEl.getContext():获取元素的内容canvas提供了三种方法绘制矩形:fillRect(x,yxwidth,height)方法说明:用来绘制填充的矩形填充颜色使用fillstyle属性指定参数说明:x:矩形起点的x轴坐标y:矩形起点的y轴坐标width:矩形的宽height:矩形的高strokeRect(x,y,width,height)方法说明:用来绘制原创 2021-08-28 22:02:32 · 403 阅读 · 0 评论