Boootstarp 笔记 （一）

section:nth-child(2n+1){    background-color: #fff;}

基偶选择器

body {    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;}

作为Bootstarp字体初始化的一种补充

@font-face {    font-family: 'itcast';    src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');}[class^="icon-"],[class*=" icon-"]{    font-family: itcast;    font-style:normal;    /* 防止图标斜体 */}.icon-mobilephone::before {  content: "\e908";  font-size: 13px;}.icon-telephone::before {  content: "\e909";  font-size: 15px;}.icon-logo::before {  content: "\e93e";}.icon-icon::before {  content: "\e920";}

用font-face导入一些字体图标 后面的URL做备用 formart指文件的格式
后面的选择器分为两组 第一组表示class为icon-开头的元素 第二组为 子字符串包含 icon-的元素 与之相近的选择器还有 [class~="icon-"] 和
[class$="icon-"] 分别代表 classname 包含xx 和 以xx结束 这里用上诉方式或者用~=都是可以的
字体的实际调用要考before伪类来完成 在后面插入

通过给父容器设置 text-center可以让子元素居中 Bootstarp 预设样式

#header .header-topbar-phone-link img{    display: none;}#header .header-topbar-phone-link:hover img{    display: block;}

这是一种类似下拉框的效果 让img默认none 然后在父元素 也就是a标签hover 选择子元素img block
但是有很多缺陷 第一是会撑开父元素 第二是这东西的所在位置经常不够居中
所有我们需要修改他的样式

#header .header-topbar-phone-link img{    display: none;    position: absolute;    left: 50%;    margin-left: -60px;    top: 28px;}#header .header-topbar-phone-link:hover img{    display: block;}

注意 bootstarp帮我们设置了夫元素为realtive 让元素左边距父元素左边框为父元素的50% 然后让他往左边偏移 自己像素的一半 这样就达到了居中且不撑开容器的效果

出现了一个问题 bootstarp很多东西都做了一个浮动处理 你就很可能会出现其他元素被干扰 别慌张 在干扰元素前写个div.clearfix可以达到效果 但是又有问题爆发 就是会造成这个父容器的高度被撑开1个px 你的元素会被顶下去一个px 肉眼很容易就看出问题 我的最终解决方法是触发浮动元素的父容器的BFC (更正 完全没有float 被顶旁边去的原因是上面的元素高度多了1px 下面的元素往旁边被顶了)

第二个问题是 nav导航static top 默认是决定定位的 而且是z-index 1000 你要是想某些东西覆盖在他上面呢 得设置他的z-index大于1000