以下是一个基本的Vue和CSS代码示例,实现了您的要求:

HTML代码:

<template>
  <div class="container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="navbar-left">
        <img src="logo.png" alt="Logo">
      </div>
      <div class="navbar-right">
        <ul>
          <li><a href="#">简介</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">制度公告</a></li>
        </ul>
      </div>
    </nav>
    <!-- 轮播图 -->
    <div class="carousel">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 公司名称 -->
    <div class="company-name">
      有限公司
    </div>
  </div>
</template>

CSS代码:

.container {
  max-width: 1200px;
  margin: 0 auto;
  /* 其他样式... */
}

.navbar {
  width: 100%;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 其他样式... */
}

.navbar-left {
  width: 40%;
  /* 其他样式... */
}

.navbar-left img {
  max-width: 100%;
  height: auto;
}

.navbar-right {
  width: 60%;
  /* 其他样式... */
}

.navbar-right ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-right li {
  margin-left: 20px;
}

.navbar-right a {
  color: #fff;
  text-decoration: none;
}

.carousel {
  /* 其他样式... */
}

.carousel img {
  max-width: 100%;
  height: auto;
}

.company-name {
  text-align: center;
  font-size: 24px;
  margin-top: 20px;
  /* 其他样式... */
}

注意:这只是一个示例,您可以根据自己的需要进行更改和美化。也可以添加更多的内容,如页脚、博客等。

用vue,css写一个包含网站,要求如下:导航栏宽度为100%,左边40%为logo图片区域,右边60%区域中包含简介、新闻中心、制度公告;导航栏下面为轮播图,图片数量为2;轮播图下面为text,内容是有限公司

原文地址: https://www.cveoy.top/t/topic/ziQ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录