- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对于我的标题,我在我的导航菜单(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;
}
最佳答案
您与将图像放入 CSS 有多大关系?我建议将斜杠(如果有的话)放在 CSS 中。这会立即将列表项的数量减少到 3 个——因此它更“语义化”。你不应该有一个列表项来表示一个斜线。
演示: http://jsfiddle.net/YBzA9/1/当您使用真实图像时,请随意调整 .nav a
中的尺寸。
减少列表项的数量后,请考虑以下其中一项:
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');
}
这允许文本仍然被阅读(搜索引擎、屏幕阅读器),但仍然保持视觉吸引力。
关于html - 将图像放在 css 文件而不是 html 文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22979076/
我当前项目中的许多类都有几个只能从类本身内部调用的属性和方法。此外,根据类(class)的当前状态,它们可能会扰乱类(class)的工作。 目前,所有这些接口(interface)都在 .h 文件的主
我想使用ngbTabSet将nav-pills in card-header 和tab-content in card-body。但我不知道该怎么做。 这是我尝试实现的示例(使用 bootstrap.
我正在浏览文档以查找如何允许放置在停靠栏图标上。据我所知,建议您使用 LSItemContentTypes,因为 CFBundleTypeOSTypes 已弃用。但是,我无法让 LSItemConte
我正在尝试在书签中使用 jquery UI 作为 slider 。并且 jquery ui 要求在普通 jquery 文件之后包含该文件。 所以到目前为止我所尝试的只是将脚本附加到 header ,同
您好,我尝试了广泛的谷歌搜索,但似乎没有任何帮助。 这是我的场景: 公司 Logo 存储在外部域/网址(矩形)中。 带有谷歌地图的 Ionic 应用程序,将这些 Logo 作为标记放置在 map 上。
我今天在阅读我的一些 C# 代码时发现了这一行: if (ProgenyList.ItemContainerGenerator.Status != System.Windows.Controls.Pr
我刚遇到this question在 Go FAQ 中,它让我想起了困扰我一段时间的事情。不幸的是,我真的不明白答案是什么。 似乎几乎所有非 C 类语言都将类型放在变量名之后,如下所示: var :
这是有效的 HTML 吗? 最佳答案 作为元素可以包含 phrasing content ,以及属于该组,则有效。 从语义上(并且具有一些常识),如果唯一的内容是 , 不;如果它同时包含文本和图像
这是有效的 HTML 吗? 最佳答案 作为元素可以包含 phrasing content ,以及属于该组,则有效。 从语义上(并且具有一些常识),如果唯一的内容是 , 不;如果它同时包含文本和图像
我有两本 T.Parr 写的关于 ANTLR 的书,我到处都看到美元符号和符号的引用。它也对我有用: term : IDENT -> { new TokenNode($IDENT) }; 或更复杂的东
我在实现段控制时遇到了一些问题。因为我希望它是一个固定的标题,所以当我滚动时我总是可以看到它,我已经在 - (UIView *)tableView:(UITableView *)tableView v
我有一个 20x36px (10x18pt) 的箭头图像,当我选择一个 UIImageView 时,将它拖到我的 View Controller 上然后设置图像,它总是模糊的。我只在我的项目中包含 @
How can I put background image when I hover a link Insert Bg in this a when hov
我需要在我的 .container 中添加(最新的第一个)新分区,但在 .controls (按钮)之后。可能吗? 注意:添加新的分区来保存按钮下方的前置控件对我来说不是一个选择。 HTML 需要保持
我是一名优秀的程序员,十分优秀!