html css页面分块代码,web学习第二课，HTML+CSS样式+div分块

定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：

Css样式：

引用方式-外链式：

css样式写法：选择器{ 属性1:属性1的值;… }

选择器分为：id选择器(#id)、class选择器(.class)、标签选择器(div)

部分HTML代码：

我是菜单

左边区域

右边区域

footer

部分CSS代码：

#box{

background-color:#F00;

width:1024px;

height:1300px;

/*margin:0 auto;*/

margin:0 auto 0 auto;/*上 右 下 左*/

}

---导航与Banner的实现

HTML中的3个新标签：图片标签

、超链接标签、列表标 签

CSS样式中的：背景色、超链接样式、列表样式的写法

图片标签

：

标签属于单标签：

标签有两个必要的属性：

src属性：图像文件的路径

alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

部分HTML代码：

无标题文档

我是菜单

左边区域

右边区域

footer

部分CSS代码：

@charset "utf-8";

/* CSS Document */

#box{

background-color:#F00;

width:1024px;

height:1300px;

/*margin:0 auto;*/

margin:0 auto 0 auto;/*上 右 下 左*/

}

/*放图片，设置高度和图片一样高*/

#banner{

background-color:#66F;

height:209px;

}

#menu{

background-color:#C3F;

height:50px;

}

#main{

background-color:#6F0;

height:1000px;

}

#left{

background-color:#33C;

height:1000px;

width:250px;

float:left;/*可以使div横向排排坐*/

}

#right{

background-color:#F3F;

height:1000px;

width:774px;

float:right;/*可以使div横向排排坐*/

}

#footer{

background-color:#F63;

height:80px;

}

---后面三步，未完待续...