首页

CSS3弹性布局怎么兼容IE(11)?

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

弹性布局(Flexbox)确实为我们构建复杂、灵活的布局带来了很大的便利,但是它的兼容性确实让人很头痛,下面是我遇到的一个问题:

理想效果:

IE11效果:

html大概结构:

[html] view plain copy
  1. <div class="box">  
  2.     <div class="input-container">  
  3.         <input />  
  4.         <div class="tooltip"></div>  
  5.     </div>  
  6.     <button></button>  
  7. </div>  

这里大致说一下css,input-container宽高没设死,由input决定,并设置position: relative;相对定位,并采用display: flex;弹性布局。tooltip设置绝对定位,通过top调整垂直位置,由input-container的弹性布局属性设置水平居中(是不是觉得我很作死,为什么不直接用绝对定位就把垂直水平都搞定了。哈哈,一切源于一颗装B+傻B的心,不过,能实际体会一下flexbox带来的问题,我觉得也挺好的)。


结果在chrome下正常,IE11下就成上图那样了,我上MDN Web看了一下,说弹性布局是支持IE11的(下图),但是从上图来看,IE下垂直方向是对的,但是水平方向却不对,说明flexbox还是没被支持,我也尝试着添加了各种前缀,还是不行。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI是什么,涉及面有多广!

蓝蓝设计的小编

UI(User Interface)即用户界面,人机交互设计,不仅指用户和界面,还包括用户和界面之间的关系。具体指人机交互、操作逻辑、界面美观的整体设计,好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

