sfyjknvcx的博客

大家好，我是南宫。好久没有写博客了。最近两个月来在做一个Vue_CLI的项目（Vue2.x+ElementUI），项目不简单而且需求很急，一直在加班。这是我上班以来第一次写Vue_CLI项目，之前仅仅只有两次项目经验，而且都是自学时候做的，做这个项目让我很紧张，遇到不少问题，所以考虑写几篇博客分享一下思路和解决方案。今天的标题有一点拗口了，很抱歉，好像用三言两语很难讲清楚这个需求，而这个需求我觉得是可以理解的，详细描述如下：有这么一块宽度有限的空间，来显示一段文字内容。文字的字体大小确定，但是

今天我在做链接的悬浮效果，基本情况是这样的：父元素绝对定位，里面子元素浮动，一行多个链接。就是红框里的部分。代码里面可以看出来，子元素初始高度为128px/* 网上展馆等一排 */.links-container .banner-links { position: absolute; left: 0; right: 0; bottom: 17px;}/* 里面的每一项 */.links-container .banner-links .banner-link-item { posi

如题，这个问题我从未考虑过。一是因为我认为我们本来就应该用最大化或者接近于屏幕宽度的浏览器窗口来看网页，二是因为觉得这样考虑很难处理——我的版心宽度是1200px，窗口宽度如果大于1200，则主要内容居中显示，两端空白，小于1200怎么办，这个宽度根本就hold不住版心啊，难不成内容也要同步缩小吗，就算可以同步缩小，那么缩小后能看吗，缩小到什么时候是个头这些都是问题。但是这个问题昨天我确确实实要面对了，因为我之前做了个banner动画，重点是，这是个全屏的banner，并不只是活跃于版心这一块，设计稿的

昨天我做了个宽度占全屏的banner，设计稿上在banner图上面覆盖了一些导航，另外，banner图的左右箭头的位置位于版心的左右边缘，而不是屏幕的左右边缘。见状，我马上在banner图上面放了个绝对定位的div，宽度正好等于版心宽度，并且水平居中放置，让banner图上的导航和左右箭头都作为它的子元素存在。效果很正常，美滋滋。（橙色的区域是定位的div，红色的部分是它的子元素）结果今天才发现，我忘了在banner图外面包裹一层a标签了，包裹上a标签后，发现a标签无法被点击到！一方面，包裹

刚才解决了一个困扰我很久的文本溢出变省略号的问题，正式工作后，发现这个使用场景很普遍，比如展示在首页的新闻标题要单行省略，新闻正文要多行省略，今天我来谈谈单行省略和多行省略，尽我所知吧。一、单行省略首先上代码：.e { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}现在来分析代码。关键性作用的代码当然是text-overflow: ellipsis; text-overflow指定了文本溢出后的显示

记得我刚刚参加笔试的时候，遇到过一个问题：“怎么实现左右两边固定，中间宽度自适应的三列布局？”我当时简直看傻了，而且我基础很差，连“标准流下的块级元素独占一行”的知识都不具备，不知道要浮动才能并排显示多个div，更不知道怎么让一列固定宽度，一列自适应。自然，那次笔试我输得体无完肤，因为其他的题，像BFC，XSS攻击我都没答出来。然后我对这个问题记忆犹新，去问了别人后，听到了一个神秘的术语——“圣杯布局”，瞬间感觉好高大上啊，只是，我没有进一步去研究。三年后的今天，我在写这篇文章，弥补这个三年前错过的

现在在做一个官网，里面有一块内容，里面的小块宽高明显都是固定的，鼠标悬浮后，文字颜色改变，阴影出现，里面还有一行文字是悬浮后才可见的，我用的是<p>标签。<div class="service-item high-school"> <a href="#"> <h6 class="item-title">高等院所</h6> <p class="item-des">汇聚丰富的技术资源</p> </a&gt

最近做一个PC端官网的项目，首页的banner迟迟没有定下来，感觉客户想搞个大文章。果然后来客户说了个“要会动的banner”？什么是会动的？banner图左边有一个大圆环，（圆环上有8个栏目，每个栏目有个小圆圈，下面是标题）所以我认为，会动是圆环会转动。然后我花了好几个小时，研究如何使用animation动画让圆环转动，而且不让里面的文字颠倒。这里顺便简单介绍一下圆环转动的思路：这个思路不是我原创的，而是来自一本叫做《CSS揭秘》的书的最后一节。这个圆环有个特点：里面的每个项目并不是单纯的一个圆，

我在最近做了一个工期很赶的官网项目，是PC端的，客户指定要用bootstrap2.3.1和jq1.9，在2020年的今天可以说很“原始”了，我甚至放弃了我原本用起来非常舒适的flex，全程用浮动和行内块在实现并排显示元素的。好不容易做了一些看起来还算精致的页面，突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端”？？？看到这一行字的我，内心是懵逼加崩溃的。设计稿是1920像素的宽度，主体部分宽度为1200像素，这是妥妥的PC端设计图啊，当初说的也是PC端的官网，并不是手机端的APP，小程序，或者

我常常在UI图里看到这样的需求，也就是前面一块内容的下层有一块主色的背景，在背景还没结束的时候就是下一块白色内容区域。这样做，不可否认，效果挺好看的，就是做起来有一点点复杂，不是很直观。比如这样的——这个是我去年做的，我当时用的办法是：给上一块加上背景色，根据背景色区域的大小设置高度，让里面的白色子元素超出显示。然后下一块padding-top设为一个很大的值，让它下移，把上一块超出的部分让开。这个方案的好处是，如果下面除了菜单以外，还有其他的元素，并不需要做什么调整。缺点是，要设置高度和pad

这里的“开关”指的是移动端的开关。因为移动端我们要用手指来操作，而手指比鼠标的面积大得多，意味着点击的精确度会小得多，所以仍旧使用“复选框(<input type="checkbox">)”就不是很方便了，使用“开关”更方便——它看起来够大，容易操作，而且能从颜色来判断出状，容易观察。移动端的开关大概长这样（图片来自网络）——可以看到，开关有一个背景框和一个小圆点，不同状态下具有不同的颜色。最近我在一门课上看到了用CSS3+<input>做出开关效果的方法，我在这里教