vue项目之CSS样式
vue项目中CSS样式初始化页面样式注意:element-UI中提供的组件,组件名称就是类名.el-header{}页面单独的样式,从外部引入css<style scoped>@import '../assets/css/member.css';</style>初始化默认标签样式在public文件夹下面:新建public/css/reset.css然后在index.html
·
vue项目中CSS样式
初始化页面样式
注意:
element-UI
中提供的组件,组件名称就是类名.el-header{}
- 页面单独的样式,从外部引入css
<style scoped> @import '../assets/css/member.css'; </style>
初始化默认标签样式
- 在public文件夹下面:新建
public/css/reset.css
- 然后在
index.html
引入reset.css
<link rel="stylesheet" href="css/reset.css">
https://meyerweb.com/eric/tools/css/reset/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
全局样式
- 在
src/assets/新建css文件夹
/新建global.css
缩小页面视图,保持页面结构不乱!
解决方法:给整个页面添加最小宽度,在global.css #app{ min-width: 1366px }
html, body, #app { min-width: 1366px; height: 100%; margin: 0; padding: 0; }
- 在入口文件
main.js
中导入全局样式表import './assets/css/global.css'
更多推荐
已为社区贡献9条内容
所有评论(0)