html模糊查询

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>模糊查询</title>  
  4. <style type="text/css">  
  5.     body{  
  6.         text-align:center;  
  7.     }  
  8.     #datas{  
  9.         display:none;  
  10.     }  
  11.     #txt{  
  12.         font-size:300%;  
  13.         width:80%;  
  14.         height:10%;  
  15.         margin-top:10%;  
  16.     }  
  17.     #msg{  
  18.         margin:0 auto;  
  19.         text-align:left;  
  20.         width:80%;  
  21.         border: medium solid #C0C0C0;   
  22.     }  
  23. </style>  
  24. </head>  
  25. <body>  
  26.   
  27. <form action="" method="post">  
  28. <!-- 搜索框 -->     
  29. <input type="text" id='txt' />  
  30. </form>  
  31. <!-- 模糊查询结果显示框 -->  
  32. <div id="msg"></div>  
  33.   
  34. <!-- 查询数据 -->  
  35. <div id="datas">  
  36. 城市,北京市,海淀区,东城区,西城区,宣武区,丰台区,朝阳区,崇文区,大兴区,石景山区,门头沟区,房山区,通州区,顺义区,怀柔区,昌平区,平谷区,密云县,延庆县,天津市,和平区,河西区,河北区,河东区,南开区,红桥区,北辰区,津南区,武清区,塘沽区,西青区,汉沽区,大港区,宝坻区,东丽区,蓟县,静海县,宁河县 ,上海,黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区,杨浦区,虹口区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,南汇区,奉贤区,崇明县 ,重庆,渝中区,大渡口区,江北区,沙坪坝区,九龙坡区,南岸区,北碚区,万盛区,双桥区,渝北区,巴南区,万州区,涪陵区,黔江区,长寿区,江津区,永川区,南川区,綦江县,潼南县,铜梁县,大足县,荣昌县,璧山县,垫江县,武隆县,丰都县,城口县,梁平县,开县,巫溪县,巫山县,奉节县,云阳县,忠县,石柱土家族自治县,彭水苗族土家族自治县,酉阳苗族自治县,秀山土家族苗族自治县,新疆维吾尔自治区,乌鲁木齐,克拉玛依,石河子,阿拉尔市,图木舒克,五家渠,哈密,吐鲁番,阿克苏,喀什,和田,伊宁,塔城,阿勒泰,奎屯,博乐,昌吉,阜康,库尔勒,阿图什,乌苏 ,西藏自治区,拉萨,日喀则,宁夏回族自治区,银川,石嘴山,吴忠,固原,中卫,青铜峡市,灵武市,内蒙古自治区,呼和浩特,包头,乌海,赤峰,通辽,鄂尔多斯,呼伦贝尔,巴彦淖尔,乌兰察布,霍林郭勒市,满洲里市,牙克石市,扎兰屯市,根河市,额尔古纳市,丰镇市,锡林浩特市,二连浩特市,乌兰浩特市,阿尔山市 ,广西,南宁,柳州,桂林,梧州,北海,崇左,来宾,贺州,玉林,百色,河池,钦州,防城港,贵港,岑溪,凭祥,合山,北流,宜州,东兴,桂平,黑龙江,哈尔滨,大庆,齐齐哈尔,佳木斯,鸡西,鹤岗,双鸭山,牡丹江,伊春,七台河,黑河,绥化 加格达奇,五常,双城,尚志,纳河,虎林,密山,铁力,同江,富锦,绥芬河,海林,宁安,穆林,北安,五大连池,肇东,海伦,安达,吉林,长春,吉林,四平,辽源,通化,白山,松原,白城,九台市,榆树市,德惠市,舒兰市,桦甸市,蛟河市,磐石市,公主岭市,双辽市,梅河口市,集安市,临江市,大安市,洮南市,延吉市,图们市,敦化市,龙井市,珲春市,和龙市,辽宁,沈阳,大连,金州,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛,新民,瓦房店,普兰,庄河,海城,东港,凤城,凌海,北镇,大石桥,盖州,灯塔,调兵山,开原,凌源,北票,兴城 ,河北,石家庄,唐山,邯郸,秦皇岛,保定,张家口,承德,廊坊,沧州,衡水,邢台,辛集市,藁城市,晋州市,新乐市,鹿泉市,遵化市,迁安市,武安市,南宫市,沙河市,涿州市,固安..定州市,安国市,高碑店市,泊头市,任丘市,黄骅市,河间市,霸州市,三河市,冀州市,深州市,山东,济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,菏泽,滨州,章丘,胶南,胶州,平度,莱西,即墨,滕州,龙口,莱阳,莱州,招远,蓬莱,栖霞,海阳,青州,诸城,安丘,高密,昌邑,兖州,曲阜,邹城,乳山,文登,荣成,乐陵,临清,禹城,江苏,南京,镇江,常州,无锡,苏州,徐州,连云港,淮安,盐城,扬州,泰州,南通,宿迁,江阴市,宜兴市,邳州市,新沂市,金坛市,溧阳市,常熟市,张家港市,太仓市,昆山市,吴江市,如皋市,通州市,海门市,启东市,东台市,大丰市,高邮市,江都市,仪征市,丹阳市,扬中市,句容市,泰兴市,姜堰市,靖江市,兴化市,安徽,合肥,蚌埠,芜湖,淮南,亳州,阜阳,淮北,宿州,滁州,安庆,巢湖,马鞍山,宣城,黄山,池州,铜陵,界首,天长,明光,桐城,宁国,浙江,杭州,嘉兴,湖州,宁波,金华,温州,丽水,绍兴,衢州,舟山,台州,建德市,富阳市,临安市,余姚市,慈溪市,奉化市,瑞安市,乐清市,海宁市,平湖市,桐乡市,诸暨市,上虞市,嵊州市,兰溪市,义乌市,东阳市,永康市,江山市,临海市,温岭市,龙泉市,福建,福州,厦门,泉州,三明,南平,漳州,莆田,宁德,龙岩,福清市,长乐市,永安市,石狮市,晋江市,南安市,龙海市,邵武市,武夷山,建瓯市,建阳市,漳平市,福安市,福鼎市,广东,广州,深圳,汕头,惠州,珠海,揭阳,佛山,河源,阳江,茂名,湛江,梅州,肇庆,韶关,潮州,东莞,中山,清远,江门,汕尾,云浮,增城市,从化市,乐昌市,南雄市,台山市,开平市,鹤山市,恩平市,廉江市,雷州市 吴川市,高州市,化州市,高要市,四会市,兴宁市,陆丰市,阳春市,英德市,连州市,普宁市,罗定市,海南,海口,三亚,琼海,文昌,万宁,五指山,儋州,东方,云南,昆明,曲靖,玉溪,保山,昭通,丽江,普洱,临沧,安宁市,宣威市,个旧市,开远市,景洪市,楚雄市,大理市,潞西市,瑞丽市,贵州,贵阳,六盘水,遵义,安顺,清镇市,赤水市,仁怀市,铜仁市,毕节市,兴义市,凯里市,都匀市,福泉市,四川,成都,绵阳,德阳,广元,自贡,攀枝花,乐山,南充,内江,遂宁,广安,泸州,达州,眉山,宜宾,雅安,资阳,都江堰市,彭州市,邛崃市,崇州市,广汉市,什邡市,绵竹市,江油市,峨眉山市,阆中市,华蓥市,万源市,简阳市,西昌市,湖南,长沙,株洲,湘潭,衡阳,岳阳,郴州,永州,邵阳,怀化,常德,益阳,张家界,娄底,浏阳市,醴陵市,湘乡市,韶山市,耒阳市,常宁市,武冈市,临湘市,汨罗市,津市市,沅江市,资兴市,洪江市,冷水江市,涟源市,吉首市,武汉,襄樊,宜昌,黄石,鄂州,随州,荆州,荆门,十堰,孝感,黄冈,咸宁,大冶市,丹江口市,洪湖市,石首市,松滋市,宜都市,当阳市,枝江市,老河口市,枣阳市,宜城市,钟祥市,应城市,安陆市,汉川市,麻城市,武穴市,赤壁市,广水市,仙桃市,天门市,潜江市,恩施市,利川市,河南,郑州,洛阳,开封,漯河,安阳,新乡,周口,三门峡,焦作,平顶山,信阳,南阳,鹤壁,濮阳,许昌,商丘,驻马店,巩义市,新郑市,新密市,登封市,荥阳市,偃师市,汝州市,舞钢市,林州市,卫辉市,辉县市,沁阳市,孟州市,禹州市,长葛市,义马市,灵宝市,邓州市,永城市,项城市,济源市,山西,太原,大同,忻州,阳泉,长治,晋城,朔州,晋中,运城,临汾,吕梁,古交,潞城,高平,介休,永济,河津,原平,侯马,霍州,孝义,汾阳,陕西,西安,咸阳,铜川,延安,宝鸡,渭南,汉中,安康,商洛,榆林,兴平市,韩城市,华阴市,甘肃,兰州,天水,平凉,酒泉,嘉峪关,金昌,白银,武威,张掖,庆阳,定西,陇南,玉门市,敦煌市,临夏市,合作市,青海,西宁,格尔木,德令哈,江西,南昌,九江,赣州,吉安,鹰潭,上饶,萍乡,景德镇,新余,宜春,抚州,乐平市,瑞昌市,贵溪市,瑞金市,南康市,井冈山市,丰城市,樟树市,高安市,德兴市,台湾,台北,台中,基隆,高雄,台南,新竹,嘉义,板桥市,宜兰市,竹北市,桃园市,苗栗市,丰原市,彰化市,南投市,太保市,斗六市,新营市,凤山市,屏东市,台东市,花莲市,马公市 ,特别行政区,香港:中西区,东区,九龙城区,观塘区,南区,深水埗区,黄大仙区,湾仔区,油尖旺区,离岛区,葵青区,北区,西贡区,沙田区,屯门区,大埔区,荃湾区,元朗区,澳门:花地玛堂区,圣安多尼堂区(花王堂区),望德堂区,大堂区,风顺堂区(圣老楞佐堂区),离岛,氹仔,路环,  
  37. </div>    
  38. <script type="text/javascript">    
  39.     function handle(){    
  40.         var data = datas.split(",");  
  41.         var word = document.getElementById('txt').value;  
  42.         var value = "";  
  43.         for(var i = 1;i < data.length;i++){  
  44.             if(word!="" && data[i].match(word+".*") != null){  
  45.                 value += "<a onclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";  
  46.             }  
  47.         }         
  48.         document.getElementById('msg').innerHTML=value;  
  49.     }   
  50.     function add(city){  
  51.         document.getElementById('txt').value=city;  
  52.     }  
  53.     //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。     
  54.     if(/msie/i.test(navigator.userAgent))    //ie浏览器     
  55.         {document.getElementById('txt').onpropertychange=handle     
  56.     } else{//非ie浏览器,比如Firefox     
  57.     alert(1)  
  58.         document.getElementById('txt').addEventListener("input",handle,false);     
  59.     }  
  60.     var datas = document.getElementById('datas').innerHTML;  
  61.   
  62. </script>    
  63.   
  64. </body>  
  65. </html>  
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

