我有一个项目,需要一个CSS菜单栏,在HTML页面的右侧有一个概述面板面板。我的问题是CSS菜单栏样式表菜单不呈现。试图让这个CSS菜单栏工作,然后扩展内容链接,登录,仪表板等的代码功能。
代码:标记
<header class='header'>
<div class='header_top-bar'>
<div class='top-bar_title'>
<a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
<div class='ajax-loader' id='ajax-loader'>
<div class='ajax-loader_animator'></div>
</div>
</div>
<div class='top-bar_toggle' id='menu_toggle'>
<span></span>
<span></span>
<span></span>
</div>
<!-- <div class='top-bar_share' id='share_toggle'>
<span class='underline--white'>
SHARE
</span>
</div> -->
<div class='top-bar_menu' id='overlay_menu'>
<ul class='menu_container'>
<li class='menu_item'>
<span>.01.</span>
<a class='link-ajax' href='/'>Home</a>
</li>
<li class='menu_item'>
<span>.02.</span>
<a class='link-ajax' href='/project'>Athena Customers</a>
</li>
<li class='menu_item'>
<span>.03.</span>
<a class='link-ajax' href='/wines'>Athena Services</a>
</li>
<li class='menu_item'>
<span>.04.</span>
<a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
</li>
<li class='menu_item'>
<span>.05.</span>
<a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
</li>
</ul>
<div class='language-chooser menu_item'>
<div class='masi-agricola_wrapper hide-on-mobile'>
<a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
<img src='images/agricola.png' data-image='images/agricola.png'/>
</a>
</div>
<p class='text--subtitle'>select your language</p>
<span class='language-link'><a class='' href='/en/'>Eng</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/es/'>Esp</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/it/'>Ita</a></span>
</div>
</div>
</div>
</header>
代码:内容部分
<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">
<section class="main-content clearfix homepage">
<div class="main-content_background">
<div class="half_screen full-height-desk" id="biggest_block">
<a href="project" class="">
<div class="text-block">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena Intelligence Earth's Essential Data
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena Intelligence Login
</strong>
</div>
<img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
</div>
</a>
</div>
<div class="half_screen full-height-desk">
<a href="wines">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena: Many industries: all use Land, Food, Energy, Water
</h1>
<strong class="page-header_subtitle text--subtitle">
The Gods: Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
</div>
</div>
</a>
<a href="sustainability" class="">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Sustainability
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena : Dedication To Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
</div>
</div>
</a>
<a href="hospitality">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Hospitality
</h1>
<strong class="page-header_subtitle text--subtitle">
Land, Food, Energy, Water: That Welcomes You
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
</div>
</div>
</a>
</div>
</div>
</section>
代码:标题栏包装标签
<div class='out-loader_wrapper'>
<div class='out-loader'>
<div class='filler' id='filler'>
<img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
<div class='filler-bar'></div>
<p class='text--title' id='loader_text'>0</p>
</div>
</div>
</div>
答案 0 :(得分:0)
鉴于您没有发布完整的HTML,我无法判断您是否正确链接样式表。 HTML中没有任何内容看起来不合适,这意味着如果您无法看到呈现的样式,那么样式表未正确链接到文档,或者如果您使用预处理器则未正确导入样式表像SASS或LESS。
但是,您可以尝试以下方法:
<head>
<link href="path/to/your/menu-stylesheet.css rel="stylesheet">
@import 'path/to/stylesheet.less
中正确链接。axis
(请注意正确的扩展名,无论您的情况如何。