WEB前端

  • css中内容过长怎么解决

    css中内容过长怎么解决

    大家在写css的时候,肯定有过忘记设计里面存在的临界的情况。举个例子来说吧,当内容的长度超过了我们的期望值,我们也无法解释其中的可能性,页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作,但至少我们可以用不同类型的内容来测试,以减少这种情况的发生。具体情况如下:一个右侧/左侧有小图标的按钮这是一个手风琴效果的开关按钮。按钮右侧有一个小图标用来强调它是可点击的。然而当按钮的区域不够长的时候,按钮上的文字会盖住图标。当我们没有考虑到较长内容的时候这种情况就可能发生。我们可以在右侧增加...
  • js如何实现原生map

    js如何实现原生map

    js原生方法map实现,代码如下: map</tit...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-27</span> <span><i class="fa fa-eye"></i> 7</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/2090.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e7d5ed890c42103.jpg" alt="关于css中的类名问题的详细介绍"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/2090.html" title="关于css中的类名问题的详细介绍">关于css中的类名问题的详细介绍</a></h3> <div class="cate_post_intro"> <span>以下以数字开头的 CSS 类名不会生效:.1st{ color: red;}一个合法的 CSS 类名必需以下面其中之一作为开头:1、下划线 _2、短横线 -3、字母 a - z然后紧跟其他 _ , - 数字或字母。(推荐教程:CSS入门教程)用正则表示,一个合法的 CSS 类名为:-?[_a-zA-Z]+[_a-zA-Z0-9-]*根据CSS 标准 中的描述,如果类名开头是短横线 - ,第二个字符必需是下划线 _ 或字母,但实测发现,除了提及的两个,紧跟另一个短横线也是生效的。以下是测试代码及结果:...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-27</span> <span><i class="fa fa-eye"></i> 6</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/2089.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e7d614df2a38268.jpg" alt="js如何实现数组属性去重并校验重复数据"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/2089.html" title="js如何实现数组属性去重并校验重复数据">js如何实现数组属性去重并校验重复数据</a></h3> <div class="cate_post_intro"> <span>新任务: 下拉框除去重复数据//前端对象数组 按某个属性去重其中jsonArray 是你要去重的对象数组。推荐教程:js教程示例中 按name属性去重,如下://前端对象数组 按某个属性去重 var obj = {}; jsonArray = jsonArray.reduce(function(item,next){ obj[next.name]?:obj[next.name] = true&&item.push(next); return item; },[]);...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-27</span> <span><i class="fa fa-eye"></i> 6</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/2030.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e79d8e5a9213727.jpg" alt="html注释的规范用法总结"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/2030.html" title="html注释的规范用法总结">html注释的规范用法总结</a></h3> <div class="cate_post_intro"> <span>html注释:<!--注释内容-->使用的位置:(视频教程推荐:html视频教程)1、一般会使用在一些主要节点标签结束的后边,如:<div class="wrap"><div class="main">...</div><!--main end--><div><!--wrap end-->2、使用在一些循环的结束的后边,如:<ul class="list"> <li>111111</li> <li>222222</li> <li>333333</li></ul><!--lis...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-25</span> <span><i class="fa fa-eye"></i> 8</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/2029.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e7ac534a2b85227.jpg" alt="css如何使用伪元素清除浮动"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/2029.html" title="css如何使用伪元素清除浮动">css如何使用伪元素清除浮动</a></h3> <div class="cate_post_intro"> <span>什么是BFC?块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的;BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮动则会造成父元素...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-25</span> <span><i class="fa fa-eye"></i> 10</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/2028.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e7ac738c407e348.jpg" alt="详解js中switch语句的使用方法"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/2028.html" title="详解js中switch语句的使用方法">详解js中switch语句的使用方法</a></h3> <div class="cate_post_intro"> <span>switch 语句用于基于不同条件执行不同动作。语法格式如下:switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块}代码解释:计算一次 switch 表达式;把表达式的值与每个 case 的值进行对比;如果存在匹配,则执行关联代码。如下:switch (new Date().getDay()) { case 0: day = "星期天"; break; case 1...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-25</span> <span><i class="fa fa-eye"></i> 8</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1982.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e781d403926e434.jpg" alt="css中有哪些方法可以实现垂直居中"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1982.html" title="css中有哪些方法可以实现垂直居中">css中有哪些方法可以实现垂直居中</a></h3> <div class="cate_post_intro"> <span>css实现垂直居中的方法如下:1、利用line-height实现居中,这种方法适合纯文字类的;<!-- css --><style>.parents { height: 400px; line-height: 400px; width: 400px; border: 1px solid red; text-align: center;}.child { background-color: blue; color: #fff;} </style></head><!-- html --><div...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-24</span> <span><i class="fa fa-eye"></i> 22</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1981.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e782010d026a912.jpg" alt="js如何实现滑动导航效果"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1981.html" title="js如何实现滑动导航效果">js如何实现滑动导航效果</a></h3> <div class="cate_post_intro"> <span>首先,我们来看一下效果:云彩跟随鼠标移动,点击固定。(推荐教程:js教程)具体代码如下:<!doctype html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compati...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-24</span> <span><i class="fa fa-eye"></i> 7</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1980.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e796d4af0ca3258.jpg" alt="ps插件安装在什么位置"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1980.html" title="ps插件安装在什么位置">ps插件安装在什么位置</a></h3> <div class="cate_post_intro"> <span>ps插件安装在什么位置?ps插件安装在plug-ins文件夹下。如:ps磨皮插件安装方法找到自己ps的安装包位置,找到plug-ins文件夹找到Portraiture64文件夹将其放入安装包位置plug-ins文件夹下面打开ps,选择滤镜-Imagenomic-Portraiture64弹出许可协议窗口,点击接受打开Portraiture64-keygen,然后点击GENERATE获取密匙输入密匙,点击确定,弹出安装成功安装成功~以上就是ps插件安装在什么位置的详细内容,更多请关注随便开发网其它相关文章!...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-24</span> <span><i class="fa fa-eye"></i> 8</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1979.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e796e9e16396910.jpg" alt="ps文字变形怎么调整"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1979.html" title="ps文字变形怎么调整">ps文字变形怎么调整</a></h3> <div class="cate_post_intro"> <span>ps文字变形怎么调整?1、桌面双击打开ps,新建一个800*600像素的画布。2、在画布中根据需要输入文字内容。3、点击上方的”图标“。4、打开对话框,根据需要选择一种样式,根据需要调整三个滑块。5、PS中文字随意变形完成。6、也可以输入文字后,删格化文字,点击“编辑”-“变换”-“变形”。以上就是ps文字变形怎么调整的详细内容,更多请关注随便开发网其它相关文章!...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-24</span> <span><i class="fa fa-eye"></i> 9</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1978.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e7972b90f80c652.jpg" alt="css实现等高布局有哪些方式"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1978.html" title="css实现等高布局有哪些方式">css实现等高布局有哪些方式</a></h3> <div class="cate_post_intro"> <span>什么是等高布局?指在同一个父容器中,子元素高度相等的布局。从等高布局实现方式来说分为两类:1、伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高。2、真等高子元素高度相等。伪等高实现方式:通过负margin和Padding实现真等高实现方式:1、table2、absoult3、flex4、grid5、js(推荐教程:CSS入门教程)伪等高之-负margin和padding主要利用负margin来实现,如下: <div class="layout parent"> <div class...</span> </div> <aside class="item_meta"> <span><i class="fa fa-calendar"></i> 2020-03-24</span> <span><i class="fa fa-eye"></i> 8</span> <span><i class="fa fa-comments-o"></i> 0</span> </aside> </div> </li> <li class="clearfix relative " > <div class="cate_post_l l"> <a href="/c/p/1977.html"><img src="https://xia.11yuanma.com/d/file/p/2020/03/5e797592de8d1793.jpg" alt="js如何实现木马轮播图效果"></a></div> <div class="cate_post_r"> <h3><a href="/c/p/1977.html" title="js如何实现木马轮播图效果">js如何实现木马轮播图效果</a></h3> <div class="cate_post_intro"> <span>首先,我们来看一下木马轮播图效果:具体代码如下:(推荐教程:js教程)html部分代码:<!DOCTYPE html><head> <meta charset="UTF-8"> <title>旋转木马轮播图