以下是一个例子.主#banner元素拉伸全屏,并使用position:absolute;固定到视口的顶部;顶部:0; left:0.宽度:100%使其拉伸整个宽度.
#banner-content是您放置内容的地方.它居中并固定在800px宽度.我在它周围放了一个边框让你可以看到.
注意:我还’重置’所有元素的边距和填充以清除默认填充.您可能希望在最终应用程序中使用Eric Meyer的Reset CSS.
Test* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
Main page content goes here
@H_404_4@
@H_404_4@
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!