html - 将图像放在 css 文件而不是 html 文件中

Question

对于我的标题，我在我的导航菜单(Portfolio/Contact/About)中使用了 ul 和 li 标签，我试图将图像文本(Portfolio/Contact/About)和斜线放在 CSS 文件中我在 HTML 文件中的 div“navigationMain”，但我尝试的每一次尝试都失败了。是否有某种方式处理 ul、li 标签并使用 CSS 将图像放置在标签内？因为我已经将我的 Logo 和标题背景放在 css 文件的标题中。我也在 Notepad++ 中创建这个网站

http://jsfiddle.net/J4h9Q/7/embedded/result/ http://jsfiddle.net/J4h9Q/8/

HTML:

<div class="header">
<div class="container"> 
<div class="headerMain">  </div>
<div class="navigationMain"> 
<ul class="nav">
<li><img src="images/portfolio2.png" alt="portfolio" id="portfoliobutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li><img src="images/about.png" alt="about" id="aboutbutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li id="contactbutton" class="contact"><img src="images/contact.png" alt="contact"></li> 
</ul>
</div>
</div>

CSS:

body,div,ul,li,p{ 
margin:0;
padding:0;
}

html,body {
margin:0;
padding:0;
}

body{
margin:0;
padding:0;
height:100%;
background: url(../images/background11.png) repeat scroll 0 0; 
}

.header {
background: black;
height: 165px;
min-width: 1075px;
}


.container {
height: 165px;
margin-left: auto;
margin-right: auto;
width: 1075px; 
}


.headerMain{
 height: 165px; 
 position: relative;
 width: 195px;
 float: left;
 left: 20px;
 top: 4px;
 background:url(../images/ARlogo8.png) no-repeat center center; 
 }


.navigationMain{
height: 154px;
margin-left: auto;
margin-top: -4px;
position: relative;
width: 665px;
right: 30px;
}



li{
display: inline;
}

.nav li{   
display: inline;
color:white;
position: relative;
top: 70px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
left: 160px;
font-size:44px;
}

Answer 1

您与将图像放入 CSS 有多大关系？我建议将斜杠(如果有的话)放在 CSS 中。这会立即将列表项的数量减少到 3 个——因此它更“语义化”。你不应该有一个列表项来表示一个斜线。

演示: http://jsfiddle.net/YBzA9/1/当您使用真实图像时，请随意调整 .nav a 中的尺寸。

减少列表项的数量后，请考虑以下其中一项:

• (简单的解决方案)将图像放在标记中的 anchor 标记内，然后收工
• (一个更“正确”的解决方案)像这样设计你的 anchor :

HTML

<ul>
    <li><a href="" id="portfolio-link">Portfolio</a></li>
    <li><a href="" id="about-link">About</a></li>
    <li><a href="" id="contact-link">Contact</a></li>
</ul

CSS

.nav li {
    background: url('http://dummyimage.com/26x34/000000/fff&text=//');
    padding-left: 26px;
}
.nav li:first-child {
    background: none;
}

.nav a {
    display: block;
    text-indent: -999px;
    height: 35px;
    width: 120px;
}

#portfolio-link {
    background: url('http://dummyimage.com/146x35/000000/fff&text=Portfolio');
}
#about-link {
    background: url('http://dummyimage.com/146x35/000000/fff&text=About');
}
#contact-link {
    background: url('http://dummyimage.com/146x35/000000/fff&text=Contact');
}

这允许文本仍然被阅读(搜索引擎、屏幕阅读器)，但仍然保持视觉吸引力。