添加从标题边界线垂直的线底部HTML和CSS

问题描述：

给定的CSS代码给出了html页面的底部边框线我的头。我想添加一个类似的垂直线，从页眉的边界线开始，直到页面的底部，这样我就可以从左侧获得侧边栏面板。请帮帮我。添加从标题边界线垂直的线底部HTML和CSS

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

可以请你提供你的代码使用片段 – 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>

– 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; 
}

我希望这是清楚而彻底的。

添加从标题边界线垂直的线底部HTML和CSS

相关推荐