每一个成功UI设计师的辛酸背后

蓝蓝设计的小编

每当夜深人静,我们已经憨憨入睡的时候,可能还有一群人还坐在电脑前,寻找着灵感,为的是第二天要交稿的设计更有创意而不停的改来改去。他们就是那些苦逼的UI设计师。

清除浮动的八种方法

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

浮动是什么?

浮动元素会脱离文档流进行左浮或者右浮,直到碰到父级元素或者其他的浮动元素。

为什么清除浮动:浮动会导致父元素高度坍塌,因为浮动脱离文档流,浮动以后不占文档流的位置,撑开的父元素高度肯定会坍塌。

清除浮动的八种方法:

1、父级div给出固定的高度。手动定义height,这样就解决了父级元素获取不到高度的问题。

优点:代码量少,简单容易掌握。

缺点:只适合高度固定的布局,如果高度和父级div不同会出现问题。

2、overflow,设置overflow:hidden。

优点:代码少,浏览器支持。

缺点:会把超出的部分隐藏起来,而且不能配合position使用

3、额外标签,添加一个新的标签,如div,或者br,并且设置标签的属性clear:both;清除浮动,让父级能自动获得高度。

优点:代码少,浏览器支持,不会各种问题。

缺点:会有很多空的div或者br。

4、使用单伪类after和zoom,使用方法:

