用vue,css写一个包含网站,要求如下:导航栏宽度为100%,左边40%为logo图片区域,右边60%区域中包含简介、新闻中心、制度公告;导航栏下面为轮播图,图片数量为2;轮播图下面为text,内容是有限公司
以下是一个基本的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;
/* 其他样式... */
}
注意:这只是一个示例,您可以根据自己的需要进行更改和美化。也可以添加更多的内容,如页脚、博客等。
原文地址: https://www.cveoy.top/t/topic/ziQ 著作权归作者所有。请勿转载和采集!