我试图让导航栏粘到顶部,当用户向下滚动到导航栏然后在用户向上滚动通过导航栏时解开.我知道这只能通过JavaScript实现.我是JavaScript的初学者,所以越容易越好.JSFIDDLE就在这里.
HTML如下:
<section class="main">
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup"><img src="#""></div>
<div id="header"></div></div></div></div></div></div></div>
<div class="whiteboard">
<h1><a href="#">HELLO GUYS</a></h1> </div>
</div>
<div class="bg1">
<h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>
CSS如下:
.main{text-align:center;}
h1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
padding: 10px 10px;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#e94f78;
text-decoration: none;
color:yellow;
background-image:url;
}
h1 a{
text-decoration: none;
color:yellow;
padding-left: 0.15em; …我有点问题。出于某种原因，我的代码中不断出现水平滚动条。我已经尝试了所有方法，但似乎无法将其删除。以下链接是代码的实时预览。
HTML
<body>
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo"><a href="#">Magna Contra</a></li>
<li class="active"><a href="#">Blog With Us</a></li>
<li><a href="#">Compxta</a></li>
<li><a href="#">Laurie</a></li>
<li><a href="#">SUBTITLESOFLIFE</a></li>
</ul>
</div>
</div>
</section>
<div class="bg">
<h1>SUBTITLESOFLIFE</h1>
</div>
<ul class="check">
<li class="bold"><a href="#">Hot Trends</a></li>
<li class="topic"><a href="#">Daft Punk</a></li>
<li class="topic"><a href="#">#bbcqt</a></li>
<li class="topic"><a href="#">Petite Noir - Major</a></li>
<li class="topic"><a href="#">Alt J Album Teaser</a></li>
<li class="topic"><a href="#">Materialistic Happine$$</a></li>
<li class="topic"><a href="#">WOLF</a></li>
</ul>
<div class="contar">
Lorem Dosi
</div>
</body>
</html>
CSS
ul
{
list-style-type:none;
margin:0; …我无法在响应式图像中居中文本.我试过了vertical-align:middle.它使文本垂直居中,但它位于图像的旁边,而不是图像的前面.
正如您所看到的,我的图像具有响应性,因此我希望文本随图像一起移动.预先感谢您的帮助.
<div class="image">
<img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv" />
ASAP ROCKY - Jack New City</div>
</div>
img.ri
{
position: relative;
max-width: 75%;
display: inline-block;
vertical-align: middle;
}
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover …