css
前端三剑客之CSS
前端薛小帅
代码戏人生,写出新风采
展开
-
手写一个多行文本溢出省略号显示,多行文本溢出省略号显示,单行文本溢出省略号显示
<div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?</div>单行文本溢出隐藏很简单了ov..原创 2020-08-26 15:18:59 · 323 阅读 · 0 评论 -
HTML布局之左右布局
作为一名合格的前端程序员,各种布局方式是肯定要熟练的,可我就是这么一个不合格的前端,这里记录一下左右布局的实现思路父元素容器设置固定高度,设置flex,宽度可以设为100%或者具体像素,根据业务需求来定 父元素下有两个子元素,分别为左右容器 左容器或右容器均可以设置固定宽度(如果仅是左右布局,可设置一个宽,另一方flex设为1),高度为100%父级高度,纵向溢出自动 补充说明:当然了,你想自己自定义滚动条的样式也是可以的具体代码如下:<div class="layout"&g...原创 2020-08-25 11:30:11 · 8860 阅读 · 0 评论 -
复习CSS3的知识点
第一篇、用户交互伪类选择器的用法:hover 鼠标移入:link 没有交互:visited 访问过:active 鼠标按下不放<a href="">Pesudo classes</a><a href="">Pesudo classes</a><a href="">Pesudo clas...原创 2020-02-14 11:09:28 · 749 阅读 · 0 评论 -
设置了相对定位relative之后,改变top值,如何去掉多余空白?
众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来的位置依然在文档流中占据位置。要想解决这个问题,我的想法就是给个margin负值,以减少下方的空白<body> <!-- 此时div占据的位置是他自身...原创 2019-08-12 15:54:54 · 2733 阅读 · 1 评论 -
CSS自定义字体的实现,前端实现字体压缩
CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件这里推荐一个网站:http://www.zitixiazai.org//********css中********/@font-face{ font-family:'test' //自定义字体名称 src:url('') //自定义字体存在的路径}/*给div设置自...原创 2019-09-24 17:51:36 · 1708 阅读 · 0 评论 -
input:file样式怎样修改
问题描述:我需要点击input:file来修改img中的图片,但是input:file样式太丑解决办法:给file设置透明度为0,让用户看不见他创建新的button按钮修改button按钮样式点击button的时候使file也被点击具体代码如下:<!-- HTML --><img src=""><input type="fi...原创 2019-10-02 13:51:31 · 7735 阅读 · 0 评论 -
纯CSS实现自动轮播,CSS变量的定义与使用,计算属性的使用
先来看一下实现的效果:实现原理:HTML中使用ul>li存放图片CSS使用CSS3的animation来完成动画<!-- HTML --><section class="slider-container"> <ul class="slider"> <li class="slider-item slider...原创 2019-10-09 10:45:49 · 275 阅读 · 0 评论