精华内容
下载资源
问答
  • CSS行内对齐的黑魔法

    2017-08-01 11:11:00
    本文和以前的文章类似,orange 尽量带给大家分享实际项目中的坑怎么填,当然只是提供思想,方法很多欢迎讨论,还有就是对于刚上手前端的新人不是特别友好,没关系,涉及到基础知识我会对应的进行指引,给出链接或给...


    本文和以前的文章类似,orange 尽量带给大家分享实际项目中的坑怎么填,当然只是提供思想,方法很多欢迎讨论,还有就是对于刚上手前端的新人不是特别友好,没关系,涉及到基础知识我会对应的进行指引,给出链接或给出提示,大家可以自行 Google(百度)。

    说到行内对齐大家可能会想到类似水平对齐,垂直对齐总结类型的文章,既然我们叫 黑魔法 就不会是基础的对齐教程,基础教程的文章好多,大家想必都知道多种方法实现对齐

    <!--more-->

    项目背景

    还是 orange 所在公司的移动端项目,上案例

    截多了,咱们只看第一行的文字,算是每一天都有的 title,有人说: TMD 你在逗我?这有什么可讲的谁都会写好不好!

    先别激动,我当然不是解释这个布局怎么实现的,简单的例子更容易解释问题,继续往下看初步实现的代码,

    
    
    1. <div class="date-wrap"
    2.   <span class="date">14 OCT</span> 
    3.   <span class="multiple">x</span> 
    4.   <span class="desc">今日瞎选6篇</span> 
    5. </div> 
    6.  
    7. <style type="text/css"
    8.   .date-wrap { 
    9.     width: 100%; 
    10.     height: 60px; 
    11.     position: relative
    12.  
    13.     text-align: center; 
    14.     line-height: 60px; 
    15.  
    16.     font-size: 18px; 
    17.     font-weight: 600; 
    18.   } 
    19.  
    20.   .multiple { 
    21.     color: #f8ac08; 
    22.   } 
    23. </style>  

    截图如下

    细心的朋友看出问题了,看不出也没关系,我们加两条辅助线嘛!

    
    
    1. <div class="date-wrap"
    2.   <span class="date">14 OCT</span> 
    3.   <span class="multiple">x</span> 
    4.   <span class="desc">今日瞎选6篇</span> 
    5.   <div class="line-top"></div> 
    6.   <div class="line-bottom"></div> 
    7. </div> 
    8.  
    9. <style type="text/css"
    10.   /* 这里是前面的样式,不重复给出 */ 
    11.   .line-top { 
    12.     width: 100%; 
    13.     height: 1px; 
    14.     position: absolute
    15.     left: 0; 
    16.     top: 21px; 
    17.  
    18.     background-color: #000; 
    19.   } 
    20.  
    21.   .line-bottom { 
    22.     width: 100%; 
    23.     height: 1px; 
    24.     position: absolute
    25.     left: 0; 
    26.     bottom: 21px; 
    27.  
    28.     background-color: #000; 
    29.   } 
    30. </style>  

    效果如下

    好,相信大家现在一目了然存在的问题了,那就是前面的 date 并没有垂直居中,原因呢!解释起来也简单

    这里只需要修改一行代码就能回答大家的疑问

    
    
    1. <span class="date">14 OCT orange</span> 

    将上文对应 html 修改后,得到截图

    这个让我不禁想起了小学英语作业本的四线格,哈哈,大写字母的确都在上方的两个格,而小写上中下都有例子,单独看 g,很好解释上面的显现了吧。

    看似简单的案例还就是这么特殊,恰巧都是数字和大写字母,细心的还会发现后面的 6 也有问题,一不留神,不居中了,设计来找你,你一脸蒙逼的说我是按照居中写的啊,解决不了了?

    不是的,我们接下来就是解决这个问题的,现实项目要更复杂一些,有经验的前端知道字体间的差异,个别的字体上下相差特别悬殊,

    这里前后的字体是不同的,但幸好垂直方向的差异不是很大,这里我引入了项目原有的字体,中间的 x 其实是个 svg 这里不赘述。因为看懂思想再来一百个不对齐的你也能迎刃而解。

    进入真正的魔法世界,针对此案例给出两个思路大家自行选择

    inline-block 魔法

    不一步一步解释,直接上已经解决问题的代码

    
    
    1. <div class="date-wrap"
    2.   <div class="date">14 OCT</div> 
    3.   <div class="multiple">x</div> 
    4.   <div class="desc">今日瞎选6篇</div> 
    5.   <div class="line-top"></div> 
    6.   <div class="line-bottom"></div> 
    7. </div> 
    8.  
    9. <style type="text/css"
    10.   @font-face { 
    11.     font-family: century-gothic-bold; 
    12.     src: url('century-gothic-bold.ttf'); 
    13.   } 
    14.  
    15.   @font-face { 
    16.     font-family: FZYouH_512B; 
    17.     src: url('FZYouH_512B.ttf'); 
    18.   } 
    19.  
    20.   .date-wrap { 
    21.     width: 100%; 
    22.     height: 60px; 
    23.     display: flex; 
    24.     position: relative
    25.  
    26.     flex-direction: row; 
    27.     align-items: center; 
    28.     justify-content: center; 
    29.  
    30.     text-align: center; 
    31.     line-height: 60px; 
    32.  
    33.     font-size: 18px; 
    34.     font-weight: 600; 
    35.   } 
    36.  
    37.   .date { 
    38.     font-family: century-gothic-bold; 
    39.   } 
    40.  
    41.   .multiple { 
    42.     margin: 0 10px; 
    43.     color: #f8ac08; 
    44.   } 
    45.  
    46.   .desc { 
    47.     font-size: 16px; 
    48.     font-family: FZYouH_512B; 
    49.   } 
    50.  
    51.   .line-top { 
    52.     width: 100%; 
    53.     height: 1px; 
    54.     position: absolute
    55.     left: 0; 
    56.     top: 22px; 
    57.  
    58.     background-color: #000; 
    59.   } 
    60.  
    61.   .line-bottom { 
    62.     width: 100%; 
    63.     height: 1px; 
    64.     position: absolute
    65.     left: 0; 
    66.     bottom: 22px; 
    67.  
    68.     background-color: #000; 
    69.   } 
    70. </style>  

    效果如下

    好棒啊,我只改变了后面文字的 font-size: 16px; 解决问题了耶,高兴的拿给设计师,对比之后返工了,

    what fuck?什么鬼?心中一万个草泥马(神兽)奔腾而过,仔细看!瞪大眼睛。。。。没错

    今字的上头出了我们的辅助线,设计师也会将手机截屏然后对照原稿做辅助线对比的哦~

    解决办法相当简单,只需要

    
    
    1. .desc { 
    2.   margin-top: 1px;  /* add */ 
    3.  
    4.   font-size: 16px; 
    5.   font-family: FZYouH_512B; 
    6. }  

    只需要加一行,当当当当~

    嗑嗑,凑合这样吧,为什么?明明对齐了啊!再仔细看,我是认真的,没玩大家,发现我们的 date 低了不到一个像素(使用 Retina 屏幕的朋友看的明显些),有人问一像素以内可以调整嘛?明确告诉大家可以,之后的文章准备做解释,这里不展开

    第一种方案到这为止,上手试验的朋友虽然没有我的字体,你不必去下载,浏览器默认字体一样的,我们讲的是原理,没必要还原我的 demo,关键就是 block 元素的上下 margin 调整。

    提醒:这里的 margin 可以设置负值,如果负值无用自己去探索原因吧,给大家线上项目的控制台

    我这里给的就是负值,是有作用的哦,可以去 敢玩移动端主页,记得在模拟器里查看(不然会乱成一锅粥),控制台一看便知,不过多解释啦。

    vertical-align 魔法

    完整代码如下

    
    
    1. <div class="date-wrap"
    2.   <span class="date">14 OCT</span> 
    3.   <span class="multiple">x</span> 
    4.   <span class="desc">今日瞎选6篇</span> 
    5.   <div class="line-top"></div> 
    6.   <div class="line-bottom"></div> 
    7. </div> 
    8.  
    9. <style type="text/css"
    10.   @font-face { 
    11.     font-family: century-gothic-bold; 
    12.     src: url('century-gothic-bold.ttf'); 
    13.   } 
    14.  
    15.   @font-face { 
    16.     font-family: FZYouH_512B; 
    17.     src: url('FZYouH_512B.ttf'); 
    18.   } 
    19.  
    20.   .date-wrap { 
    21.     width: 100%; 
    22.     height: 60px; 
    23.     position: relative
    24.  
    25.     text-align: center; 
    26.     line-height: 60px; 
    27.  
    28.     font-size: 18px; 
    29.     font-weight: 600; 
    30.   } 
    31.  
    32.   .date { 
    33.     font-family: century-gothic-bold; 
    34.   } 
    35.  
    36.   .multiple { 
    37.     color: #f8ac08; 
    38.   } 
    39.  
    40.   .desc { 
    41.     vertical-align: 1px; 
    42.  
    43.     font-size: 16px; 
    44.     font-family: FZYouH_512B; 
    45.   } 
    46.  
    47.   .line-top { 
    48.     width: 100%; 
    49.     height: 1px; 
    50.     position: absolute
    51.     left: 0; 
    52.     top: 22px; 
    53.  
    54.     background-color: #000; 
    55.   } 
    56.  
    57.   .line-bottom { 
    58.     width: 100%; 
    59.     height: 1px; 
    60.     position: absolute
    61.     left: 0; 
    62.     bottom: 22px; 
    63.  
    64.     background-color: #000; 
    65.   } 
    66. </style>  

    以上代码运行效果和之前一摸一样这里就不一一截图费大家流量啦(良心前端。。。。)

    和上一个方法区别在于我们行内元素还用之前的 span 标签。然后通过 vertical-align: 1px; 来调节垂直方向上下的位置。对这个属性不熟悉的朋友可以去看MDN的文档:https://developer.mozilla.org...

    几种语法如下

    
    
    1. /* keyword values */ 
    2. vertical-align: baseline; 
    3. vertical-align: sub; 
    4. vertical-align: super; 
    5. vertical-align: text-top
    6. vertical-align: text-bottom; 
    7. vertical-align: middle; 
    8. vertical-align: top
    9. vertical-align: bottom; 
    10.  
    11. /* <length> values */ 
    12. vertical-align: 10em; 
    13. vertical-align: 4px; 
    14.  
    15. /* <percentage> values */ 
    16. vertical-align: 20%; 
    17.  
    18. /* Global values */ 
    19. vertical-align: inherit; 
    20. vertical-align: initial; 
    21. vertical-align: unset;  

    我们用的这个 <length> values 长度单位实际应用较少,却是行内元素垂直对齐的黑魔法。不了解的不要紧,赶快 get 新技能

    总结

    两种方案都可行,有时候不要因为一像素绞尽脑汁,找到突破口,以后谁还会怕行内对齐了呢?


    作者:orangexc

    来源:51CTO

    展开全文
  • 上一次,我们通过几个简单的步骤实现了级联下拉框——一个下拉框可以过滤另一个的可选项。 但是,如果我们有三个下拉框需要做级联该...3、创建一个关系列表,用于存放新的第三级项和第二级项的对应关系。 4、...

    上一次,我们通过几个简单的步骤实现了级联下拉框——一个下拉框可以过滤另一个的可选项。

    但是,如果我们有三个下拉框需要做级联该怎么做呢?比如,国家-省-市。或者工作地点-组-职位。

    接下来的步骤相对于前面介绍的步骤来说有点重复:

    1、创建一个查阅项列表填充数据

    2、创建一个网站栏,类型为查阅项,信息来源指向该列表

    3、创建一个关系列表,用于存放新的第三级项和第二级项的对应关系。

    4、填充关系列表数据

    5、在我们工作的列表中添加新创建的网站栏

    6、通过jQuery完成第二级和第三级项的级联

    实例——地质数据

    下面是一个在DVWP中实现的三级级联的例子:

    2010091121401820.png

    第三级和第二级级联的jQuery脚本和第一级和第二级级联的脚本很类似:

     

    <script src="/_layouts/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="/_layouts/Scripts/jquery.SPServices-0.5.6.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
            $(document).ready(function() {
                    $().SPServices.SPCascadeDropdowns({
                            relationshipWebURL: "/",
                            relationshipList: "代纪关系", 
                            relationshipListParentColumn: "Dai",    
                            relationshipListChildColumn: "Ji", 
                            relationshipListSortColumn: "Ji", 
                            parentColumn: "代",
                            childColumn: "纪",
                            promptText: "(无)"
                                                                                });
                    $().SPServices.SPCascadeDropdowns({
                            relationshipWebURL: "/",  
                            relationshipList: "纪统关系", 
                            relationshipListParentColumn: "Ji", 
                            relationshipListChildColumn: "Tong", 
                            relationshipListSortColumn: "Tong",  
                            parentColumn: "纪",
                            childColumn: "统",
                            promptText: "(无)"
                                                                                });
    
     })
    </script>

    这里需要注意的还是在创建网站栏和关系列表时,中文名称的命名一定要先起一个不含空格的字母组成的名字,然后再修改成中文的显示名称。以保证内部名称的单纯性。

    代码的运行效果和设想的一样!

    而且,更加人性化的地方是,对于一个子项对应多个父项的情况,如果父变了,而之前选中的子项对当前的父仍然有效的话,该子项值还会保持选中状态。不管是在二三级之间,还是在一二级之间都是如此。当然,对于上面的地层来说,不可能出现交插的情况。但如果是“工作地点-分组-职位”的话就完全有可能出现这种情况了。不同的工作地点下可能存在同一个组,或者不同的组中可能存在同一个职位。此时,父发生变化,只要子还是对于新的父项有效,则其值仍然会保持选中状态。而不是像一般情况那样被清空。

     

    下一次:现在我们已经在查阅项字段中填充了初始数据,并且创建了关系列表,如果关系列表能够实现列表项标题的“自命名”就好了。接下来的扩展DVWP系列中我们将通过一小段jQuery来实现该功能。

     

    参考资料

    SharePoint:Extending the DVWP - Part 21:Cascading Dropdowns - Three-tier Cascade

    展开全文
  • 设计模式坑系列,紧接前文(距离上次写笔记又过去了一个多月,我也不知道怎么加班加着加着就一个月了-_-!) 正文 定义 工厂模式是指提供一个创建对象的接口而不保留具体的创建逻辑,可以根据输入类型创建对象。让...
        

    前言

    设计模式填坑系列,紧接前文(距离上次写笔记又过去了一个多月,我也不知道怎么加班加着加着就一个月了-_-!)

    正文

    定义

    工厂模式是指提供一个创建对象的接口而不保留具体的创建逻辑,可以根据输入类型创建对象。让子类自行决定实例化哪一种工厂类,实际的创建对象过程在子类中进行。在创建相似子类的时候,执行重复操作。(觉得我说的太抽象没关系,马上就到举例子环节)

    具体实现

    前面的描述可能还是稍显抽象,举个游戏里面的例子,我们需要实现一个生产游戏角色的RoleMaker工厂,达到以下目的:

    var warrior = RoleMaker.factory('warrior')//生产一个战士
    var mage = RoleMaker.factory('mage')//生产一个法师
    var priest = RoleMaker.factory('priest')//生产一个牧师
    warrior.introduce()// 输出 '我是一个战士,我的特长是近战'
    mage.introduce()// 输出 '我是一个法师,我的特长是魔法'
    priest.introduce()// 输出 '我是一个牧师,我的特长是治疗'

    在这里,我们可以看到形如var warrior = RoleMaker.factory('warrior')的语句,就是使用RoleMaker工厂生产了一个战士的过程,这里的战士法师牧师都是角色的一个子类。

    接下来就是如何实现上面的RoleMaker类,最核心的思想还是原型链继承(忘记的同学请自行补课,磨刀不误砍柴工),具体的实现代码如下:

      //父类
      function RoleMaker() {
        // 这里是父类的属性
      }
    
      RoleMaker.introduce = function () {
        return '我是一个' + this.type + ',我的特长是' + this.specialty
      }
    
      //工厂方法
      RoleMaker.prototype.factory = function (type) {
        var role;
        // 这里我们直接把子类构造函数都保存在父类的静态属性中,这样的好处是不污染全局命名空间,同时方便查找。实际上当然也可以直接用`switch-case`实现
        if (typeof (RoleMaker[type]) !== "function") {
          //对未指定子类的处理,这里是直接抛出错误,也可以为未指定类型做默认值处理
          throw {
            name: 'Error',
            message: type + 'does not exist'
          }
        }
        if (typeof (RoleMaker[type].prototype.introduce !== "function")) {
          // 判断是否已经实现继承,注意只继承一次,当然由于只是原型链继承这里判断条件也可以用`RoleMaker[type].constructor===RoleMaker`
          RoleMaker[type].prototype = new RoleMaker()
        }
    
        role = new RoleMaker[type]() //实例化,也就是实际创建对象的过程
        return role
      }
    
      // 每个子类的构造函数
      RoleMaker.warrior = function () {
        this.type = "战士",
          this.specialty = "近战"
      }
      RoleMaker.mage = function () {
        this.type = "法师",
          this.specialty = "魔法"
      }
      RoleMaker.priest = function () {
        this.type = "牧师",
          this.specialty = "治疗"
      }

    以上代码比较简单,来回顾下前文说道的几个特点:

    1. 使用者只需要知道特定子类的名称就可以直接生产对应的子类,无需知道具体实现逻辑
    2. 实际的创建对象过程在子类中进行
    3. 在创建相似子类的时候,执行重复操作(每个子类只做一次的继承)

    补充一个实例

    实际上,js的Object()函数,就很符合工厂模式的特征:

    var n = Object(1)
    n.constructor === Number
    var s = Object('1')
    n.constructor === String
    var b = Object(true)
    n.constructor === Boolean

    小结

    自我感觉设计模式系列由于还是处于学习阶段,实践经验相对较少,所以写起来还是偏向于读书笔记类,所以可能有很多地方都显得粗糙。权当做先占个坑,等后续有更深入理解再回来补上。
    然后惯例感谢之前的热心读者,尤其是为我指出错误的小伙伴。
    然后依然是每次都一样的结尾,如果内容有错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,转载请征得同意后著明出处,如果有问题也欢迎私信交流,主页添加了邮箱地址~溜了

    展开全文
  • 我们都知道PreparedStatement可以防止...**注意:如果入的值中有'单引号,似乎也没关系,数据库产商的PreparedStatement底层的实现类照样在值的两边加上'单引号,并且会把值中的'单引号转义。** 不知道大家怎么看呢?
  • SQL语法大全

    2014-03-30 11:00:11
    CREATE TABLE 数据表名称(字段1 类型1(长度),字段2 类型2(长度) …… ) 例:CREATE TABLE tab01(name varchar(50),datetime default now()) DROP TABLE 数据表名称 (永久性删除一个数据表) 4. 记录集对象的方法:...
  • 2.2数据结构与算法关系 18 计算机界的前辈们,是一帮很牛很牛的人,他们使得很多看似没法解决或者很难解决的问题,变得如此美妙和神奇。 2.3两种算法的比较 19 高斯在上小学的一天,老师要求每个学生都计算1+2+…+...
  • 你人生的道路上,高考志愿要面临哪个城市、哪所大学、具体专业等选择,由于选择方式的不同,遍历的次序就完全不同。 6.8.1二叉树遍历原理 174 6.8.2二叉树遍历方法 175 6.8.3前序遍历算法 178 6.8.4中序遍历算法 ...
  • c#学习笔记.txt

    热门讨论 2008-12-15 14:01:21
    另外他对我上一集中说Microsoft越来越不要脸也极为生气,因为相比之下,Sun也不怎么样,微软已经将C#提交设在日内瓦的ECMA(European Computer Manufacturers' Association,国际标准化机构欧洲电子计算机工业会)并...
  • 大话数据结构

    2019-01-10 16:35:22
    你人生的道路上,高考志愿要面临哪个城市、哪所大学、具体专业等选择,由于选择方式的不同,遍历的次序就完全不同。 6.8.1二叉树遍历原理 174 6.8.2二叉树遍历方法 175 6.8.3前序遍历算法 178 6.8.4中序遍历算法 ...
  • 大话数据结构 程杰

    2018-09-01 10:06:43
    你人生的道路上,高考志愿要面临哪个城市、哪所大学、具体专业等选择,由于选择方式的不同,遍历的次序就完全不同。 6.8.1二叉树遍历原理 174 6.8.2二叉树遍历方法 175 6.8.3前序遍历算法 178 6.8.4中序遍历算法 ...
  • 6.2.1 结点分类 152 6.2.2 结点间关系 152 6.2.3 树的其他相关概念 153 6.3 树的抽象数据类型 154 6.4 树的存储结构 155 6.4.1 双亲表示法 155 6.4.2 孩子表示法 158 6.4.3 孩子兄弟表示法 162 6.5 二叉树的定义 ...
  • 大话数据结构-程杰

    2014-07-13 23:45:52
    你人生的道路上,高考志愿要面临哪个城市、哪所大学、具体专业等选择,由于选择方式的不同,遍历的次序就完全不同。 6.8.1 二叉树遍历原理 174 6.8.2 二叉树遍历方法 175 6.8.3 前序遍历算法 178 6.8.4 中序...
  • SAP屠夫作品汇总

    2016-01-02 20:11:04
    如图7-[2],在vendor的control页的Account control的Customer上Customer name 80005803. 189 如图8-[2],在payment transaction accountings页选上Clng with Cust.标志 189 Asset Accounting 197 折旧方法和折旧码 ...
  • 罪刑数据库一共有288万条训练数据,要做的是202类型的罪名多分类问题.本项目采用的方式为: 训练数据规模 数据向量表示 模型 训练时长 准确率 20W doc embedding svm 0.5h 0.83352184 288W doc embedding svm...
  • excel的使用

    2012-11-25 17:06:01
    先在一单元格内入“*”或“~”等符号,然后单击此单元格,向右拖动鼠标,选中横向若干单元格,单击“格式”菜单,选中“单元格”命令,在弹出的“单元格格式”菜单中,选择“对齐”选项卡,在水平对齐下拉列表中...
  • 在Js里正则表达式是用RegExp类型来支持的,关于正则可以看看之前写的一篇文章,用python来描述的如何读懂正则。 <p>Js也支持三种模式,gim,表示全局,不区分大小写,多行。 ...
  • C 标准I/O库粗略实现

    2020-12-08 19:40:13
    写这篇文章主要是帮助自己理解下标准I/O库大体是怎么工作的。 <h3>fopen与open之间的关系 操作系统提供的接口即为系统调用。而C语言为了让用户更加方便的编程,自己封装了一些函数,组成了C库。而且不同...
  • 问题4-4:从什么地方可以查阅到以太网帧格式中的“类型”字段是怎样分配的? 问题4-5:是什么原因使以太网有一个最小帧长和最大帧长? 问题4-6:在双绞线以太网中,其连接导线只需要两对线:一对线用于发送,另一对...
  • 新版Android开发教程.rar

    千次下载 热门讨论 2010-12-14 15:49:11
    ----------------------------------- Android 编程基础 1 封面----------------------------------- Android 编程基础 2 开放手机联盟 --Open --Open --Open --Open Handset Handset Handset Handset Alliance ...
  • 深入浅出 - Redux

    2021-01-08 14:31:52
    我们不用关心Reducer和Action是怎么关联在一起的,Store已经帮我们做了这些事。。 详细介绍 这部分主要讲解redux如何在项目中使用。 <h3>Action <p>Action 是一个普通对象。 <p>redux约定 Action 内使用一个...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

关系类型怎么填