.NET Framework MVC Web写一个美观的主页cshtml,考试系统主页,要求界面黑色为主
时间: 2024-03-13 15:46:37 浏览: 25
好的,以下是一个.NET Framework MVC Web写的美观的主页cshtml,考试系统主页,界面黑色为主的代码示例:
```html
@{
ViewBag.Title = "考试系统主页";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<style>
body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* 导航栏样式 */
.navbar {
background-color: #333333;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.navbar-brand {
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.navbar-nav {
display: flex;
}
.nav-item {
list-style: none;
margin-left: 20px;
}
.nav-link {
color: #FFFFFF;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.nav-link:hover {
color: #CCCCCC;
}
/* 主页内容样式 */
.container {
padding: 20px;
}
h1 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.8;
}
</style>
</head>
<body>
<nav class="navbar">
<a class="navbar-brand" href="#">考试系统</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">考试列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">我的考试</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">个人中心</a>
</li>
</ul>
</nav>
<div class="container">
<h1>欢迎使用考试系统</h1>
<p>这是一个美观、简洁的考试系统主页。我们提供丰富多样的考试内容,让您随时随地进行学习和测试。现在就开始使用吧!</p>
</div>
</body>
</html>
```
这段代码中通过使用CSS样式来设置页面的背景颜色、字体颜色、字体大小、行高等样式,并且使用了Flex布局实现了顶部导航栏。你可以根据需要进行修改和调整。