Question

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

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

您可以将图像设置为背景而不重复它。您还需要设置最小高度和宽度，以确保以后可以看到图像。如果将图像存储为base64编码，也可以将图像存储在css文件中。

一般情况下，我只会修复指向图片的链接。尝试使用以单斜杠开头的绝对URL。

Answer 2

你如何将图像放入CSS？我建议在CSS中添加斜杠（如果有的话）。这会立即将列表项的数量减少到3 - 所以它更多＆＃34;语义＆＃34;。您不应该只有一个列表项来表示斜杠。

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

减少列表项的数量后，请考虑以下之一：

（简单的解决方案）将图像放在标记中并将其标记为标记
（更多＆＃34;正确＆＃34;解决方案）为您的锚设置样式：

<强> 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');
}

这样可以仍然可以阅读文本（搜索引擎，屏幕阅读器），但仍然保持视觉吸引力。

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

2 个答案: