css div布局的基本步骤 div和css布局怎么布局
大家好，如果您还对css div布局的基本步骤不太了解，没有关系，今天就由本站为大家分享css div布局的基本步骤的知识，包括div和css布局怎么布局的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
怎么进行divcss网页布局
1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1"></div>
<divid="top2"></div>
<divid="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我截图的照片</div>
<divid="top2">
<divclass=""></div>
<divclass=""></div>
</div>
<divid="top3">
<divclass="jingyan"></div>
<divclass="jingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
.{background:FF6666;height:380px;width:380px;float:left;margin:10px}
.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我老婆的照片</div>
<divid="top2">
<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>
<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>
</div>
<divid="top3">
<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
DIV+CSS布局常用的属性
用过DIV+CSS的人都知道，虽然这种布局没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。对于seo优化，div+css也有了明显的优势，实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。通用类
overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围
!important
指定样式规则的应用优先权：
文字类
color:#FF0000;文字颜色
font-family:"Arial","Helvetica","sans-serif";字体
font-size: 9px;字号
text-align：center;居中(left为居左,right为居右)
line-height：28px；行高(可用150%值)
font-style: italic;斜体(oblique偏斜体)
font-weight: bold;服务粗体(bolder特粗，400粗值)
font-variant: small-caps;小型大写字母
text-transform: capitalize;首字母大写
text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁
text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
背景类
background-attachment: fixed;固定位置(scroll滚动)
background:#0066CC;背景色(transparent透明)
background: url(/image/more2.gif);背景图片
background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复)
background-position: center top;水平居中垂直顶部(left center水平居左垂直居中)
background：url(/image/dtbg.gif)#FEFEFE no-repeat right bottom(2px 5px);背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
框架位置类
clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
float: left;浮动对象位置居左(right,最新列车时刻表位置居右)
position：relative;相对位置，一般在上级框架中设定极品时刻表
position：absolute;绝对位置，配合上级框架的设定对本级框架设定，设置top、left值
top：5px;页面绝对或相对于框架顶端绝对位置
left：10px;页面绝对或相对于框架左边绝对位置
width: 100px;宽100px
height: 200px;高200px(可用auto和100%值)
margin上海火车时刻表：10px 20px 10px 20px；
上右下左页边距(值相同可省写margin:10px)
单独指定用margin-top：10px;(margin-right、margin-bottom、margin-left)
padding：20px 10px 10px 20p；
上右下左内容离边框的距离(值相同可省写padding:10px)
单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)
border：#ccc 1px solid成都列车时刻表；
四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
单独指定用border-top：#ccc 1px solid；border-right：#ccc 1px solid
等等
项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
单独设置链接
#bottool a:link{color:#fff};未访问的颜色
#bottool a:visited{color:#fff};已访问的颜色流量软件
#bottool a:hover{color:#ff0};鼠标在链接上
这么多定义项,其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。
2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。
3、!important
指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。
我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。、希望可以帮到你
什么是div+ css布局
1、能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
2、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
4、浏览器兼容性。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
5、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。
关于css div布局的基本步骤到此分享完毕，希望能帮助到您。