.clearfloat:after{

  content:"";//设置内容为空

  height:0;//高度为0

  line-height:0;//行高为0

  display:block;//将文本转为块级元素

  visibility:hidden;//将元素隐藏

  clear:both//清除浮动

 }

  .clearfloat{

 zoom:1;为了兼容IE

    }

优点:浏览器支持好,大型的浏览器都在使用,建议使用。

缺点:代码多,需要after和zoom都要使用才能兼容主流的浏览器。

5、双伪类清除浮动。使用方法:

.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺点:不严谨不建议使用

6、父级div跟着浮动,所有代码一起浮动就会形成一个整体,

缺点:会产生新的问题,不建议使用。

7、父级定义display:table;将div属性变成的表格。

缺点:产生新的问题,而且影响布局。

8、overflow:auto;需要设置width,不设置height,浏览器会自动检测浮动区的高度。

缺点:容易生成滚动条。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





Behance上总结的 2018年​最酷的设计趋势

鹤鹤


2018年,智能手机依然是我们主要的信息承载工具,更为有效且颇具趣味的响应式图标必将得到关注。同时,鲜艳丰富的色彩,精彩纷呈的插图设计都会博得用户眼球。

B类进口业务导购设计策略

鹤鹤

通过贴近业务和产品运营团队深入的交流,有助于我们尽快融入一个不熟悉的领域,同时可以阅读一些专业行业网站上关于进口业务的文章,了解大盘的背景。在进口业务中通过背景的挖掘,我们发现在商品和供应链层面上,进口有一些特有的特征与其他业务不同,差异的地方其实往往就是用户的痛点和后面我们发力的机会点。

求职类App原型制作分享-Part-time Clouds

蓝蓝设计的小编

Part-time Clouds 是一款兼职信息平台,你可以在此寻找合适的兼职工作。这款App使用起来十分简单,不用登录注册即可直接可以进入主页,主页展示了大量兼职信息,你可以根据需求收藏职位、查看详情,或一键拨打联系电话,其中还有详细的职业分类页面。

vue一些需要注意的小知识点

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

1.vue的生命周期,主要的介绍官网(https://cn.vuejs.org/v2/api/)上都有。

主要说的是created和mounted。之前在写项目的过程中,需要对DOM节点进行操作(但是在vue里面尽量不要获取节点进行操作。vue主要是对数据进行操作),在created里面这些操作并不能实现,但是在mounted里面是可以的。

主要原因就是:created是vm实例已经创建但是未完成挂载,而mounted已经部分完成挂载,这么说的原因是,mounted不承诺所有的子组件都会被挂载,如果你希望等到的是整个视图都渲染完毕,可以用 vm.$nextTick 替换掉mounted.

$nextTick是下次DOM更新循环结束之后执行的回调函数。

2.vue里点击按钮,弹框的实现。

通过在父组件上绑定一个show,type为boolean,在子组件用props接收传过来的show值,show值为true时弹出框显示,false时不显示。

父组件:

子组件:

3.v-show与v-if的区别?

v-if与v-show都属于条件渲染,意思就是根据不同的条件使用不同的模板。

在vue中,v-show只是简单的修改了样式,DOM节点是真实存在的,只是隐藏了。

v-if是真实的条件渲染,值为false是不编译不渲染,当值为true时,才开始编译。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

你在无意中就打破了用户体验设计中最重要的规则!

蓝蓝设计的小编

每个人都应该遵守一定的重要规则,特别是那些从事产品设计的人。而许多设计师却日复一日地在设计中违反规则,而这是绝对不利于他们的设计的。在本文中,我将解释什么是设计中的重要规则,以及它对产品和服务中意味着什么。我还将在组织管理、协作和总体性能方面提出这一现象存在的可能含义。在这篇文章中我所要讨论的心理现象被称为米勒法则。我不是要告诉你什么是米勒法则,而是要引导你如何参加测试,以获得更具有沉浸性的学习效果。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档