一个简单的网页布局

```java
![](http://www.datalearner.com/resources/blog_images/2416bf27-1a3e-4f86-b003-d0157d35a6a7.png)
	<style type="text/css" media="screen">
	  *{
	  	margin: 0;
	  	padding: 0;
       }
       .header{
       	width: 970px;
       	height: 103px;
       	margin: 0 auto;/*这个语句表示居中*/
       }
       .logo{
       	width: 277px;
       	height: 103px;
       	float: left;
        margin: 0 auto;
       	background-color: red;
       }
       .login{
       	width: 137px;
       	height: 49px;
       	float: right;
       	background-color: yellowgreen;
       	margin-bottom: 8px;
       }
       .mulu{
       	width: 679px;
       	height: 46px;
       	float: right;
       	background-color: yellowgreen;
       }

.content{
       	width: 970px;
       	height: 435px;
       	margin: 0 auto;;
       	margin-top:10px;
       	margin-bottom: 10px;
       }
       .ct1{
       	width: 310px;
       	height: 435px;
       	float: left;
       	background-color: yellow;
       }
       .ct2{
       	width: 190px;
       	height: 401px;
       	float: right;
       	background-color: pink;
       	margin-bottom: 10px;
       	margin-left: 10px;
       }
       .ct3{
       	width: 450px;
       	height: 240px;
       	float: right;
       	background-color: skyblue;
       	margin-bottom: 10px; 
       }
       .ct4{
       	width: 450px;
       	height: 110px;
       	float: right;
       	background-color: skyblue;
       	margin-bottom: 10px;
       }
       .ct5{
       	width: 450px;
       	height: 30px;
       	float: right;
       	background-color: skyblue;
       }
       .ct6{
       	width: 650px;
       	height: 25px;
       	float: right;
       	background-color: yellowgreen;
       }

.botton{
       	width: 970px;
       	height: 35px;
       	margin: 0 auto;
       	background-color: blue;
       }
	</style>
</head>
<body>
	
	<div class="header">
		<div class="logo">logo</div>
		<div class="login">login</div>
		<div class="mulu">导航栏</div>
	</div>
	
	<div class="content">
		<div class="ct1">内容1</div>
		<div class="ct2">内容2</div>
		<div class="ct3">内容3</div>
		<div class="ct4">内容4</div>
		<div class="ct5">内容5</div>
		<div class="ct6">内容6</div>
	</div>
	
	<div class="botton">网站声明</div>
</body>
```

一个简单的网页布局

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客