<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Résumé</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</li>
<li><a href="#">Play</a>
<ul>
<li><a href="#">Experiments</a></li>
<li><a href="#">Utilities</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="news_box" style="max-width: 400px; float: right; text-align: left;"></div>
</header>
CSS:
body {
background-color: rgb(255, 255, 255);
font-family: Helvetica;
font-size: 16px;
font-weight: 400;
line-height: 1.38;
color: rgb(21, 84, 244);
margin: 0;
margin: 0;
padding: 0;
border: 0;
}
header {
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
}
h1 {
width: 100%;
margin-top: 39px;
margin-right: auto;
margin-left: auto;
font-size: 37px;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(0,0,0);
}
.blablatext {
margin-top: 16px;
margin-right: auto;
margin-left: auto;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(21, 84, 244);
}
nav {margin: 20px auto}
nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top}
nav a {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px}
nav a:hover {background: rgba(0,0,0,0.25)}
.activeNav {background: rgba(0,0,0,0.25)}
nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px}
nav ul li ul li {display: block; float: none; margin: 0; padding: 0}
nav ul li ul li a {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px}
nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)}
.hover a {display: block;}
.hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;}
这将保持news div
下面并向右浮动
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
float: right;
}
结果
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句