0
これは私の初めてのスタックオーバーフローを尋ねるので、フォーマットが完璧でない場合は申し訳ありません。とにかく、私はブートストラップ3を使っているウェブサイトで働いています。それは、ページの中央に縦横に中心が置かれたイメージを持っています。また、背景イメージもあります。画像の下にヘッダーを配置しようとしていますが、ヘッダーはページの上部に表示されます。ページ下部には固定のナビゲーションバーがあります。ここでブートストラップ3の中央の画像の下にヘッダーを置くにはどうすればよいですか？
はHTMLです：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>
App
</title>
<style>
html {
background-image: url("gradiant.png");
}
.logo {
position: absolute;
top: 40%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -216.5px;
margin-left: -236.25px;
}
.nav-pills li a {
color: white;
font-size: 250%;
}
.nav-pills li a {
background-color: transparent;
color: #ffffff;
transition: all .5s;
border: 2px solid transparent;
}
.nav-pills li a:hover{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.dropdown{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.nav-pills > li > .dropdown-menu {
background-color: transparent;
border-color: #ffffff;
}
.dropdown-toggle {
background-color: transparent !important;
}
.dropdown-toggle:active, .open .dropdown-toggle {
background-color: transparent !important;
color: white !important;
border-color: #ffffff !important;
}
.nav-pills {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.nav-pills > li {
display: inline-block;
float:none;
}
h1 {
position: absolute;
color: #ffffff;
}
</style>
</head>
<body>
<img alt="App" src="app.png" width=472.5 height=433 class="logo" align="middle" >
<h1>App</h1>
<ul class="nav nav-pills navbar-fixed-bottom">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="app.html">App</a></li>
</ul>
</li>
<ul class="dropdown-menu">
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
グラデーションのために画像を使用するだけではなくCSSで直線勾配をやっている任意の特定の理由は？あなたが慣れていない場合は、この質問をチェックしてください：http://stackoverflow.com/questions/28046721/how-to-use-bootstrap-3-gradient-for-background-in-css –
私のロゴが使用しているので画像を使用しています同じ勾配。 –