发表于: 2017-03-31 20:42:01

1 648


完成的事情:

完成了任务10。


flex布局的兼容性。

旧版:display:box;

过渡版:display:flex box;

标准版:display:flex;

要兼容,就要注意顺序,因为要向下兼容。越是旧语法,越要放在下面。

display: -webkit-flex;  /* 新版本语法: Chrome 21+ */

display: flex;        /* 新版本语法: Opera 12.1, Firefox 22+ */

display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

display: -moz-box;     /* 老版本语法: Firefox (buggy) */

display: -ms-flexbox;   /* 混合版本语法: IE 10 */ 


:before是可以在元素前面加上内容的伪元素,:after是在后面加上内容。

html:
  1. <p>ello Worl</p>
css:
  1. p:before{
  2.    content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
  3. }
  4. p:after{
  5.    content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
  6. }

效果:



了解了label标签

label标签的for属性
先看显式的代码:
  1. <form>
  2.  <label for="male">Male</label>
  3.  <input type="radio" name="sex" id="male" />
  4.  <br />
  5.  <label for="female">Female</label>
  6.  <input type="radio" name="sex" id="female" />
  7. </form>
for属性使两个label分别与id为male和female的input标签绑定

再看隐式的代码,不用for:
  1. <label>Date of Birth: <input type="text" name="DofB" /></label>


明天的计划:

开始任务11。


遇到的问题:

如何更改默认radio的样式?

解决方法:

1 label元素先绑定type="radio"的input元素,label 中可写文本。
2 将为radio的input的display属性设置为none。
  1. input[type=radio]{
  2.    display: none;
  3. }
3 label的样式设置为相对定位,label:before设置为绝对定位,其他属性自定义,别忘了content。
4 使用:checked设置选中后的效果,别忘了content。
  1. input[type=radio]:checked + label:before {
  2. }


收获:

bootstrap的元素样式如果需要改,能覆盖就覆盖,若覆盖无效,就直接改原代码样式。






返回列表 返回列表
评论

    分享到