那些网站做民宿,生态农庄网站模板,西安国际网站设计,营销技巧美剧Element UI框架学习篇(一)
1.准备工作
1.1 下载好ElementUI所需要的文件
ElementUI官网
1.2 插件的安装
1.2.1 更改标签的时实现自动修改 1.2.2 element UI提示插件 1.3 使用ElementUI需要引入的文件
link relstylesheet href../elementUI/element…Element UI框架学习篇(一)
1.准备工作
1.1 下载好ElementUI所需要的文件
ElementUI官网
1.2 插件的安装
1.2.1 更改标签的时实现自动修改 1.2.2 element UI提示插件 1.3 使用ElementUI需要引入的文件
link relstylesheet href../elementUI/elementUI.min.css
!-- 先导vue.js再导入elementUI 因为elementUI是基于vue开发的页面美化插件--
script src../js/vue.js/script
script src../elementUI/elementUI.min.js/script2 栅格布局
2.1 一行一格
2.1.1 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../elementUI/elementUI.min.css!-- 先导vue.js再导入elementUI --script src../js/vue.js/scriptscript src../elementUI/elementUI.min.js/scripttitleDocument/titlestyle.a{background-color: red;}body{margin:0;}/style
/head
bodydiv idapp!-- 一行一格 占据整行的 24就为占据整行--el-rowel-col :span24 classa!-- div classa第一行/div --第一行/el-col/el-row/divscriptnew Vue({el:#app,})/script
/body
/html2.1.2 运行截图 2.2 一行多格
2.2.1 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../elementUI/elementUI.min.css!-- 先导vue.js再导入elementUI --script src../js/vue.js/scriptscript src../elementUI/elementUI.min.js/scripttitleDocument/titlestyle.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}/style
/head
bodydiv idappel-rowel-col :span5 classb2-1/el-colel-col :span14 classd2-2/el-colel-col :span5 classc2-3/el-col/el-row/divscriptnew Vue({el:#app,})/script
/body
/html2.2.2 运行截图 2.3 水平居中
2.3.1 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../elementUI/elementUI.min.css!-- 先导vue.js再导入elementUI --script src../js/vue.js/scriptscript src../elementUI/elementUI.min.js/scripttitleDocument/titlestyle.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}/style
/head
bodydiv idapp!-- 水平居中 (总长度-占据长度)/2 --el-rowel-col :span4 classa :offset103-1/el-col/el-row/divscriptnew Vue({el:#app,})/script
/body
/html2.3.2 运行截图 2.4 响应式布局
2.4.1 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../elementUI/elementUI.min.css!-- 先导vue.js再导入elementUI --script src../js/vue.js/scriptscript src../elementUI/elementUI.min.js/scripttitleDocument/titlestyle.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}/style
/head
bodydiv idapp!-- 响应式布局 sm和lg只有一个能有效--el-rowel-col classa :sm14 :lg205-1/el-colel-col classc :sm10 :lg45-2/el-col/el-rowel-rowel-col classb :sm20 :lg46-1/el-col!-- 可以sm0操作一下 --el-col classd :sm4 :lg206-2/el-col/el-row/divscriptnew Vue({el:#app,})/script
/body
/html2.4.2 运行截图
a 当宽度大于≥768px时 b 当宽度大于≥1200px时
