HTML/CSS
每一天,每一步
相信自己,你可以的
展开
-
图片大小自适应 css
要实现图片大小自适应,可以使用CSS的max-width和height属性,并将width设置为100%。这样,图片会根据父元素的大小自动调整大小,但不会超过原始大小。原创 2024-07-22 16:37:55 · 114 阅读 · 0 评论 -
css给文字设置背景色
【代码】css给文字设置背景色。原创 2024-05-17 16:07:32 · 670 阅读 · 0 评论 -
flex布局子元素的宽度与父元素的宽度一致了,怎么办?子元素是行内元素,想要子元素的实际长度为其宽度
flex布局子元素的宽度与父元素的宽度一致了,怎么办?子元素是行内元素,想要子元素的实际长度为其宽度。给flex元素设置align-items: flex-start;原创 2024-05-17 16:05:57 · 179 阅读 · 0 评论 -
css实现伪类三角形气泡框 带边框
【代码】css实现带三角形的边框。原创 2024-01-22 11:07:51 · 807 阅读 · 0 评论 -
iconfont字体的引用
iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。4. 点击右侧的使用帮助,页面下拉可以看到Unicode、font-class、symbol三种引用方式的使用步骤,按照步骤操作即可。官网:giconfont-阿里巴巴矢量图标库。2. 选择想要使用的图标,添加入库。3. 打开库,将图标添加至项目。1. 搜索图标,如:首页。原创 2023-06-09 16:05:13 · 260 阅读 · 0 评论 -
替换URL中{}大括号包含的占位符参数
【代码】替换URL中{}大括号包含的占位符参数。原创 2023-05-16 10:19:52 · 497 阅读 · 0 评论 -
css隐藏右侧滚动条 但是还能继续滚动
子元素设置宽度比父级宽一点,把滚动条撑出去。父级设置overflow: hidden;原创 2023-05-16 10:11:04 · 729 阅读 · 0 评论 -
DOM中的scroll属性
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: red; .原创 2021-08-29 16:26:24 · 640 阅读 · 0 评论 -
CSS3 @keyframes动画
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*animation: boxMo.原创 2021-08-16 18:28:19 · 64 阅读 · 0 评论 -
原生js实现倒计时
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 300px; height: 200px; margin: 200px auto; text-align: center; } p { color: orang.原创 2021-08-07 14:16:40 · 91 阅读 · 0 评论 -
原生js重复执行定时器—setInterval
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消" id="btn2"> &.原创 2021-08-05 22:44:56 · 723 阅读 · 0 评论 -
原生js删除提示文本框(操作已有DOM元素)隔一段时间后自动消失-setTimeout
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 150px; height: 50px; line-height: 50px; background-color: pink; margin: 200px auto;.原创 2021-08-05 22:41:22 · 222 阅读 · 0 评论 -
原生js删除提示文本框(创建元素)隔一段时间后自动消失-setTimeout
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="删除" id="btn"></body><script> var btn = document.getEl.原创 2021-08-04 21:41:31 · 298 阅读 · 0 评论 -
原生js的setTimeout定时和clearTimeout清除定时器
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消" id="btn2"> &.原创 2021-08-04 21:38:12 · 1096 阅读 · 0 评论 -
icomoon矢量图标字体的下载和使用
官网:https://icomoon.io/下载步骤如下:下载后的压缩包icomoon-v1.0注意保存,以方便后续添加其他矢量图标字体。解压缩后的使用步骤如下:将解压缩后的fonts文件夹放入项目文件夹中;打开解压缩后的style.css文件,全选复制到项目引用的样式表中,修改@font-face样式中url路径,正确获取到步骤1中fonts文件夹中的文件给html中引用图标字体的标签追加class,class名为步骤2中style.css文件种:before前的class名;或者打开解压原创 2021-04-13 22:58:06 · 209 阅读 · 0 评论 -
双飞翼布局
圣杯布局:左、右栏宽度固定,中间栏宽度自适应,优先加载中间栏。 先中间栏,再左右栏;中间栏宽度设为100%。双飞翼布局在圣杯布局基础上优化代码。HTML代码如下:<div class="container"> <div class="main"> <div class="main_w">中间栏</div> <!-- 加父级 --> </div> <div class="left">左边栏</div>原创 2021-04-10 18:24:30 · 66 阅读 · 0 评论 -
圣杯布局
圣杯布局:左、右栏宽度固定,中间栏宽度自适应,优先加载中间栏。 先中间栏,再左右栏;中间栏宽度设为100%。HTML代码如下:<div class="container"> <div class="main">中间栏</div> <div class="left">左边栏</div> <div class="right">右边栏</div></div>CSS代码如下:* { margin: 0原创 2021-04-10 18:18:26 · 66 阅读 · 0 评论 -
justify-content弹性盒子布局
初始HTML代码如下:<div class="row"> <div>1</div> <div>2</div> <div>3</div></div>初始CSS代码如下:* { margin: 0; padding: 0;}.row { width: 600px; height: 400px; border: 1px solid #000; margin: 50px auto; di原创 2021-04-09 14:24:03 · 159 阅读 · 0 评论 -
align-items弹性盒子布局
初始HTML代码如下:<div class="row"> <div>1</div> <div>2</div> <div>3</div></div>初始CSS代码如下:* { margin: 0; padding: 0;}.row { width: 600px; height: 400px; border: 1px solid #000; margin: 50px auto; di原创 2021-04-09 14:20:06 · 267 阅读 · 0 评论 -
align-content弹性盒子布局
初始HTML代码如下:<div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>初始CSS代码如下:.row { width: 600px原创 2021-04-07 21:33:47 · 677 阅读 · 0 评论 -
HTML5+CSS3实现小黄人
HTML代码:<!-- 小黄人的容器 --><div class="wrap"> <!-- 小黄人的头发 --> <div class="xhr_hair"> <div class="xhr_hair_1"></div> <div class="xhr_hair_2"></div> </div> <!-- 小黄人的身体 --> <div class="xhr_b原创 2021-04-07 20:11:44 · 726 阅读 · 0 评论 -
transform旋转木马
HTML代码:<div class="father"> <img src="images/bread3.png" alt=""></div><section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>原创 2021-04-06 21:45:14 · 76 阅读 · 0 评论 -
transform+perspective开门效果
HTML代码:<div class="door"> <img src="images/taobao/banner1.jpg" alt=""> <div class="door-l"></div> <div class="door-r"></div></div>CSS代码:.door { width: 520px; height: 280px; margin: 0 auto; position: rel原创 2021-04-06 21:32:33 · 137 阅读 · 0 评论 -
backface-visibility翻转的图片
HTML代码:<div class="overturn"> <img src="images/bread2.jpg" alt=""> <img src="images/bread3.jpg" alt=""></div>CSS代码:.overturn { width: 157px; height: 170px; overflow: hidden; margin: 20px auto; position: relative; perspe原创 2021-04-05 22:47:21 · 111 阅读 · 0 评论 -
transform旋转的盒子
HTML代码:<div class="colorBox"> <div class="pink"></div> <div class="purple"></div> <div class="blue"></div> <div class="yellow"></div> <div class="red"></div> <div class="skyblue"&g原创 2021-04-05 22:38:54 · 143 阅读 · 0 评论 -
transform-origin设置变形中心点
HTML代码:<div class="box"></div>CSS代码:.box { width: 100px; height: 100px; background-color: purple; margin-left: 150px; transition: all .5s; /*transform-origin: center; 默认盒子的正中心为旋转中心点*/ /*transform-origin: left; 设置左边线中心点为旋转中心点*/ /*tra原创 2021-04-04 22:39:18 · 884 阅读 · 0 评论 -
transform定位盒子居中对齐的完美写法
HTML代码:<div class="outer"> <div class="inner"></div></div>CSS代码:.outer { width: 300px; height: 300px; margin: 60px auto; border: 1px solid #000; position: relative;}.inner { width: 100px; height: 100px; background-co原创 2021-04-04 22:25:50 · 381 阅读 · 0 评论 -
文本溢出部分显示为省略号的不同方式
HTML代码:<div> <p class="p1"> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。 </p> <p class="p2"> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。 CS原创 2021-04-02 19:21:35 · 95 阅读 · 0 评论 -
flex布局
HTML代码:<div class="row"> <div class="col col-33">33%</div> <div class="col col-1">1</div> <div class="col col-2">2</div></div><div class="row"> <div class="col col-33">33%</div> <原创 2021-04-02 19:06:14 · 118 阅读 · 0 评论 -
animation动画之无缝滚动
HTML代码:<div class="showPic"> <ul> <li><img src="images/bread1.jpg" alt=""></li> <li><img src="images/bread2.jpg" alt=""></li> <li><img src="images/bread3.jpg" alt=""></li> <li&g原创 2021-04-01 18:14:21 · 429 阅读 · 0 评论 -
animation动画之汽车往返运动
HTML代码:<!-- car --><img class="car" src="images/car.jpg" alt="">CSS代码:/*car*/.car { animation: car 2s infinite;}@keyframes car { 0% { transform: translate3d(1000px, 0, 0); } 50% { transform: translate3d(0, 0, 0) rotateY(180deg);原创 2021-04-01 18:10:36 · 470 阅读 · 0 评论 -
CSS滑动门效果
类似日常生活中的滑动门,根据a链接不同的文字宽度,自动撑开相应的背景宽度。HTML代码如下:<div> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>开放平台</span> </a> &l.原创 2021-03-31 14:33:15 · 442 阅读 · 0 评论 -
清除浮动的4种方法
初始HTML代码如下:<div class="top">顶部</div><div class="banner">banner</div><div class="main"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div>原创 2021-03-31 14:20:29 · 193 阅读 · 0 评论 -
解决margin塌陷的3种方法
初始HTML代码如下:<div class="father"> <div class="son">123</div></div> 初始CSS代码如下:.father { width: 200px; height: 200px; margin: 10px auto; background-color: pink;}.son { width: 100px; height: 100px; background-color: purple原创 2021-03-30 14:44:07 · 414 阅读 · 2 评论 -
text-shadow凹凸文字
HTML代码如下:<div class="tu">我是凸出文字</div><div class="ao">我是凹陷文字</div>CSS代码如下:body { background-color: #ccc;}.tu, .ao { font-size: 100px; color: #ccc !important;}.tu { text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}.ao原创 2021-03-30 14:14:50 · 91 阅读 · 0 评论 -
div盒子水平居中的4种方法
初始HTML代码如下:<div class="father"> <div class="son"></div></div>初始CSS代码如下:.father { width: 300px; height: 300px; background-color: pink; margin: 20px auto;}.son { width: 100px; height: 100px; background-color: blue;}初原创 2021-03-29 16:02:43 · 1775 阅读 · 0 评论 -
div盒子垂直居中的3种方法
初始HTML代码如下: <div class="father"> <div class="son"></div> </div>初始CSS代码如下:.father { width: 300px; height: 300px; background-color: pink; margin: 20px auto; } .son { width: 100px; height: 100px; backgro原创 2021-03-29 15:50:48 · 1851 阅读 · 0 评论 -
DIV+CSS实现射击靶子
HTML代码:<div class="circle"> <div class="circle1"> <div class="circle2"> <div class="circle3"> <div class="circle4"> <div class="circle5"></div> </div> </div> </div>原创 2021-03-25 22:14:12 · 553 阅读 · 0 评论 -
BFC的触发条件及应用:清除浮动、解决外边距合并、盒子自适应
BFC的应用BFC的主要用途:清除元素内部浮动:计算BFC的高度时,会检测浮动盒子的高度,撑开BFC的高度。<!-- 清除元素内部浮动 --> <div class="father"> <div class="son1"></div> <div class="son2"></div> </div>/*清除元素内部浮动*/ .father { width: 500px; border: 1p原创 2021-03-25 21:57:07 · 182 阅读 · 0 评论