<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
转载
2021-08-22 18:40:00
729阅读
2评论
如何使用CSS画一个圆圈?圆圈中间写字?
原创
2022-10-29 00:26:03
726阅读
# 如何实现一个类似iOS的圆圈日历
在这篇文章中,我将带领你一步一步地实现一个CSS圆圈日历,类似于iOS的样式。我们将利用HTML和CSS来完成这个项目。以下是整个开发流程的概览。
## 开发流程
| 步骤 | 描述 |
|-------|-------------------------|
| 步骤 1 | 设定基本的HTML结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin: 2
原创
2021-08-04 15:29:25
3473阅读
简单分析一下,这个交互效果主要有两个核心:借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本人简单的说一下如何使用纯 CSS 实现类似的交互效果,以及,借助 JavaScript 绑定鼠标事件,快速还原上述效果。纯 CSS 实现元素的 3D 旋转如果不借助 JavaScript,仅仅只是 CSS,如何实现类似的 3D 旋转效果呢?这里会运用到一种名为正反旋转相消或者是正负旋
居中显示模态框 <style> body { height:1200px; } #alert-box { display:table; width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; z-index ...
转载
2021-09-13 18:26:00
258阅读
2评论
框模型,其中的细节问题,需要再查阅资料。CSS内边距、边框、外边距 CSS框模型定义了元素框处理元素内容、内边距、边框 和 外边距 的方式。 内边距、边框和外边距默认值都是0。许多元素由用户代理样式表设置外边距和内边距,可以通过将元素的 margin 和 p
原创
2022-09-08 16:57:12
267阅读
???? 作者主页:Java李杨勇???? 简介:Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示:文末获取源码代码目录:主要代码实现:CSS样式:body { display: flex; align-items: center; justify-content: center; min-heig
原创
2021-09-13 15:57:54
1308阅读
???? 作者主页:Java李杨勇???? 简介:Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示:文末获取源码代码目录:主要代码实现:
原创
2022-02-17 17:44:18
382阅读
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <title>css聊天框</title> <style> * { margin: 0; padding: 0; ...
原创
2022-07-06 16:34:36
1224阅读
非本人原创,此为本人导师代码,在此整理分析。1、遮蔽层,弹框弹出时,页面变灰。CSS部分.overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);}2、定时提示小弹框,页面垂直居中显示CSS部分 /*t
原创
2015-07-24 11:23:22
719阅读
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。一、CSS 框模型概述元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距...
转载
2020-02-05 15:24:00
78阅读
2评论
第一章、基本的圆角框 原创:冰极峰 转载请注明出处 2009年11月30日10:19:34 序言:在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的
转载
2009-11-30 17:40:00
113阅读
框模型图示: 解释:元素的最内部分是实际内容 直接包围内容的是内边距 内边距的边缘是边框 边框外是外边距 (外边框默认是透明的,不会遮盖其后的任何元素)。注意:背景应用与内部内容、内边距和边框组成的区域。很多浏览器会自动设置内外边距,所以需要自
原创
2014-06-25 21:52:49
600阅读
1. 小程序整个屏幕弹窗:.cl-panel-box {
position: fixed;
right: 0;
top: -100vh;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 999;
background: #ffffff;
transition: 0.4s;
}
.
原创
2023-10-01 23:39:31
219阅读
文章目录前言一、盒子隐藏概述二、display1.赋予display none属性2.未加display:none;效果展示2.加display:none;效果展示三、visibility1.visibility: hidden;2.未加visibility: hidden;效果展示3.加visibility: hidden;效果展示四、overflow1.代码示例:2.不加这个属性效果展示3.
转载
2024-01-28 06:00:03
66阅读
如果在苹果手机上记东西的话,恐怕很多人都会选择备忘录。因为这是苹果iOS系统自带的一款记事备忘小工具,无需下载安装,在iPhone桌面上找到它,点开就可以随手记录了,非常方便!只不过,苹果备忘录没有提醒功能,这让很多人很是着急。这不,同事小李就想在他的苹果iPhone 6Plus手机上对备忘录内容设置铃声提醒呢!而他找了半天,也没找到提醒设置。还好在其他同事的提醒下,才知道:苹果备忘录是没有提醒功
转载
2023-07-26 15:57:18
232阅读
第一讲:程序设计基本方法Pythonby赵老师考纲考点01程序设计语言程序设计语言概述程序设计语言是计算机能够理解和识别用户操作意图的一种交互体系,它按照特定规则组织计算机指令,使计算机能够自动进行各种运算处理。按照程序设计语言规则组织起来的一组计算机指令称为计算机程序。高级编程语言根据执行机制不同可分成两类:静态语言和脚本语言,静态语言采用编译方式执行,脚本语言采用解释方式执行。例如,C语言是静
转载
2023-08-22 15:50:07
0阅读
一.浮动
float :
浮动的盒子不占原来的位置,其下方的盒子会上移
父盒子会发生塌陷现象。同一级盒子right浮动,同级左边的盒子需要左浮动,right浮动的盒子才能上来
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
二.定位
relative : 设置相对定位的盒子,相对自己原来的位置移动,
转载
2024-04-20 20:55:04
63阅读
代码目录:
主要代码实现:
CSS样式:
html,
body {
height: 100%;
}
html {
background-image: url('../img/sample.jpg');
background-position: center center;
background-repeat: no-repeat;
原创
2021-09-17 10:38:49
1985阅读