前提
问问题
任务：不要直接问答案
非任务：最好拿代码来问问题
支持IE 使用浮动布局
注意：
- 实在想不到好的标签使用div,
- 伪类写法clearfix:after clearfix::after : 兼容ie :: 不兼容ie
不支持IE使用flex布局
视频讲解
必须要会
浮动布局
固定步骤：
- 在儿子身上加 float：left 实在不行写float：right
- 写
clearfix:after clearfix::after伪类 加到爸爸身上 ::ie不支持 ：ie支持 - 给儿子调宽高，里面有宽度父级元素最好不要加 宽高最好不要加
<!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; /*一会删*/
}
</style>
</head>
<body>
<div class="background">
<div class="wrapper clearfix" style="border: 1px solid black;">
<div class="logo">
</div>
<ul class="menu clearfix">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
<div class="actions">
<a href="#">个人中心</a>
<a href="#">购物车</a>
</div>
</div>
</div>
</body>
</html>
flex布局
固定步骤：
- 在爸爸身上加dispaly：flex
- 调整儿子宽度 在能伸缩的儿子使用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>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
<div class="actions">
<a href="#">个人中心</a>
<a href="#">购物车</a>
</div>
</div>
</div>
</body>
</html>
css烂怎么办
烂思维：想到什么写什么
- 有个大体框架 分豆腐块
tab bar bigBanner pro contacts - 命名要精确 （不会命名看同行怎么命名）
- 最小影响原则
- 嵌套不要超过五层
网友评论