本帖最后由 半夏花开 于 2018-7-11 16:07 编辑
vue + element 搭建网页是一件不错的选择 element网页布局 //element官网提供了很多布局结构,这只是一些布局心得,网站布局都是至上而下,至左而右<el-row>
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
<el-col :span="6" ffset="6">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row>
//布局可能经常用到的就是offset,个人感觉element的布局分布与bootstrap相似。<el-row></el-row>分为24网格
<el-col :span="6" ffset="6">
:span 占用的网格数 offset向右平移的网格数
常用的可以通过flex布局(数据来源element ui)
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
flex element布局 定义type为 flex,justify 可选start, center, end, space-between, space-around start 左边开始排列
center 居中排列
end 右边开始排列
space-between 左右开始平分排列
space-around 居中平分排列 布局常用也差不多这样,考虑响应式布局带上xs,sm,md,lg xs <768px
sm ≥768px
md ≥992
lg ≥1200
参考资料:http://www.makeru.com.cn/
web学习交流群:362513833
|