背景:由于今天第一次写文章发布在网上,就转发给了朋友.然后朋友给我解释了下overflowY和overflowX的作用.说到了清除浮动这一块~
于是乎就开始了教我浮动相关的知识~
目的:做出1234 5 的效果
- 第一次尝试:
要求:做出1234 5的样子
代码如下:
<html>
<body>
<style>
.demo{
float:left;
}
</style>
<ul style="list-style:none">
<li class="demo">1</li>
<li class="demo">2</li>
<li class="demo">3</li>
<li class="demo">4 </li>
<li class="demo">5</li>
</ul>
</body>
</html>效果如下:
- 第二次尝试:
要求:给每个li增加背景颜色
代码如下:
<html>
<body>
<style>
.demo{
float:left;
padding:8px;
background-color:white;
color:white;
}
.demo1{
float:left;
padding:8px;
background-color:#87d068;
color:white;
}
.demo2{
float:left;
padding:8px;
background-color:#f50;
color:white;
}
.demo3{
float:left;
padding:8px;
background-color:#2db7f5;
color:white;
}
.demo4{
float:left;
padding:8px;
background-color:#108ee9;
color:white;
}
.demo5{
float:left;
padding:8px;
background-color:#87d068;
color:white;
}
</style>
<ul style="list-style:none;overflow：hidden">
<li class="demo1">1</li>
<li class="demo2">2</li>
<li class="demo3">3</li>
<li class="demo4">4</li>
<li class="demo"> </li>
<li class="demo5">5</li>
</ul>
</body>
</html>
效果图:
- 第三次尝试 :
要求:简化代码,去掉那个手写的4和5中间的空格,并给ul增加背景色,间距,圆角
<html>
<body>
<style>
.demo{
float:left;
padding:8px;
color:white;
border-radius:5px;
margin:5px;
}
.demo1{
float: right;
}
</style>
<ul style="overflow:hidden;list-style:none;background-color:#F8F8FF;width:200px;">
<li class="demo" style='background-color:#87d068'>1</li>
<li class="demo" style='background-color:#f50'>2</li>
<li class="demo" style='background-color:#2db7f5'>3</li>
<li class="demo" style='background-color:#108ee9'>4</li>
<li class="demo demo1" style='background-color:#87d068'>5</li>
</ul>
</body>
</html>
效果图:
后面朋友说还有很多种实现方式的~
比如:
1:一个是 li 设置 display: inline-block；然后结合 text-align 实现
2:还有一种是弹性布局，外面套个div，设置 display:flex; justify-content: space-between; 然后把 5 单独拿出来
3:或者简单些的，ul 设置 display:flex；然后 1~4 设置宽度，5 设置 flex: 1； text-align: right;
我就不一 一实现了~有兴趣的小伙伴自行实现把~
加更~~~~!!
- 第四次尝试:
要求:再次简化代码,去掉1前面的空格
1前面有空格的原因:
打开F12开发者工具,查看空格的地方,发现了ul的padding默认左右有个40px,如图:
更新后代码如下:
<html>
<body>
<style>
.demo{
float:left;
padding:8px;
color:white;
border-radius:5px;
margin:5px;
text-align:left;
}
.demo1{
float: right;
}
</style>
<ul style="overflow:hidden;list-style:none;background-color:#F8F8FF;width:200px;padding:0px;">
<li class="demo" style='background-color:#87d068'>1</li>
<li class="demo" style='background-color:#f50'>2</li>
<li class="demo" style='background-color:#2db7f5'>3</li>
<li class="demo" style='background-color:#108ee9'>4</li>
<li class="demo demo1" style='background-color:#87d068'>5</li>
</ul>
</body>
</html>
最终效果图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。