div标签:
Html的标签,成对出现<div></div>
<div>定义页面上的一块区域,对整个页面划分区域用
常用的有id和class属性:<div id=“menu”></div>
Css样式:
引用方式-外链式:<link href="style.css" rel="stylesheet" type="text/css" />
css样式写法:选择器{ 属性1:属性1的值;… }
选择器分为:id选择器(#id)、class选择器(.class)、标签选择器(div)
写一个静态博客页面:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->
</head>
<body>
<div id="box">
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了" />
</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>
@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:#C0F;
height:50px;
}
#main{
background-color:#6F6;
height:1000px;
}
#left{
background-color:#33F;
height:1000px;
width:250px;
float:left;/*可以使div横向排排坐*/
}
#right{
background-color:#F3F;
height:1000px;
width:774px;
float:right;/*可以使div横向排排坐*/
}
#footer{
background-color:#F63;
height:80px;
}