添加從標題邊界線垂直的線底部HTML和CSS

-3

給定的CSS代碼給出了html頁面的底部邊框線我的頭。我想添加一個類似的垂直線，從頁眉的邊界線開始，直到頁面的底部，這樣我就可以從左側獲得側邊欄面板。請幫幫我。添加從標題邊界線垂直的線底部HTML和CSS

header { 
    border-bottom: #bfa161 solid 3px; 
    height: 60px; 
    background-color: #fff; 
    position: relative; 
    z-index: 9999; 
}

來源

2017-08-18 AK94

可以請你提供你的代碼使用片段 – core114

這隻能控制你的頭 - 但你可以放在你的主要內容持有者的邊界左邊 – Stender

爲什麼不創建2 divss和邊框顏色？ – Hash

簡單，因爲這，你只需要提供一個邊框顏色到div。您可以調整div以符合要求。

header { 
 
    border-bottom: #bfa161 solid 3px; 
 
    height: 60px; 
 
    background-color: #fff; 
 
    position: relative; 
 
    z-index: 9999; 
 
} 
 

 
footer { 
 
    border-top: #bfa161 solid 3px; 
 
    background-color: #fff; 
 
} 
 

 
#mainContent { 
 
    display: inline-flex; 
 
} 
 

 
#vertical_line { 
 
    border-left: 3px solid #bfa161; 
 
    width: 60px; 
 
}

<header> 
 
    MY HEADER 
 
</header> 
 
<body> 
 
    <div id="mainContent"> 
 
    <div> 
 
     <p>THIS IS SIDEBAR</p> 
 
    </div> 
 
    <div id="vertical_line"> 
 
     <p>THIS IS MY CONTENT</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
<footer> 
 
    MY FOOTER 
 
</footer>

來源

2017-08-18 10:58:33 Hash

– AK94

嗨，謝謝你回覆，我只需要這個沒有內容的垂直欄，我嘗試了你的方法，但是我只是不能從左邊的垂直欄中放置空間，請幫忙。 – AK94

@ AK94你的意思是？你能編輯你的問題併發布完整的代碼嗎？左邊的div應該有'border-right：3px solid＃bfa161'如果它的右邊的div應該有'border-left：3px solid＃bfa161' – Hash

呀，怎麼辦哈希說。你應該使用「div」標籤將你的網站組織成包裝和「子」包裝。 W3Schools有一些非常好的文檔。我強烈建議你閱讀它。這不是很長。只是谷歌它。

這裏的解釋基本概念，如果你不熟悉的鏈接。 What is the correct way to do a CSS Wrapper?

你應該在你的身體標記內做第一個東西，在結束標記之前做最後一件東西。爲該標籤分配一個ID。大多數人稱這種包裝。這是HTML的樣子。

<body> 
    <div id=wrapper> 
#content for your page 
    </div> 
</body>

然後當你做你的CSS，添加這樣的東西。注意這是一個好主意，定義一個「最大寬度」。當你在CSS中做更復雜的事情時，你可以爲不同的分辨率範圍實際定製不同的寬度。

#wrappper{ 
    max-width: 900px; 
    max-height: 1750px; 
    border: #bfa161 solid 3px; 
    margin: 0 auto;  <---"This is so the wrapper centers itself on your screen" 
}

現在，如果你想有一個不與任何您的網頁內容的干擾左側導航菜單，你可以讓你的包裝DIV中兩個div標籤。舉一個東西的ID喜歡navigationdiv，另一個contentdiv。向右浮動內容div並浮動左側的導航div。顯然，你應該把你的資產淨值在navigationdiv，一切都在contentdiv人。確保你使兩個div標籤內聯塊。它也不會傷害到定義寬度。

navigationdiv{ 
    display: inline-block; 
    width: 200px; 
    border-right: #bfa161 solid 3px; <---"This will make the line you wanted" 
    float: left; 
} 

contentdiv{ 
    display: inline-block; 
    max-width: 700px; 
    float: right; 
}

我希望這是清楚而徹底的。

來源

2017-08-18 11:20:22

添加從標題邊界線垂直的線底部HTML和CSS

回答

相關問題