html的css写法,关于学习css样式,html写法的第一天

背景:由于今天第一次写文章发布在网上,就转发给了朋友.然后朋友给我解释了下overflowY和overflowX的作用.说到了清除浮动这一块~

于是乎就开始了教我浮动相关的知识~

目的:做出1234        5 的效果

第一次尝试:

要求:做出1234     5的样子

代码如下:

.demo{

float:left;

}

• 1
• 2
• 3
• 4     
• 5

效果如下:

第二次尝试:

要求:给每个li增加背景颜色

代码如下:

.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;

}

• 1
• 2
• 3
• 4
•      
• 5

效果图:

第三次尝试 :

要求:简化代码,去掉那个手写的4和5中间的空格,并给ul增加背景色,间距,圆角

.demo{

float:left;

padding:8px;

color:white;

border-radius:5px;

margin:5px;

}

.demo1{

float: right;

}

• 1
• 2
• 3
• 4
• 5

效果图:

后面朋友说还有很多种实现方式的~

比如:

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,如图:

更新后代码如下:

.demo{

float:left;

padding:8px;

color:white;

border-radius:5px;

margin:5px;

text-align:left;

}

.demo1{

float: right;

}

• 1
• 2
• 3
• 4
• 5

最终效果图: