War*_*ick 2 html javascript css
尝试使用salvattore.(min).js来实现列,但除非我在<head>元素中内联salvattore.js代码,否则javascript不起作用.
这是我的test.html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
@media screen and (max-width: 480px){
#grid[data-columns]::before {
content: '1 .column.size-1of1';
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 769px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
/* Again, youre free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
</style>
<script src='/salvattore.min.js' type='text/javascript'></script>
</head>
<body>
<div id="grid" data-columns>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
<div>Item #4</div>
<div>Item #5</div>
<div>Item #6</div>
<div>Item #7</div>
<div>Item #8</div>
<div>Item #9</div>
<div>Item #10</div>
<div>Item #11</div>
<div>Item #12</div>
<div>Item #13</div>
<div>Item #14</div>
</div>
</body>
</html>
salvattore.(min).js正在加载和运行,因为当窗口被挤压时它正在改变:: before伪元素,但是Item div显示为块,因此呈现为垂直列表(无论如何我调整窗口大小).
我注意到,如果我用<script>标签替换
<script type="text/javascript">
... cut and paste salvatorre.js (not the min.js) here ...
</script>
它有效,但这显然是不好的形式.我正在使用Chrome和IE进行测试,但都无法正常工作.有什么建议吗？
小智 5
如果你还在寻找答案......我发现我需要在关闭body标签之前包括salvattore.min.js而不是在标题中.
<script src="js/salvattore.min.js"></script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
2458 次 |
| 最近记录： |