Visual Studio Code给项目添加背景图片、导航栏

一、导航栏

html:

Visual Studio Code给项目添加背景图片、导航栏

代码:

  <nav>

    <x-icon type="ios-arrow-back" size="30"></x-icon>

    <h4 class="navtext">景院打印</h4>

  </nav>

css:

Visual Studio Code给项目添加背景图片、导航栏

代码:

nav{

  position: fixed;

  background-color: red;

  width: 100%;

  height: 3rem;

}

.vux-x-icon {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translate(0,-50%);

  fill:#fff;

}

.navtext{

  position: absolute;

  left:50%;

  top: 50%;

  text-align: center;

  transform: translate(-50%,-50%);

  color:#fff;

}

二、添加背景图片

Visual Studio Code给项目添加背景图片、导航栏

代码:

.header{

  height: 300px;

  background-image: url('../assets/Jing yuan.png');

  background-repeat: no-repeat;

  background-size: 100%;

}