HTML / CSS橫幅不起作用
[英]HTML/CSS banner not working
問題描述
我正在嘗試放置一個橫跨該屏幕頂部的純色橫幅，就像在此網站，facebook等上一樣。 由於某些原因，我在執行此操作時遇到了困難
我在HTML文件中為橫幅創建了一個div標簽，並嘗試將CSS應用於div標簽，但是沒有任何效果。
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
我還嘗試了鏈接到外部CSS文件，但這也不起作用。
如何在頁面頂部的每一頁上制作一個簡單的純色橫幅？
3 個解決方案
解決方案1
3 2014-03-04 19:21:57
#333FF是錯誤的顏色。 應該是這樣的： #333FFF 。 有關十六進制代碼長度的更多信息，請參見W3C規范 （提示：它們必須為六個字符長）。
工作示例： http : //jsfiddle.net/ntim/SKnxP/
position:absolute; 您的情況似乎也沒有必要。
解決方案2
1 2014-03-04 19:25:36
除非您希望絕對位置高於任何位置，否則實際上不需要使用絕對位置。 相反，您可以使用以下命令：
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
解決方案3
0 2014-03-04 19:46:48
這是基於我使用的模板的東西：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
應該工作..后面的灰色位是因為html和body標簽沒有填滿整個屏幕-像這樣的東西應該可以解決（我會使用min-height ） ，但是如果您想要的話，我沒有在這里包括它比瀏覽器窗口高的頁面，並且可以在Internet Explorer中工作，煩人的事情...
英雄橫幅圖像不起作用 css 和 html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.