兼容模式就是:
background-color:rgb(255,255,255);
alpha:0.5;
filter:alpha(opacity=50);
background-color:rgb(255,255,255);
alpha:0.5;
filter:alpha(opacity=50);
2016-10-08
设置多行省略: .test_demo{ text-overflow:ellipsis; overflow:hidden; width:200px; background:#ccc; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
这只能兼容webkit内核的,如果想要兼容其他浏览器,需要用到伪元素:after中的content来显示...,代码如下:
这只能兼容webkit内核的,如果想要兼容其他浏览器,需要用到伪元素:after中的content来显示...,代码如下:
2016-10-08
学完一章,一做题才发现,之前学的还没有完全掌握.需要多做练习,才能巩固已学的知识,对学完的知识也有更深入的了解.希望慕课能多推出一些练习让学员来完成.一定会有更好的学习效果.
2016-10-08
/*使用伪元素制作导航列表项分隔线*/
.nav li{background:linear-gradient(to bottom,#e74c3c,#a82724,#e74c3c) no-repeat right/1.5px 20px;}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child {
background: none;
}
.nav li{background:linear-gradient(to bottom,#e74c3c,#a82724,#e74c3c) no-repeat right/1.5px 20px;}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child {
background: none;
}
2016-10-07
data-是自定义属性的写法,后面接你的属性名字,例如data-src-600px,data-laowang
img[data-src-600px]是用css选择包含自定义属性值[data-src-600px]的img标签
content表示生成文本
它里面的attr
content:attr(data-src-800px,url),表示获取自定义属性(左边的)的值(右边的)
img[data-src-600px]是用css选择包含自定义属性值[data-src-600px]的img标签
content表示生成文本
它里面的attr
content:attr(data-src-800px,url),表示获取自定义属性(左边的)的值(右边的)
2016-10-05
试验了下 .effect::before ,.effect::after{
content:"11";
height:10px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
<h3>Shadow Effect </h3>
</div>
.effect::before ,.effect::after插入的内容是在div 里面!
content:"11";
height:10px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
<h3>Shadow Effect </h3>
</div>
.effect::before ,.effect::after插入的内容是在div 里面!
2016-10-05