怎么用div+css写网页设计，以这个为例

html-css017

怎么用div+css写网页设计，以这个为例,第1张

您好，1、div是个层，css来定义它的样式，比如<div class="mystyle"></div>，在css文件中写个样式：.mystyle{float:leftwidth:100pxheight:200pxmargin-top:10px}，这样就能让这个div按这个样式显示（左浮动，宽100像素，高200像素，上边距10像素，），当然还有好多属性你可以再加。

2、你是下的网站模板吗?静态的话直接可以双击浏览了，动态的话要没编译过的才能改，主要改改数据库的连接（如用户名和密码），模板没错误的话一般可以运用了。

楼上的也太复杂了，什么都贴出来了？—

—

页面

代码

<div

class="content">

<div

class="left"></div>

<div

class="mid"></div>

<div

class="right"></div>

</div>

css文件

.content{

width:800px

magin:0

auto

}

.left{

float:left}

.mid{

float:left}

.right{

float:left}

网上流传的，我觉得很经典了，你可以看原地址更清楚些。 CSS常用布局实例 一列 单行一列 body { margin: 0pxpadding: 0pxtext-align: center} #content { margin-left:automargin-right:autowidth: 400pxwidth: 370px} 两行一列 body { margin: 0pxpadding: 0pxtext-align: center} #content-top { margin-left:automargin-right:autowidth: 400pxwidth: 370px} #content-end {margin-left:automargin-right:autowidth: 400pxwidth: 370px} 三行一列 body { margin: 0pxpadding: 0pxtext-align: center} #content-top { margin-left:automargin-right:autowidth: 400pxwidth: 370px} #content-mid { margin-left:automargin-right:autowidth: 400pxwidth: 370px} #content-end { margin-left:automargin-right:autowidth: 400pxwidth: 370px} 两列 单行两列 #bodycenter { width: 700pxmargin-right: automargin-left: autooverflow: auto} #bodycenter #dv1 {float: leftwidth: 280px} #bodycenter #dv2 {float: rightwidth: 410px} 两行两列 #header{ width: 700pxmargin-right: automargin-left: autooverflow: auto} #bodycenter { width: 700pxmargin-right: automargin-left: autooverflow: auto} #bodycenter #dv1 { float: leftwidth: 280px} #bodycenter #dv2 { float: rightwidth: 410px} 三行两列 #header{ width: 700pxmargin-right: automargin-left: auto} #bodycenter {width: 700pxmargin-right: automargin-left: auto} #bodycenter #dv1 { float: leftwidth: 280px} #bodycenter #dv2 { float: rightwidth: 410px} #footer{ width: 700pxmargin-right: automargin-left: autooverflow: auto} 三列 单行三列 绝对定位 #left { position: absolutetop: 0pxleft: 0pxwidth: 120px} #middle {margin: 20px 190px 20px 190px} #right {position: absolutetop: 0pxright: 0pxwidth: 120px} float定位 xhtml: <div id="column1"&