基本的HTML和CSS鏈接不起作用
[英]Basic HTML and CSS Link Not Working
問題描述
我正在嘗試使用HTML和CSS來構建自己的網站。 我對為什么將CSS與HTML一起使用不起作用感到困惑。
我的HTML文檔中有以下代碼塊：
<body>
<div id="image">
<img src="header_photo.jpg" alt="" width="500" height="250"/></div>
<div id="h20" <p>Insert Overlay Text Here</p></div>
<h1> About Me</h1>
以下代碼在我的CSS腳本中：
body {
font-size: 14px;
color: black;
background-color: #d0e4fe;
}
h1 {
color: white;
background-color: #009;
}
#image {
position: relative;
border-width: 5px;
}
#h20 {
color: red;
background-color: blue;
position: absolute;
}
如何在ID選擇器#image指示的圖像上方疊加＃h20文本？ 當前生成的是左對齊的圖像，下面帶有文本。 我想使用CSS而不是HTML樣式，但是我什至無法獲得照片周圍的邊框。 任何幫助表示贊賞。
編輯：我已經更新了我的腳本，以包括上述編輯； 但是，我的header_image仍然沒有邊框，並且文本覆蓋了h1“關於我”。 我想知道我在做什么其他錯誤以獲取這些錯誤？ 謝謝你的幫助。
5 個解決方案
解決方案1
1 2015-08-16 01:52:39
有一些基本錯誤。 首先，您將p元素的樣式設置為color=red ，這是無效的。 查看其他CSS，您應該可以輕松分辨出哪里出了問題。 其次，所有CSS屬性必須具有單位值，例如px或em或您擁有的值。 您的border屬性沒有這些。
最后，您需要閱讀有關定位的基礎知識。 圖像默認是內聯的，就像文本一樣。 因此，其后的任何文本也將在一個行框中，就像一段文本一樣。 如果一行文本（本質上是圖像）后面跟隨有一行真正的文本，您可以想象在那里發生了什么。
因此，要完成您希望的重疊，“定位”是您需要研究的內容。
所有這些都涵蓋了很多基礎，因此答案非常廣泛。 您需要在其他地方對此進行復習。
解決方案2
0 2015-08-16 01:52:50
CSS和HTML中有很多語法錯誤。 嘗試將它們替換為以下內容：
HTML：
<body>
<div id="image">
<img src="header_photo.jpg" alt="" width="500" height="250"/>
<div id="h20"><p>Insert Overlay Text Here</p></div>
</div>
</body>
CSS：
body {
font-size: 14px;
color: black;
background-color: #d0e4fe;
}
h1 {
color: white;
background-color: #009;
}
#image {
position: relative;
border-width: 5px;
}
#h20 {
color: red;
background-color: blue;
}
p {
color: red;
}
希望能有所幫助。
解決方案3
0 2015-08-16 01:52:52
<div id="image">
必須關閉。 然后：
#h2{
position: absolute;
}
解決方案4
0 2015-08-16 01:59:23
在您的html中：您忘了關閉#image div造成了一些麻煩
<body>
<div id="image">
<img src="header_photo.jpg" alt="" width="500" height="250"/>
<div id="h20">
<p>
Insert Overlay Text Here
</p>
</div>
在您的CSS中：很多語法錯誤，例如color=red
body {
font-size: 14px;
color: black;
background-color: #d0e4fe;
}
h1 {
color: #fff;
background-color:#009;
}
#image {
position: relative; // To position the div relatively in the body
border-width: 5px;
}
#h20 {
color: red;
background-color:blue;
position: absolute; // To position the image absolute depeding of parents postition
top:0;
}
p {
color:red;
}
這應該正常工作
解決方案5
0 2015-08-16 02:29:09
好的，我修復了您的代碼，您犯了一些錯誤。 我相信這是您正在尋找的覆蓋類型。 編輯頂部和左側的值以調整其在＃h20 id上的位置。 如果您希望它具有更快的響應速度，也可以將其更改為百分比值。 如果您真的希望它具有響應能力，建議您使用twitter-bootstrap .jumbotron。
body { font-size: 14px; color: black; background-color: #d0e4fe; } h1 { color: white; background-color: #009; } #image { position: relative; border-width: 5px; } #h20 { color: red; position: absolute; top: 50px; left: 50px; }
<body> <div id="image"><img src="header_photo.jpg" alt="" width="500" height="250"/></div> <div id="h20"> <p>Insert Overlay Text Here</p></div> <h1>About Me</h1> </body>
鏈接無法正常運行HTML / CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.