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

WilsonLiu95 发布于2019-08-30 15:44 / 1723人阅读

摘要：背景由于今天第一次写文章发布在网上就转发给了朋友然后朋友给我解释了下和的作用说到了清除浮动这一块于是乎就开始了教我浮动相关的知识目的做出的效果第一次尝试要求做出的样子代码如下效果如下第二次尝试要求给每个增加背景颜色代码如下效

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

目的:做出1234 5 的效果

第一次尝试:

要求:做出1234 5的样子

代码如下:

效果如下:

第二次尝试:

要求:给每个li增加背景颜色
代码如下:

效果图:

第三次尝试 :

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

效果图:

嗯,勉强达到了某个人想要的效果~~~

后面他说还有很多种实现方式的~
比如:
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,如图:

更新后代码如下:

最终效果图:

GPU云服务器云服务器 php一周的第一天本月的第一天js html中css样式 html的css样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116329.html

带你轻松搞定时间选择控件原理

摘要：虽然大家都用过这个时间选择控件，但是却很少有人去研究其中原理。最近这边本人利用闲暇时间自己写了一个时间选择控件，借这个时间选择控件向各位同学们阐述这个时间选择控件的原理。前言说到这个时间选择控件，网上有很多各式各样的，相信很多同学们也都有用过，所以大家对这个也不陌生。虽然大家都用过这个时间选择控件，但是却很少有人去研究其中原理。最近这边本人利用闲暇时间自己写了一个时间选择控件，...

tigerZH 2019-08-21 11:52 评论0 收藏0
保姆级教程HTML两万字笔记大总结【建议收藏】（上篇）

摘要：标签不区分大小写，但推荐小写。标签可以嵌套，但不能交叉嵌套。标签也称为元素。比如行内标签亦可成行内元素。 ❤️HTML必备知识详解❤️ 第一部分：HTML框架简介...

paulli3 2021-10-13 09:40 评论0 收藏0
React的10种有效的设计模式

摘要：设计的种模式本文翻译自。剩下的肯定都是模式。真实的事实的特异性是网络开发人员死亡的第一原因。这种设计仅仅适用于登陆操作就在主页面内执行，而不是单独弹出一个模态窗口。这可以正常的工作，但确不是最好的方式。设计React的10种模式本文翻译自10 React mini-patterns。这篇文章由mrcode翻译，如果哪里翻译的不恰当或有错误的地方，欢迎指出。同时也希望大家关注我的...

yibinnn 2019-08-21 15:18 评论0 收藏0