css6种常见选择器：
1.id选择器：用#号
2.class选择器：用.
3.标签选择器：div{}, img{}, p{},
4.通配选择器：*{} 通配页面上所有元素(效率低，用的较少)
5.伪类选择器：
6.群选择器：#header .img {}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公司首页</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px;
}
#container{
width: 1024px;
margin: 0 auto;
}
/******头部*****/
#header {
height: 128px;
background-color: green;
}
/*******导航********/
#banner {
height: 237px;
background-color: pink;
margin:10px 0;
}
/********主体********/
#main {
height: 464px;
}
#mleft {
width: 700px;
height: 464px;
background-color: #f00000;
float:left;
}
.yewu{
width: 337px;
height: 222px;
margin: 5px;
background-color: orange;
float: left;
}
/*
#m4{
对于float 的元素，外边距不存在
重叠效果，即：上下边距为两者的margin只和
width: 337px;
height: 222px;
margin: 5px;
background-color: orange;
float: left;
}*/
#mright {
width: 315px;
height: 464px;
background-color: #0000ff;
float: right;
}
#view{
width: 294px;
height: 227px;
margin-bottom: 10px;
background-color: purple;
}
#contact{
width: 294px;
height: 227px;
margin-bottom: 10px;
background-color: #ccc;
}
/*******尾部*********/
#footer {
height: 53px;
background-color: yellow;
margin-top: 10px;
}
</style>
</head>
<body>
<!--头部开始-->
<div id="container">
<div id="header"></div>
<div id="banner"></div>
<div id="main">
<div id="mleft">
<div class="yewu"></div>
<div class="yewu"></div>
<div class="yewu"></div>
<div class="yewu"></div>
</div>
<div id="mright">
<div id="view"></div>
<div id="contact"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
时间： 2024-10-06 18:51:14