关于div+css布局教程,我是新手

html-css011

关于div+css布局教程,我是新手,第1张

1、打开你要仿的站

2、鼠标右键>查看页面源代码>全部复制>新建文本文档>将内容粘贴进去>将文档的拓展名改为.html

3、找到<link ... >中得CSS文件>全部复制>新建文本文档>将内容粘贴进去>将文档的拓展名改为.css

4、在第二步拷的内容中查找 <img 用src中的地址把图片全拷下来

5、在第三步拷的内容中查找 url 用括号内的地址把图片全拷下来

6、特殊效果可能要用到 script 一样的找到<script 拷内容 拓展名.js

7、上面拷的内容要放到相应文件夹中才能生效

如果是小白,你可能需要了解:相对路径、HTML标签

软件:DW

1、新建一个html页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。

网上流传的,我觉得很经典了,你可以看原地址更清楚些。 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"&