一、网页整体布局
1.div标签：
Html的标签，成对出现<div></div>
<div>定义页面上的一块区域，对整个页面划分区域用
常用的有id和class属性：<div id=“menu”></div>
①划分区域代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box">
<div id="banner">
我是图片
</div>
<div id="menu">
我是菜单
</div>
<div id="main">
<!--左边区域-->
<div id="left">
左边区域
</div>
<div id="right">
右边区域
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>2.Css样式：
引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" />
css样式写法：选择器{ 属性1:属性1的值;… }
选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）
②设置每个div的属性-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;
}
3.引入css文件: 用link标签
③引入css代码：
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />二、Banner的实现
·图片标签<img>：
<img>标签属于单标签：<img />
<img>标签有两个必要的属性：
src属性：图像文件的路径
alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容
④banner区域插入图片：
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了" />
</div>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
