我是初学者，想请教一下:如何在横幅( slider )图片中制作导航栏和 Logo ，如this page .
这是我的:
body,
ul,
li {
margin: 0;
padding: 0;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
header {
background: rgba(0, 0, 0, 0.5);
padding: 10px 0;
}
header h1 {
margin: 0;
text-indent: -10000px;
background: url(images/logo.png) no-repeat;
width: 105px;
float: left;
}
header nav {
float: right;
}
header:after {
display: block;
content: "";
clear: both;
}
header nav h2 {
line-height: 0;
margin: 0;
text-indent: -10000px;
}
header nav li {
list-style-type: none;
float: left;
margin-left: 42px;
margin-top: 10px;
}
header nav li a {
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
header nav li a.current {
color: #28b8d8;
}
#main-banner img {
width: 100%;
}
#main-banner {
max-height: 700px;
overflow: hidden;
}<header>
<div class="wrapper">
<h1 class="logo">kubb</h1>
<nav>
<h2>Main Navigation</h2>
<div id="burger-nav"></div>
<ul>
<li><a href="#" class="current">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Journal</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="main-banner">
<img src="images/banner.png" alt="banner">
</div>
<main class="wrapper">
<div id="hello">
<p>
<h2>Hello! I'm Jonathon Kubb, a freenalnce Photographer.</h2>
Based in New York, I specialize in landscape, advertorial and conceptual photography.</p>
</div>
<section id="services">
<h2>What services do i offer</h2>
<ul>
<li>
<img src="images/image_1.png" alt="Landscape">
<h3>Landscape</h3>
<p>Curabitur blandit tempus porttitor. Duis mollis inceptos mollisest commodo luctus erat.</p>最佳答案
我想你想要这样的东西:
(function($) {
$.fn.slideshow = function(options) {
options = $.extend({
'timeout': 3000,
'speed': 400 // 'normal'
}, options);
// We loop through the selected elements, in case the slideshow was called on more than one element e.g. `$('.foo, .bar').slideShow();`
return this.each(function() {
// Inside the setInterval() block, `this` references the window object instead of the slideshow container element, so we store it inside a var
var $elem = $(this);
$elem.children().eq(0).appendTo($elem).show();
// Iterate through the slides
setInterval(function() {
$elem.children().eq(0)
// Hide the current slide and append it to the end of the image stack
.hide().appendTo($elem) // As of jQuery 1.3.2, .appendTo() returns the inserted element
// Fade in the next slide
.fadeIn(options.speed)
}, options.timeout);
});
};
}(jQuery));
// Name the slider
$(function() {
$('.slider').slideshow({
timeout: 7000,
speed: 1000
});
});* {
padding: 0;
margin: 0;
}
.slider {
position: relative;
width: 100%;
height: 100vh;
}
.slider li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
list-style: none;
}
.slider li .slide {
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
.slider li .slide figcaption {
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
color: white;
text-shadow: 0 0 5px black;
font-size: 60px;
text-align: center;
position: absolute;
top: -30px;
margin-top: 50vh;
left: 0;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<section>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span><img src="https://logomarts.files.wordpress.com/2015/07/logo-example2.jpg" alt="logo" width="50px;" />Project name</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<ul class="slider">
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/1d9326c2ae66befef4e39c3426adf17a.jpg)">
<figcaption>hello</figcaption>
</figure>
</li>
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/______by_Thoum.jpg)">
<figcaption>yeah</figcaption>
</figure>
</li>
</li>
</ul>
</section>
<p>Text Here</p>
<div>
<p>Some more text..</p>
</div>
</body>关于css - 横幅中的导航栏和 Logo ( slider )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37089877/