HTML/CSS
关注
分享
扫一扫
每一天，每一步
相信自己，你可以的
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css实现高度可变、上下边框是渐变色、左右边框是纯色的div容器
这段代码实现了一个带有渐变边框和滚动功能的固定宽度容器。容器采用浮动布局，宽度500px，高度范围136-746px，超出内容可垂直滚动。通过伪元素::before和::after在顶部和底部添加了渐变色边框线（#2865D5到#4ab9f4渐变），同时保持左右3px实线边框。内容区域设置了23px上下和30px左右的内边距，并通过min-height补偿了padding对高度的影响。容器还设置了10px圆角和相对定位，整体设计既美观又实用。原创 2025-06-27 15:58:32 · 208 阅读 · 0 评论 -
css滚动条隐藏但是可以滚动
要实现滚动条隐藏但仍然可以滚动的效果，可以使用CSS来隐藏滚动条，同时允许鼠标的滚轮或触摸板滚动。这样，滚动条在视觉上被隐藏，但用户可以通过触摸或使用鼠标滚轮来滚动内容。原创 2024-09-13 15:22:16 · 1399 阅读 · 0 评论 -
css父容器溢出隐藏 子容器溢出滚动
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;原创 2024-09-13 15:18:19 · 671 阅读 · 0 评论 -
CSS属性选择器选择属性值中包含指定字符串的元素
attr*=value]：选择器匹配包含指定属性且该属性值中包含指定字符串“value”的元素。[attr^=value]：选择器匹配包含指定属性且该属性值以指定字符串“value”开头的元素。这将会选择所有data-type属性中包含button字符串的元素，并应用相应的样式。这将会选择所有data-type属性以button字符串开头的元素，并应用相应的样式。这将会选择所有data-type属性以button字符串结尾的元素，并应用相应的样式。/* 样式规则 *//* 样式规则 */原创 2024-09-10 14:58:50 · 828 阅读 · 0 评论 -
图片大小自适应 css
要实现图片大小自适应，可以使用CSS的max-width和height属性，并将width设置为100%。这样，图片会根据父元素的大小自动调整大小，但不会超过原始大小。原创 2024-07-22 16:37:55 · 417 阅读 · 0 评论 -
css给文字设置背景色
【代码】css给文字设置背景色。原创 2024-05-17 16:07:32 · 1404 阅读 · 1 评论 -
flex布局子元素的宽度与父元素的宽度一致了，怎么办？子元素是行内元素，想要子元素的实际长度为其宽度
flex布局子元素的宽度与父元素的宽度一致了，怎么办？子元素是行内元素，想要子元素的实际长度为其宽度。给flex元素设置align-items: flex-start;原创 2024-05-17 16:05:57 · 351 阅读 · 0 评论 -
css实现伪类三角形气泡框 带边框
【代码】css实现带三角形的边框。原创 2024-01-22 11:07:51 · 939 阅读 · 0 评论 -
iconfont字体图标的引用
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。4. 点击右侧的使用帮助，页面下拉可以看到Unicode、font-class、symbol三种引用方式的使用步骤，按照步骤操作即可。官网：giconfont-阿里巴巴矢量图标库。2. 选择想要使用的图标，添加入库。3. 打开库，将图标添加至项目。1. 搜索图标，如：首页。原创 2023-06-09 16:05:13 · 387 阅读 · 0 评论 -
替换URL中{}大括号包含的占位符参数
【代码】替换URL中{}大括号包含的占位符参数。原创 2023-05-16 10:19:52 · 700 阅读 · 0 评论 -
css隐藏右侧滚动条 但是还能继续滚动
子元素设置宽度比父级宽一点，把滚动条撑出去。父级设置overflow: hidden;原创 2023-05-16 10:11:04 · 805 阅读 · 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 · 714 阅读 · 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 · 87 阅读 · 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 · 123 阅读 · 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 · 793 阅读 · 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 · 265 阅读 · 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 · 355 阅读 · 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 · 1307 阅读 · 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 · 288 阅读 · 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 · 87 阅读 · 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 · 94 阅读 · 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 · 209 阅读 · 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 · 323 阅读 · 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 · 734 阅读 · 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 · 875 阅读 · 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 · 111 阅读 · 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 · 183 阅读 · 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 · 151 阅读 · 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 · 176 阅读 · 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 · 1077 阅读 · 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 · 425 阅读 · 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 · 121 阅读 · 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 · 164 阅读 · 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 · 496 阅读 · 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 · 520 阅读 · 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 · 518 阅读 · 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 · 231 阅读 · 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 · 491 阅读 · 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 · 123 阅读 · 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 · 1826 阅读 · 0 评论