div+css网页设计基础教程
的有关信息介绍如下:
div+css是一个网页设计师,程序员必经之路,是网站建设的基础!div+css是网页设计的最重要的元素。
一、准备工作,电脑一套,Dreamweaver(网页设计软件)
Dreamweaver下载与安装不在本文描述。
二、div概念:
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
div的写法:
三、css(俗称样式表文件)层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
图是CSS的写法!
四、div标签结构
五、CSS的两种写法
六、实例源码
#Container{
width:1000px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了高度,一般不建议对容器设置高度,一般使用overflow:auto;属性设置容器根据内容自适应高度,如果不指定高度或不设置自适应高度,容器将默认为1个字符高度,容器下方的布局元素(footer)设置margin-top:属性将无效*/
margin-top:20px;/*此处讲解margin的用法,设置content与上面header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/
background:#90C;
}
/*注:Content-Left和Content-Main元素是Content元素的子元素,两个元素使用了float:left;设置成两列,这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度,否则设置列将失败*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
后记:网页设计是一门学问,不是一朝一夕就能成的,技术需要沉淀,知识需要积累!



