184
技術社區[雲棲]
企業網站html框架
css6種常見選擇器：
1.id選擇器：用#號
2.class選擇器：用.
3.標簽選擇器：div{}, img{}, p{},
4.通配選擇器：*{} 通配頁麵上所有元素(效率低，用的較少)
5.偽類選擇器：
6.群選擇器：#header .img {}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 >
<div ></div>
<div ></div>
<div >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<div ></div>
<div ></div>
</div>
</div>
<div ></div>
</div>
</body>
</html>
最後更新：2017-04-04 07:03:23