我有一个部分和一个 div 一个接一个,我想让 div 稍微低于 margin-top:-10px 的部分,以切断我用border-radius创建的圆角。现在所发生的只是顶部部分向上移动,其中的文本位于 div 顶部,而不是部分本身。这是 jsfiddle http://jsfiddle.net/37PkJ/中的内容。基本上我不会让橙色和黑色落在蓝色之下。谢谢
html/wordpress
<?php
/*
Template Name:Home
*/
?>
<?php get_header(); ?>
<section id="mastHead">
<div id="navResponsive">
<ul>
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#footer"><i class="icon-twitter"></i></a></li>
<li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#footer"><i class="icon-twitter"></i></a></li>
<li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</section>
<div id="menu">
<div id="menuCenter">
<a href="toggleMenu"><i class=" icon-reorder"></i></a>
</div>
</div>
<?php get_footer(); ?>
css
html {
font-size: 62.5%; }
#container {
background: aqua;
width: 100%; }
#mastHead li {
list-style-type: none; }
ul {
margin: 0;
padding: 0; }
#navResponsive {
display: none; }
#menu {
display: none; }
/*-------------MEDIA QUERIES BITCHES---------------*/
/*-------------------------------------------------*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
#navResponsive {
display: block;
background: #44749d;
width: 50%;
margin-left: auto;
margin-right: auto; }
#navResponsive li {
text-align: center; }
#navResponsive a {
font-size: 3em; }
#nav {
display: none; }
#menu {
display: block;
width: 50%;
background: orange;
margin-left: auto;
margin-right: auto; }
#menuCenter {
width: 4.5em;
padding: 1em;
border-radius: 0.5em;
margin-left: auto;
margin-right: auto;
background: black; }
#menuCenter a {
text-decoration: none; }
#menuCenter i {
font-size: 5em; } }
/*---------------END MEDIA QUERIES-----------------*/
/*-------------------------------------------------*/