html/css/js
关注
分享
扫一扫
文章平均质量分 78
南郭菌！
我要活的不像一个废物
展开
-
实现单行和多行文本溢出隐藏变为省略号
最近做项目用到了这个知识点，所以纪录一下实现单行文本溢出方法也就三行代码overflow: hidden;white-space: nowrap;text-overflow:ellipsis;overflow: hidden 溢出隐藏white-space属性是用来设置如何处理元素中的 空白，设置了nowrap之后文本不会换行。我之前写过一篇关于 标签 pre和css的white-space属性 的博客。标签 pre和css的white-space属性text-overflow 用来控制原创 2021-04-19 02:45:49 · 313 阅读 · 0 评论 -
CSS选择器（selector）汇总（含c3）
选择器计算权重一：值为 1000 ，内联样式 在标签内写入style属性。二：值为0100，id选择器，如： #id名。三：值为0010，class选择器、伪类选择器、属性选择器，如：.class名。四：值为0001，标签选择器、伪元素选择器 、如：div{}。五：值为0000，通配符选择器、子选择器、相邻选择器，如：*{} >等。等级最高：！important!important 的作用是提升优先级，加了这句的样式的优先级是最高的。大于内联样式（把！important加在分号前面）原创 2021-01-11 20:24:47 · 1059 阅读 · 0 评论 -
纯CSS3制作按钮3D翻转效果
3D按钮翻转具体效果那么我们开始制作3D按钮翻转效果我们先把html的结构写一下<body> <ul> <li> <div class="zheng">首页</div> </li> <li> <div class="zheng">登录</div> </li>原创 2020-12-30 20:39:47 · 574 阅读 · 0 评论 -
使用css3制作好看的动画效果
今天给大家做两个好看的css3好看的特效字体浮雕效果如下我们来建一个div然后添加一段文字 <div> 这不是摇摆杨嘛？ </div>然后我们准备一些常用的css样式*{ margin: 0; padding: 0; } :root,body{ width: 100%; height: 100%;原创 2020-12-30 20:39:14 · 751 阅读 · 0 评论 -
使用纯css3制作好看的加载特效
使用css3制作好看的加载特效效果图 <div class="father"> <div id="text">loading....</div> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> <div cla原创 2020-12-21 20:34:15 · 377 阅读 · 0 评论 -
纯css3制作简易钟表时钟
使用css3制作简易钟表效果html代码 <div class="clock" > <!-- 指針 --> <div class="hour"></div> <div class="point"></div> <div class="seconds"></div> <!-- 黑点 --> <d原创 2020-12-21 19:45:05 · 1271 阅读 · 0 评论 -
实现表单元素的placeholder效果
标题在其他元素中添加placeholder效果在h5中给input标签添加了一个占位符属性placeholder用来做提示文本可是我想在其他元素里使用这个属性，那怎么办呢**？**1.新建一个div让它变成可编辑状态//css#test{ width: 500px; height: 500px; border: 1px solid red; }//html <div id="test" conten原创 2020-12-15 00:17:47 · 593 阅读 · 2 评论 -
css4种定位方式（静态定位，相对定位，绝对定位，固定定位）详解
说到定位就要用到 position 属性我们有四种不同的属性值1.static静态定位:使用静态定位时，元素处于普通流中，和未添加的元素一样处在最底层。2.relative相对定位：是相对于该元素在普通流时的位置元素仍保持其未定位前的形状，它原本所占的空间仍保留。就拿这三个div做比喻（这里就不给css代码了） <div class="father"> <div class="son1"></div> <div clas原创 2020-12-14 20:49:47 · 4263 阅读 · 0 评论 -
＜pre＞＜/pre＞标签和css的white-space属性
标签 pre和css的white-space属性今天看书发现css的段落属性有一个white-space属性，用来处理空白white-space属性有三个值1.normal:默认属性。即将连续的多个空格合并2.pre：将源代码中的空格和换行符保留3.norwrap:强制在同一行显示所有文本突然就想到，这个white-space：pre和pre标签有没有什么不同？如果有需要的话要用哪个？所以我就试了试代码如下：运行效果如下：可以看到两段文字都达到了我们想要的效果，而且在段落里插入的a标原创 2020-11-30 20:52:17 · 1654 阅读 · 0 评论