-2
我盡我所能將其刪除。我認爲它可能不是直接在它下面的菜單，這是我想要的，所以我在適當的位置做了填充，但它沒有效果。有什麼建議麼？ FIDDLE如何去除標題圖像周圍的空白區域？
<!DOCTYPE html>
<html>
<head>
<style>div{
border-left: 1px solid;
}</style>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="link here"><img src="http://oi40.tinypic.com/iz1ag0.pngg" border="0" width="200" height="107" style=" margin: 0 auto;"></a>
<script>$(document).ready(function() {
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
});</script>
<style>
html, body {
margin:0;
padding:0;
}</style>
<style>#headerWrapper {
position: fixed;
width: 200px;
height: 100%;
background-color: black; /* Omit to see body content scroll behind radius. */
}
#headerBorder{
border: black;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
overflow:hidden;
}
#headerContent {
background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
background-position: left;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
opacity: 1;
}</style>
</head>
<body>
<div id="headerWrapper">
<div id="headerBorder">
<div id="headerContent">
<br />
<br />
<br />
Border radius is used so you can see the red background in wrapper.
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 9px;
font-weight: bold;
display: block;
background: #000000;
color: #9C9C9C;
border-bottom: 1px solid #393939;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 10px;
display: block;
font-size: 9px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
position: absolute;
top: px;
right: 15px;
padding: 0;
margin: 0;
background: none;
padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #2A2A2A;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #FFFFFF;
font-size: 9px;
}
#cssmenu ul ul a:hover {
color: #000000;
}
#cssmenu ul ul li.odd {
background: #2E2E2E;
}
#cssmenu ul ul li.even {
background: #2E2E2E;
}</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
做一個JSFiddle。除了我的頭頂，我建議在使用自己的CSS之前使用CSS重置。這將確保瀏覽器特定的CSS（每個瀏覽器都有自己的樣式表，並且它們不完全相同）被覆蓋。有很多重置可供您選擇，包括Eric Meyer的這一項：http://meyerweb.com/eric/tools/css/reset/ –
您無法在小提琴中將多個頁面放在一起。 – j08691