前提
問(wèn)問(wèn)題
任務(wù)：不要直接問(wèn)答案
非任務(wù)：最好拿代碼來(lái)問(wèn)問(wèn)題
支持IE 使用浮動(dòng)布局
注意：
- 實(shí)在想不到好的標(biāo)簽使用div,
- 偽類寫(xiě)法clearfix:after clearfix::after : 兼容ie :: 不兼容ie
不支持IE使用flex布局
視頻講解
必須要會(huì)
浮動(dòng)布局
固定步驟：
- 在兒子身上加 float：left 實(shí)在不行寫(xiě)float：right
- 寫(xiě)
clearfix:after clearfix::after偽類 加到爸爸身上 ::ie不支持 ：ie支持 - 給兒子調(diào)寬高师溅，里面有寬度父級(jí)元素最好不要加 寬高最好不要加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding: 0;}
ul,ol{list-style:none;}
.clearfix:after{
content: '';
display: block;
clear: both;
}
a{
color: inherit;
text-decoration: none;
}
.background{
border: 1px solid green;
background: black;
color: white;
}
.wrapper{
width: 1000px;
margin: 0 auto;
}
.logo{
width: 60px;
height: 60px;
background: red;
float: left;
}
.menu{
float: left;
margin-left: 50px;
}
.menu > li{
float: left;
width: 110px;
text-align: center;
padding: 18px 0;
}
.actions{
float: right;
text-align: right;
padding: 18px;
width: 150px; /*一會(huì)刪*/
}
</style>
</head>
<body>
<div class="background">
<div class="wrapper clearfix" style="border: 1px solid black;">
<div class="logo">
</div>
<ul class="menu clearfix">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
<li>導(dǎo)航5</li>
<li>導(dǎo)航6</li>
</ul>
<div class="actions">
<a href="#">個(gè)人中心</a>
<a href="#">購(gòu)物車</a>
</div>
</div>
</div>
</body>
</html>
flex布局
固定步驟：
- 在爸爸身上加dispaly：flex
- 調(diào)整兒子寬度 在能伸縮的兒子使用flex：1
- 使用justify-content align-item flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding: 0;}
ul,ol{list-style:none;}
a{
color: inherit;
text-decoration: none;
}
.background{
border: 1px solid green;
background: black;
color: white;
}
.wrapper{
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
width: 60px;
height: 60px;
background: red;
}
.menu{
flex: 1;
margin-left: 50px;
}
.menu > li{
float: left;
width: 110px;
text-align: center;
padding: 18px 0;
}
.actions{
text-align: right;
padding: 18px;
}
</style>
</head>
<body>
<div class="background">
<div class="wrapper clearfix" style="border: 1px solid black;">
<div class="logo">
</div>
<ul class="menu clearfix">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
<li>導(dǎo)航5</li>
<li>導(dǎo)航6</li>
</ul>
<div class="actions">
<a href="#">個(gè)人中心</a>
<a href="#">購(gòu)物車</a>
</div>
</div>
</div>
</body>
</html>
css爛怎么辦
爛思維：想到什么寫(xiě)什么
- 有個(gè)大體框架 分豆腐塊
tab bar bigBanner pro contacts - 命名要精確 （不會(huì)命名看同行怎么命名）
- 最小影響原則
- 嵌套不要超過(guò)五層
