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