vue项目之CSS样式

- 日理万妓 2023-03-12 09:25 9阅读 0赞

## vue项目中CSS样式 ##

### 初始化页面样式 ###

> 注意：
> 
> 1.  `element-UI`中提供的组件，组件名称就是类名
> 
>     .el-header{ }
> 
> 1.  页面单独的样式，从外部引入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;
>     }

### 全局样式 ###

> 1.  在`src/assets/新建css文件夹`/新建`global.css`
> 
> 缩小页面视图，保持页面结构不乱！  
> 解决方法：给整个页面添加最小宽度，在`global.css #app{ min-width: 1366px }`
> 
>     html, body, #app { 
>     min-width: 1366px;
>     height: 100%;
>     margin: 0;
>     padding: 0;
>     }
> 
> 1.  在入口文件`main.js`中导入全局样式表
> 
>     import './assets/css/global.css'