- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我一直在浏览它,但我找不到任何答案,基本上在 Header 和 Body 之间有一个白色的间隙,见下图:
我在某处读到有些元素有默认边距或填充,例如 <ul>
但我不能真正确定,因为我刚刚进入网络。
这是我的元素的定位方式:
header{
background-color: white;
position:relative;
}
p.secondaryText {
color: darkgray;
}
.menu{
background-color: dodgerblue;
}
.logo{
position: relative;
width: 100%;
}
.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division{
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body{
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body{
position: relative;
text-align: center;
}
.options-section{
text-align: center;
}
.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer{
background-color: black;
height: 200px;
}
和菜单:
ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover{
text-decoration: none;
}
我已经尝试了边距但没有任何影响。
编辑:
您可以下载 project如果你愿意,可以在 github 上运行在节点 js 上,只需节点服务器并在端口 9000 上监听
.
最佳答案
如您所说,许多元素都有默认样式,UL
就是其中之一。
您需要做的就是用 margin: 0
覆盖它。
header {
background-color: white;
position: relative;
}
p.secondaryText {
color: darkgray;
}
.menu {
background-color: dodgerblue;
}
.menu ul {
margin: 0;
}
.logo {
position: relative;
width: 100%;
}
.logo-img {
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social {
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division {
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container {
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%;
/* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body {
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body {
position: relative;
text-align: center;
}
.options-section {
text-align: center;
}
.services-box,
.company-box,
.contact-box {
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer {
background-color: black;
height: 200px;
}
and the menu: ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a {
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover {
text-decoration: none;
}
<header>
<div class="social">
<p class="secondaryText">It is a long established fact that</p>
</div>
<div class="division"></div>
<div class="logo">
<img class="logo-img" src="R/Metalplatelogo.jpg">
</div>
<div class="menu" id="myMenu">
<nav>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="business.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="">NEWS</a></li>
</ul>
</nav>
</div>
</header>
<div class="body-container">
<img class="img-container" src="http://via.placeholder.com/2000x2000">
<div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>
<div class="main-body">
<p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
<h2>屋根・外壁のことならおまかせください。</h2><br>
<p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>
</div>
<div class="options-section">
<div class="services-box">
</div>
<div class="company-box">
</div>
<div class="contact-box">
</div>
</div>
<div class="about-section">
</div>
<div class="news-section">
</div>
<div class="map">
<iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4 &q=Space+Needle,Seattle+WA" allowfullscreen="">
</iframe>
</div>
<footer>
This is the footer
</footer>
关于html - 标题和正文之间的不明空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46313075/
我在休息服务中有以下方法: @POST @Path("/create") @ResponseStatus(HttpStatus.CREATED) @Consumes(M
这个问题不太可能对 future 的访客有帮助;它只与一个小的地理区域、一个特定的时刻或一个非常狭窄的情况相关,通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用,visit the hel
我有这样的弹出框: Speelland And here's some amazing content. It's very engaging. Right? Meer
我正在开发一个 firefox 插件,我正在收听这样的 http 响应: var observerService = Components.classes["@mozilla.org/observer
我正在使用 jqtouch 制作一个移动网站。我还在网站中实现了图库图像 slider ,但是当图库放在我需要的位置时(在 之间,图像不会显示。 修补了几个小时后,删除了 display: none
为了在 iPad 上的 Safari 上显示视差效果,我采用了以下 CSS 规则: body:after { content: ""; position: fixed; top
我想在通过 excel VBA 创建的电子邮件正文中插入一个链接。链接每天都在变化,所以我把它的值放在单元格 B4 中。但是,我找不到正确的方法来发送带有该链接的电子邮件。 这是我正在使用的代码: P
我正在尝试使用具有非常大主体的 Postman 执行 POST 请求。只有一个 JSON 字段非常大,我想知道是否可以从 Postman 的文件中加载该字段? { "field1": {
这个问题是针对 SoapUI 5.2.1 社区版的: 我有一个包含变量的 JSON 主体的 POST 请求。 我总是能够通过单击“原始”选项卡以查看请求进行或将发送到服务器来验证这些参数是否采用正确的
我有这个按钮,单击该按钮会打开 Outlook,其中包含我提供的详细信息。我还有一个 TEXTAREA,其中包含某些文本。我正在寻找一种方法让此文本出现在我的 Outlook 正文中。这可以做到吗?请
我知道错误消息是不言自明的,我们无法多次读取消息正文。这里我使用AOP(面向方面编程)来进行审计日志。 [AuditServiceMethod(AttributePriority = 0)] [F
我在 grails 3.3.3 中编写自定义验证器(命令)时遇到了一些问题。具体来说,我正在尝试验证其正文由项目列表组成的 POST 请求。这就是我所拥有的... 命令: class VoteComm
这个问题在这里已经有了答案: json.Marshal(struct) returns "{}" (3 个回答) JSON and dealing with unexported fields (3
我想清理很多邮件的 HTML 正文,它们有点脏(取自 Gmail 发送的电子邮件):有很多嵌套 ,不需要的字体更改等我想清理它并只保留 , , , , , 仅此而已(可能还有 或一些 ,
我正在使用 Accordion 功能在我的模块中添加端口详细信息。我只想在水平方向上显示正文内容。请看下面的 fiddle 。 html, body { background-color:#e
我的 HTML 正文中有这个: loaded y&EACUTE;t. 使用 JavaScript 我有这个: $( document ).ready(function() { document.bod
我对图表有很大的疑问。我试图在谷歌图表中显示一些 json 值,但我总是会出错。从 JSON 正文中,我只需要图表上个月的“全部购买”和“日期”。我见过的所有例子,他们已经有了一个静态的自定义 Jso
我的应用程序的功能之一涉及用户填写三个单独的文本字段(预订名称、客人和日期),然后使用文本编辑器通过短信发送这些字段中的文本。我无法将这些 View 中的文本放入正文中。这是我的代码: - (IBAc
我正在开发一个 HTA,它应该对 onunload 事件进行一些最终修改。该事件似乎没有被触发。 该事件是否仍受支持?是否有 IE 事件可以知道页面何时关闭? 我检查了一下(JavaScript bo
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
我是一名优秀的程序员,十分优秀!