css布局框架及传值 |css图片滚动

//Bootstrap 布局框架
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//Foundation 布局框架
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

布局框架使用起来非常简便，例如列的布局：

//Bootstrap 列布局
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>This is a column.</p>
</div>
//Foundation 列布局
<div class="column small-12 medium-6 large-4 xlarge-3">
<p>This is a column.</p>
</div>

除了布局框架，在前端开发中经常需要进行组件之间的传值操作。下面介绍两种传值方式：URL 参数传值和本地存储传值。

//URL 参数传值
<a href="details.html?id=123&name=abc">Details</a>
//details.html 页面获取参数
var id = getUrlParam('id');
var name = getUrlParam('name');
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
//本地存储传值
localStorage.setItem('key', 'value');
var value = localStorage.getItem('key');

以上就是布局框架及传值的介绍，希望对前端入门学习者有所帮助。