1.盒子模型

div{
width:200px;
height:200px;
background:xxxxx;
box-sizing:border-box;
border:10px solid black;
padding:10
}

image

2.实现导航

.nav{
line-heigth:50px;
background:deeppink;
font-size:0
height:50px;
}
.nav a{
color:#fff
text-decoration:none;
display:inline-block;
font-size: 14px;
width:100px;
text-align:center;
}
a hover{
background-color:pink;
}
<div class="nav">
<a href="#">手机</a>
<a href="#">平板</a>
<a href="#">电脑</a>
</div>

image

3.页面漂浮

.one{
width:100px;
height:100px;
background:red;

float:right 向右浮动 可横向成行

clear:both;清除浮动

width:200px;
height:200px;
background:blue;
}
<div class="one"></div>
<div class="two"></div>

image

4.float/display实现导航

a{
text-decoration:none;
display:block;
color:white;
}
ul{
list-style:none;
overlow:hidden;
background:pink
}
li{
fioeat:left;
line-height:50px;
width:100px;
text-align:center;}
a:hover{
color:gainsboro;
background-color:deeppink}
<ul>
<li><a href="#">手机</a></li>
<li><a href="#"></a>平板</li>
<li><a href="#"></a>电脑</li>

image