tor*_*rie 6 html css materialize
我想创建一个带有白色背景和黑色文本的导航栏,但是无法将导航栏中的链接中的文本变为白色.
我尝试过的事情:
- 将类"black-text"添加到li标签,ul标签,周围的div和nav标签
- 在我的application.scss文件中为每个li标签定义一个类.
- 添加li,nav,a {color:black; 到我的application.scss文件
这是导航栏的html:
<header class="nav">
<nav>
<div class="nav-wrapper white">
<a href="/" class="brand-logo black-text">GlobalPursuit</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><%= link_to "Pursuits", pursuits_path %></li>
<li><%= join_dashboard_path %></li>
<li><%= login_logout_path %></li>
<li><%= trips_cart_display %></li>
</ul>
</div>
</nav>
</header>小智 9
随着向html添加样式更改将起作用,我建议保留在您选择的materializecss框架内.
<div class="nav-wrapper"></div>
此导航栏背景颜色的默认值为粉红色,但只需添加其中一种内置颜色/阴影,您将获得非常酷的效果.
<div class="nav-wrapper blue lighten-1></div>
现在我的导航栏有浅蓝色背景颜色.同样适用于文本.
<div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
这将生成带有蓝色文本的卡片面板.希望这可以帮助.
答案基于http://materializecss.com/color.html
小智 5
尝试使用rails，我为我工作，因此，如果您修改样式。见整页。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<style>
nav ul li a{
color: black;
}
</style>
</head>
<body>
<header class="top-nav">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li class="active"><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>