★艺网科技★欢迎您的咨询! ★艺网科技★欢迎您的咨询!
咨询电话:13663928858      15539205661

网站建设之DIV布局:三列固定宽度网页的布局练习

主要制作步骤:

1、制作一个宽620px,高300px,背景浅灰色,且居中的盒子div620

2、在盒子div620中嵌入三个子盒子,分别为div620_1  div620_2  div620_3,在其中分别写上各自的内容左  中 右

3、分别设置上面3个子盒子的属性,宽和高均为200px,边框1个像素,底色用红绿蓝区别看。漂浮float属性分别设置为left  left right。具体参数和效果看下图及代码

 

参考代码如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鹤壁艺网科技---三列固定宽度居中网页布局</title>
<style type="text/css">
<!--
.div620 {
 height: 300px;
 width: 620px;
 margin-top: 8px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #f00;
 background-color: #eee;
}
.div620_1 {
 height: 200px;
 width: 200px;
 float: left;
 border: 1px solid #00F;
 background-color: #F00;
}
.div620_2 {
 height: 200px;
 width: 200px;
 border: 1px solid #00F;
 float: left;
 margin-left: 7px;
 background-color: #0F0;
}
.div620_3 {
 height: 200px;
 width: 200px;
 float: right;
 border: 1px solid #00F;
 background-color: #00F;
}
-->
</style>
</head>

<body>
<div class="div620">
  <div class="div620_1">左</div>
  <div class="div620_2">中</div>
  <div class="div620_3">右</div>
</div>
</body>
</html>

帮助别人   成就自己  艺网科技
鹤壁艺网科技主要业务范围
网站建设、网页设计、域名与空间服务
广告设计、平面设计、效果图
影视后期编辑处理
FLASH动画设计与制作
PPT课件、幻灯片、展示设计
鹤壁3E网络在线客服