如何使用CSS制作此页眉/内容/页脚/菜单布局？ [英] How to make this Header/Content/Footer/Menu layout using CSS?
本文介绍了如何使用CSS制作此页眉/内容/页脚/菜单布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
| |______________________| |
| | Header | |
|B |______________________| |
|a | Menu | |
|c |----------------------| |
|k | Content | |
|g | | |
|r | | |
|o |______________________| |
|u | Footer | |
|n | | |
|g |______________________| |
感谢您的帮助
thanks for help
推荐答案
这将使用div完成+ css layout.First你需要知道你实际上应该有三个大的div来保存整个内容。我将它们从左到右命名为'left'，'main'，'right'。你将这三个div添加到一个大容器中，其宽度可以改变以适应屏幕宽度。你设置三个div的宽度和浮动。然后在主div中添加三个div。示例代码如下：
This will be done using div+css layout.Firstly you need to know that you actually should have three big divs to hold the whole content. I name them from left to right as 'left','main','right'.You add these three divs into a big container whose width you can change to fit the screen width.You set the three divs' width and float.Then you add three divs into the main divs.The sample codes are as follows:
<html>
<head>
<style type="text/css">
*{padding:0px;margin:0px;}
#container{background:100%;}
#left{width:20%;height:400px;float:left;background-color:Blue;}
#main{width:60%;height:400px;float:left;background-color:Gray;}
#right{width:20%;height:400px;float:left;background-color:Green;}
#main_header{height:10%;width:100%;background-color:Orange;}
#main_menu{height:10%;width:100%;background-color:LightBlue;}
#main_content{height:60%;width:100%;background-color:Cyan;}
#main_foot{height:20%;width:100%;background-color:Red;}
</style>
</head>
<body>
<div id="container">
<div id="left">
left
</div>
<div id="main">
<div id="main_header">
main_header
</div>
<div id="main_menu">
main_menu
</div>
<div id="main_content">
main_content
</div>
<div id="main_foot">
main_foot
</div>
</div>
<div id="right">
right
</div>
</div>
<body>
</html>
这篇关于如何使用CSS制作此页眉/内容/页脚/菜单布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
