.nav li:after{
content:"";
position:relative;
display:block;
float: right;
background: linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
width:1px;
height:15px;
top:19px;
right:-15px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
/*display:none;*/
background:none;
}
content:"";
position:relative;
display:block;
float: right;
background: linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
width:1px;
height:15px;
top:19px;
right:-15px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
/*display:none;*/
background:none;
}
2017-08-23
个人理解
css 的::before和::after 是在选择的元素的内部 前插入 和内部后插入
而
jq的 befor()和 after()是在选择的元素的外部前插入 和外部 后插入
很容易混淆
css 的::before和::after 是在选择的元素的内部 前插入 和内部后插入
而
jq的 befor()和 after()是在选择的元素的外部前插入 和外部 后插入
很容易混淆
2017-08-23
2n+1 和 2n-1的效果一样 是为什么呢
先说说2n+1
2*0+1=1
2*1+1=3
2*2+1=5
2*3+1=7
再看看 2n-1
2*0-1=-1 注意 复数不匹配 继续往下
2*1-1=1
2*2-1=3
2*3-1=5
2*4-1=7
所以 结果一样的
先说说2n+1
2*0+1=1
2*1+1=3
2*2+1=5
2*3+1=7
再看看 2n-1
2*0-1=-1 注意 复数不匹配 继续往下
2*1-1=1
2*2-1=3
2*3-1=5
2*4-1=7
所以 结果一样的
2017-08-23
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
<p>相邻元素P</p>
<div>
相邻元素DIV
</div>
#brand:target~div {
background: orange;
color: #fff;
display:block;
}
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
<p>相邻元素P</p>
<div>
相邻元素DIV
</div>
#brand:target~div {
background: orange;
color: #fff;
display:block;
}
2017-08-23
这个解说实在是太有误导性了。
这个选择器的原意是：The :first-child is a CSS pseudo class that represents the first element in a group of sibling tags.
翻译过来就是：这个伪类选择器表示一组兄弟标签中的第一个元素。
也就是说，假如我选中了一组 <li> ,那么这个选择器就是针对这组li ,并且作用于第一个元素（相对于这组li的共同父元素）。
这个选择器的原意是：The :first-child is a CSS pseudo class that represents the first element in a group of sibling tags.
翻译过来就是：这个伪类选择器表示一组兄弟标签中的第一个元素。
也就是说，假如我选中了一组 <li> ,那么这个选择器就是针对这组li ,并且作用于第一个元素（相对于这组li的共同父元素）。
2017-08-22
css3选择器 和jq选择器有点类似 不过 css3选择器 不支持 a[href!="box1"] 这种 不等于的写法
2017-08-22
background:linear-gradient(to top left,red,blue 10%,yellow);
此处的10% 代表 blue颜色 渐变位置在10％处 而不是默认的 平分1/3处
此处的10% 代表 blue颜色 渐变位置在10％处 而不是默认的 平分1/3处
2017-08-22
大家注意 如果颜色 后面跟了一个百分比 如代码
background:linear-gradient(to top left,red,blue 10%,yellow);
里面的 blue 10% 代表 blue 在 渐变位置的 10%处
background:linear-gradient(to top left,red,blue 10%,yellow);
里面的 blue 10% 代表 blue 在 渐变位置的 10%处
2017-08-22
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top /50% 40%,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left bottom /cover ;
多重背景的 如果有重叠 后面添加的背景在底下
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left bottom /cover ;
多重背景的 如果有重叠 后面添加的背景在底下
2017-08-22
可以填cover或者100%又或者300px 140px； 其实效果不一样
300px 140px 原理是 水平拉伸或压缩到300px长度 垂直拉伸或压缩到140px高度 这个可以自定义 改成300px 120px 就会发现 差距
cover 和 100% 则是 1：1等比拉伸
300px 140px 原理是 水平拉伸或压缩到300px长度 垂直拉伸或压缩到140px高度 这个可以自定义 改成300px 120px 就会发现 差距
cover 和 100% 则是 1：1等比拉伸
2017-08-22
是不是这么理解
background-origin 表示从哪里 开始铺 背景图
background-clip 表示铺完之后 从哪里 开始裁切 铺好的背景图
background-origin 表示从哪里 开始铺 背景图
background-clip 表示铺完之后 从哪里 开始裁切 铺好的背景图
2017-08-22
background-clip: content-box; 从“内填充区域”开始裁切。 为什么居然错误，还非要填padding-box 才能通过，padding-box 不是重内边距开始裁切吗
2017-08-22
已采纳回答 / hello_2
position：fixed，left:50%是绝对定位，这个50%是相对于window而言的，也就是浏览器窗口。而translate：-50%，代表将元素向左移动50%长度，这个50%是相对元素自身而言的。这两个语句配合起来，可以使元素居中。如果你单独删除一个，比如left:50%,就只剩下元素向左移动50%的效果了，所以不能正常显示。不懂得话建议你去看看css定位的知识,以及各种居中效果如何实现的
2017-08-21