由于项目需求,需要一个能排版移动端页面布局的插件,因此,作为前端的就首当其任了
一般情况下写代码,时间充足我都会先写一遍原生JS 效果,实例代码如下
css :
<style type="text/css">
*{
margin:0;
padding:0;
}
#target{
width:400px;
height:700px;
margin:100px auto;
border: 1px solid #333;
position:relative;
}
.header{
height:50px;
background:blue;
box-sizing: border-box;
border: 1px solid #ccc;
min-width: 320px;
cursor: all-scroll;
width: 100%;
}
.banner{
width: 100%;
height:100px;
background:aquamarine;
box-sizing: border-box;
border: 1px solid #ccc;
cursor: all-scroll;
}
.describe{
width: 100%;
height:150px;
background:pink;
box-sizing: border-box;
border: 1px solid #666;
cursor: all-scroll;
}
.details{
width: 100%;
height:300px;
background:green;
box-sizing: border-box;
border: 1px solid #666;
cursor: all-scroll;
}
</style>
html:
<body id