- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我最近刚在网站上添加了一个 fadein onload 功能,但现在底部有一个空白区域。我觉得这与 div 加载时自动显示为 block 有关。我不确定如何解决这个问题。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<script src="../js/modernizr.custom.85628.js"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href="../css/normalize.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="text/css" href="../images/favicon.png" />
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/myscript.js"></script>
</head>
<body>
<section class="main_front">
<nav id="nav_container">
<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li"><a href="#">Goals</a></li>
<li class="nav_li"><a href="#">School Site</li></a>
<li class="nav_li"><a href="#">Web Design</li></a>
<li class="nav_li"><a href="#">Summer</li></a>
<li class="nav_li"><a href="#">Schedule</li></a>
</ul><!--end of right_links-->
</nav><!--end of nav_container-->
<div class="all_home">
<div class="home">
<div class="home_content">
Total Recall
</div><!--end of home_content-->
<div class="home_content2">
<p>A webpage about me.</p>
</div><!--end of home_content2-->
</div><!--end of home-->
<div class="home_imgs">
<div class="tech_cluster">
<img src="../images/techcluster.png" />
</div><!--end of tech_cluster-->
</div><!--end of home_imgs-->
</div><!--end of all_home-->
</section><!--end of main_front-->
<section class="footer">
<div class="contact">
<div class="phonenumber">
<img src="../images/23194.png" width="20" height="20" /> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div class="email">
<img src="../images/icon-ios7-email-outline-128.png" width="23" height="23" class="mail_icon"/>
<a href="mailto:adesign@email.com">adesign@email.com</a>
</div><!--end of email-->
</div><!--end of contact-->
</section><!--end of footer-->
</body>
</html>
CSS 代码
@charset "utf-8";
/* CSS Document */
html {
cursor:default;
}
body {
margin:0;
margin:none;
}
.logo {
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:90vh;
background-color:#A9D2F1;
}
/* .nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
} */
.nav_li {
float:right;
margin-right:20px;
}
#nav_container {
width:100%;
height:79px;
/*background-color:#82B5E8;*/
background-image:url(../images/nav_container_bg.png);
}
.right_links {
width:70%;
float:right;
list-style-type:none;
text-align:center;
}
.right_links a {
display:inline-block;
list-style-type:none;
text-decoration:none;
color:white;
font-size:17px;
margin-top:0px;
height:30px;
padding-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
width:130px;
height:40px;
line-height:10px;
text-align:center;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.right_links li a {
display:block;
width:130px;
height:40px;
}
.right_links li:hover {
background-color:rgba(22,96,131,0.5);
}
.phonenumber {
font-size:20px;
text-align:center;
margin-right:25px;
}
.phonenumber img {
margin-top:4px;
}
.contact {
width:500px;
height:9vh;
background-color:#80b1e1;
border-radius:5px;
margin:auto;
position:relative;
}
.email {
font-size:20px;
text-align:center;
margin-top:5px;
}
.mail_icon {
position:absolute;
margin-left:-25px;
margin-top:1px;
}
.email a {
color:#000;
text-decoration:none;
transition:0.3s;
}
.email a:hover {
color:#313131;
}
.footer {
width:100%;
height:10vh;
background-color:#8FC6ED;
}
.all_home {
display:none;
width:100%;
height:700px;
margin:auto;
}
.home_content {
width:175px;
height:30px;
background-color:#6886CC;
border-radius:15px;
margin:auto;
position:relative;
margin-top:30px;
padding:15px;
padding-bottom:20px;
padding-left:25px;
padding-right:25px;
color:#ffffff;
font-size:32px;
text-align:center;
}
.home_content2 {
width:275px;
height:40px;
background-color:#6886CC;
border-radius:10px;
margin:auto;
position:relative;
color:#ffffff;
font-size:22px;
text-align:center;
margin-top:25px;
line-height:40px;
padding-left:10px;
padding-right:10px;
}
.home_imgs {
width:600px;
height:300px;
margin:auto;
position:relative;
}
.tech_cluster {
margin:auto;
position:relative;
margin-left:8px;
margin-top:-10px;
}
/* .iphone {
margin-top:20px;
float:left;
margin-left:511px;
}
.computer {
margin-top:21px;
margin-left:61px;
float:left;
}
.ipad {
margin-top:20px;
margin-left:56px;
float:left;
} */
JavaScript/jQuery 代码
$(document).ready(function(e) {
$('.all_home').fadeIn(600);
});
最佳答案
你需要在你的 css 中进行替换,如下所示。
*.footer {
background-color: #8FC6ED;
height: 22vh;
width: 100%;
}*
关于jquery - 我的网页底部有一个不必要的空白区域,它是从哪里来的,我该如何摆脱它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25479161/
我正在寻找 css 属性以隐藏带或不带 css 类的段落,如果它包含空格 ( ) 或空白,但我想至少保留一个带或不带的段落,如果有更多的话。 隐藏段落,如果它是空白的或包含 white-space(
在 ruby 中对空白有不同的敏感度/设置吗? 我有一个 RoR 项目,其中一个事件记录调用有很多组件: max_stuff = FooSummary.select("max(stuff)
如何在脚注中的数字后留空? 一般来说,对于所有脚注! 例子: 好 : 1 Hello World 坏:1Hello World 最佳答案 正确答案是不要重新定义\thefootnote ,因为这会在脚
我有这段代码,每次第一个 for 循环再次开始时,我希望它将数组重置为空白,因为它正在使用新用户,但我得到的输出包含一个数组中的所有值。 var items = []; for (var i
我试图在CakePHP中生成一个动态xml文档,以输出到浏览器。 这是我的 Controller 代码: Configure::write ('debug', 0); $this->layout =
当我尝试在 nxos 设备上运行某些命令时,输出末尾有一个空格。我必须将输出与现有变量列表进行比较。末尾的空格导致比较错误。如何在字符串列表中使用 .strip() 函数? - name: Curre
我对 Elasticsearch 相当陌生,我一直在尝试对我的数据进行搜索,并且总是让点击部分为空。即使在数据上传和索引之后也会发生这种情况。我的映射如下: { "mappings":{
我想将about:blank页面更改为firefox插件首页页面的url。 如何更改默认的新标签页网址或可以为新标签页提供默认网址? 我正在使用Firefox附加SDK。 最佳答案 您可以结合使用Ta
我正在使用 R 并具有以下数据框示例,其中所有变量都是因子: first second third social birth control high
如何清空显示对话框的页面。下面是我的代码HTML: .ui-dialog, .ui-dialog-content { border:1px solid #cde68c; border-botto
更新“他的问题是要求我只运行一次 str ,他们已经告诉我该函数只需要一个参数)” 我试图返回第一个不重复的字符,例如:“blazqnqbla”->第一个不重复的字符是“z”,因此函数需要返回z。现在
我的登录验证有问题。问题是当我尝试使用管理员登录时,页面停止在 checklogin.php 上并且不会告诉它是否成功。这是我的代码。 索引.html Aplik
我的查询是这样的 SELECT Distinct tm.teamid,tm.Team_Name,CONCAT_WS(' ',tu.FirstName+' '+tu.LastName) as Leade
我正在创建指向页面的超链接 url 由用户输入决定,因此由查询字符串决定 ; 问题是变量状态由两个或多个单词组成。因此,当我尝试单击证明表单中输入的超链接时,仅获取状态变量的第一个单词。浏览器将另一个
该问题在每个浏览器中的表现都不同,例如在 Firefox 中大约一个空格如果您再次滚动到顶部,则会出现具有相同高度的滚动框。在 chrome 中,滚动时框会变得狭窄等等...... 使用的调用是:
我对菜单栏文字之间的 CSS 空白有疑问。我尝试了很多方法,但仍然无法解决。有人可以帮我吗? 菜单问题图片如下: http://imageshack.us/photo/my-images/201/44
我对 有疑问.其中的插入符根据是否为空具有不同的垂直位置: 我的代码: textarea { padding: 0 5px; border: none; outline: n
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Ignore whitespace in HTML 我想在网页上将图片并排放置。这是我的 HTML:
每当我尝试检查元素时,什么都没有出现。我在使用 Chrome。我明白了 Elements | Network | Sources | Timeline | Profiles | Resources |
我在使用 Chrome、Firefox 和 IE 时遇到了一个奇怪的问题。我正在为我的投资组合网站/博客构建一个 WordPress 主题,一切都很好,直到今天,当我在 chrome 中查看该网站时,
我是一名优秀的程序员,十分优秀!