- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
好的,所以我已经在 SO 上搜索了大约 50 个线程,但还找不到解决方案。我有一个 1000px 宽 x 47px 高的导航栏。我有一个高 135 像素、宽 167 像素的 Logo 。我希望这张图片位于菜单正中央并延伸到菜单上方。图像有 Angular 设计,我想连接到两侧菜单的边缘。这是我希望它的外观与现在的外观的模型。
我的 CSS:
.masthead {
height: 70px;
background-image: url(../img/rmr-masthead.png);
background-repeat: no-repeat;
background-position: center center;
}
/* == Nav Menu == */
.ribbon {
width: 1000px;
max-height: 47px;
position: absolute;
text-align: center;
font-size: 17px!important;
background: #bd7d4c;
background: -webkit-gradient(linear, left top, left bottom, from(#bd7d4c), to(#7a4520));
background: -webkit-linear-gradient(top, #bd7d4c, #7a4520);
background: -moz-linear-gradient(top, #bd7d4c, #7a4520);
background: -ms-linear-gradient(top, #bd7d4c, #7a4520);
background: -o-linear-gradient(top, #bd7d4c, #7a4520);
background-image: -ms-linear-gradient(top, #bd7d4c 0%, #7a4520 100%);
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ribbon:before, .ribbon:after {
content:'';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #754a15;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #66320f transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content:'';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
width: 901px;
height: 0;
}
.nav li {
display:block;
float: left;
}
.nav li a {
display:block;
position: relative;
z-index: 1;
padding-top: 13px;
padding-bottom: 12px;
margin-left: 1px;
width: 120px;
font-size: 16px;
color: #f5f5f5;
text-shadow: #493724 0 -1px 0;
text-decoration: none;
border-right: 1px solid #6b3700;
-webkit-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
-moz-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
}
.nav li:first-child {
border-left: 1px solid #6b3700;
-webkit-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
-moz-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
}
.nav li a:before {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
background: #c3885b;
/* Old browsers */
background: -moz-linear-gradient(top, #c3885b 0%, #905226 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3885b), color-stop(100%, #905226));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3885b 0%, #905226 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3885b 0%, #905226 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3885b 0%, #905226 100%);
/* IE10+ */
background: linear-gradient(to bottom, #c3885b 0%, #905226 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3885b', endColorstr='#905226', GradientType=0);
/* IE6-9 */
-webkit-transition: all 250ms linear;
/* before hack */
content:".";
text-indent: -99999px;
}
.nav li a:hover:before {
opacity: 1;
}
.ribbon img {
position: relative;
margin-top: -100px;
background-color: whitesmoke;
float: left;
padding: 0;
margin: 0;
width: 167px;
height: 117px;
vertical-align:bottom;
display: inline-block;
}
我的 HTML
<div class="masthead">
</div>
<div class="ribbon">
<ul class="nav">
<li><span class="navhover"></span><a href="index">Home</a>
</li>
<li><span class="navhover"></span><a href="about">About Us</a>
</li>
<li><span class="navhover"></span><a href="about">About Bison</a>
</li>
</ul>
<img src="./img/logo-nav.png">
<ul class="nav">
<li><span class="navhover"></span><a href="recipies">Recipies</a>
</li>
<li><span class="navhover"></span><a href="products">Products</a>
</li>
<li><span class="navhover"></span><a href="contact">Contact Us</a>
</li>
</ul>
</div>
最佳答案
margin: 0;
在你的css .ribbon img
中取消上面的margin-top: -100px;
。所以简单地删除 margin: 0;
像这样:
.ribbon img {
position: relative;
margin-top: -100px;
background-color: whitesmoke;
float: left;
padding: 0;
width: 167px;
height: 117px;
vertical-align:bottom;
display: inline-block;
}
关于html - 菜单中央的 Logo 图像位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19799865/
我正在尝试向当前的删除功能添加功能。我遇到的问题是,当我单击“删除”时,它会立即删除而不提示。我一直在尝试使用 this question 中的答案添加提示功能. 我的问题是哪种是实现删除功能最有效的
我正在尝试在 iMagick 中执行以下操作,但无法使其正常工作: 检查图像是否超过 390 像素高,如果是,则将其调整为 390 像素高,如果不是保持尺寸。 添加一个白色 Canvas ,宽 300
我想将我的 Logo 居中并让我的主菜单显示在 Logo 的每一侧,我不知道该怎么做,我是否必须创建两个单独的菜单来实现该布局? 非常感谢任何建议。 谢谢!
我正在使用 iosslider但似乎不能一次只在 slider 中显示一张图像。我也在尝试将显示的单个图像居中。这是我对 HTML 的看法: HTML:
我希望有一种方法可以在 Android 设备上以编程方式访问中央可信 keystore 。我知道有一个存在,至少用于验证 SSL 连接等。它还附带一个方便的工具,用于添加证书、浏览等。(在设置->位置
我对蓝牙通信还很陌生。我的第一个项目打算将数据从 iOS 设备传输到 BLEshield(小芯片)。 为了测试我的中央代码,我决定将 iPhone 设置为外围设备(一旦我拿到芯片,芯片将扮演的角色)并
在我的公司,我们使用 composer 构建我们的大部分项目,这意味着我的不同团队会从互联网上下载大量重复的包(相同版本的相同库)。 我试过Satis Composer Server,但问题是缓存不是
我有一个 iOS 应用程序,它是我控制固件的外围设备的核心。类似的 Android 应用程序运行良好,能够连接到外围设备、发现服务、明确绑定(bind)并读取加密特征。 但是,在 iOS 上,Core
我想得到这个结果( Storyboard View ): 但是当我模拟我的应用程序时,我得到了这个结果(没有任何限制) 所以我尝试添加一些约束以使 TableView 居中。但是当我添加任何约束时,T
当我调整浏览器窗口大小时,我的中心 block 一直向左移动 正常: http://imgur.com/b2AVkUx 调整浏览器窗口大小后: http://imgur.com/mJq6AuO 所以我
我们正在重新考虑我们的开发环境。目前,我们都有 Elitebook 笔记本,但速度没有我们希望的那么快。我们正在考虑将我们的开发环境虚拟化为中央 VM 服务器。 我们的开发人员在 Visual Stu
我正在尝试获取 org.jfrog.buildinfo:artifactory-maven-plugin:2.6.1,它可以在 https://jcenter.bintray.com 中找到. 但是由
我有以下 Artifactory (6.12.1) 设置 远程存储库: 中央:https://repo.maven.apache.org/maven2 jboss:https://repository
如何让绿色 div 为 width: 100% 与其他两个 div 在同一行并固定 宽度。 我的想法是让两侧的 div 有固定的宽度,而中间的 div 是 width: 100% (以剩余空间)。 是
我目前正忙于将相当旧的项目从 Ant 迁移到 Gradle。这包括用等效的 Gradle 依赖管理替换 lib 目录。 目前我在使用 Maven Central 时遇到了问题。某些依赖项(我发现至少有
来自没有 typedef 的 Java 世界,我有一个问题要问 C++ 开发人员: 我的任务是用 C++ 重写一个大型 MATLAB 项目。为了了解代码的结构,我已经开始重建模块和类结构,但没有实际实
为了轻松运行我的 web 应用程序,我决定将 Jetty 添加到我的单个 POM 文件中。 关注 official documentation ,我将此添加到我的 : org.ecli
我最终想尽可能多地解耦现有的 ASP.NET MVC 项目。 随着时间的推移,他们使用多种方法,我正在学习: 标准 MVC, Controller 操作将单独的 View 返回给浏览器。 返回 FAT
正如问题所建议的那样,我们有自己的 BLE 设备和 Android 应用程序来连接该设备。我们能够与 BLE 设备连接并成功完成所有操作。 与此同时,我们能够检测到我们的 BLE 设备与其他 3rd
在 Android 上我们有 requestMtu 和 onMtuChanged,这似乎意味着我们必须手动协商 MTU 大小,如果中央设备和外围设备都是基于 Android 的(但我可能错了,它也可能
我是一名优秀的程序员,十分优秀!