每周总结②

7-4

1:bootstrap①无序列表②按钮组

2:模态框事件绑定失效 原因:放在<body>中的模态框内可以显示但是无法触发时间,但和触发按钮一同放在template中就可以了


7-5

1:bootstrap的 .dropdown-menu{}字数过多会超出

  解决方法:.dropdown-menu{

          min-100px;

          left:0;

          right:auto; 

                    }

2:backbone中event绑定事件用的是Jquery的 click这种,而不是onclick

3:通过隐藏,显示元素来代替删除,添加元素完成功能


7-6

1:一个按钮绑定多个事件---直接写


7-7

1:Metro风格

2:underscore.js 函数式编程

3:  stick up 单页导航

4:  sass,less

5:  gulp,grunt

6:  bootstrap编码规范

7:  html5{data-*属性---见本博客园网摘

      aria-*,role---辅助工具识别

     }

8.  元素定位 position---当不为static时可用top/left/right/bottom

9.  box-sizing ①content-box ②border-box --- 元素设定宽高决定的内容

10: a[href^="javascript:"] javascript:表示执行段代码 javascript:;表示什么都不做

11: outline属性  在边框外侧加轮廓(不占空间)

12: outline-offset 偏移量

13:border-radius

14: 各种灰色在#eee #333在bootstrap中使用

15:clip:react(……)剪裁绝对定位的元素

16: sr-only 保证屏幕阅读器正确读取不会影响UI的视觉呈现

17:display:inline-block


7-9  阅读bootstrap CSS部分源码

1:white-space

2: overflow:scroll 滚动条

3:(转)

电话面试,被问到行内元素和块级元素的区别。

我回答说,块级元素独占一行,可设置宽高。行内元素不会独占一行,且不能设置宽高。

然后面试官问我,img和input是行内元素么,他们能设置宽高吗?

我一想,是啊,这两个也是行内元素,不过却能设置宽高啊。于是当场被问住了,说不出所以然。。。

然后自己查阅资料,发现了这篇博文,为何img、input等内联元素可以设置宽、高(http://blog.csdn.net/jlds123/article/details/8647448)

豁然开朗,原来img和input是替换元素,他们是有内在尺寸的。如果不设定宽高,会以默认宽高显示。需要注意的是,几乎所有的可替换元素都是行内元素。

而行内元素中的非替换元素,如<a> <span> <em> <i>等元素是不可设定宽高的。

4:<div>1</div><div style="float:left">2</div>依旧在第二行

5:鼠标悬停CSS选择变色 tr:hover{background:!@#}

6: class*="col-"选择所有没有这个字符的元素

7:form-control box-shadow和box-color使用CSS3动画进出

8:  disabled 效果 ①cursor:not-allowed ②background-color:#eee

9:  label包裹的范围均是其input的效果区

10: .btn ①type-submit会触发默认事件提交表单 ②background-color会扩展到内边距 ③vertical-aligh-middle ④text-align - center


7-10

1: opacity和rgba

2: pointer-events:none可以禁用点击事件

3:bootstrap插件应用方式 ①data属性API直接使用(优先)

             ②JS方式

             ③第一种方式一个元素只能绑定一个插件,如果需要触发两个插件,使用一个元素包裹它

 4:随着滚动栏的变化改变CSS样式(https://tradetrendy.com/)---它上面的$(window)写成$window却可以用,但是我不可以,估计用了什么别的框架吧

<script>
var toggleHeaderFloating = function() {
// Floating Header
if ( $(window).scrollTop() > 80 ) {
$("div").addClass( 'floating' );
} else {
$("div").removeClass( 'floating' );
};
};

$(window).on( 'scroll', toggleHeaderFloating );
</script>

如果可以的话,希望下个星期可以看完bootstrap的CSS和JS部分,把疑问也解决,再下个星期仔细学习一下backbone和underscore

原文地址:https://www.cnblogs.com/cndotabestdota/p/5658473.html