AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何消除li和ul之间的空隙、如何使div中的内容居中

2024-08-16 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何美化网页元素，包括设置登录页面的模糊背景效果，使用CSS的`opacity`属性；以及如何使`div`中的内容水平居中，通过设置`margin: auto;`。此外，还讲解了如何消除`li`和`ul`之间的空隙，通过将`ul`和`li`的`padding`和`margin`设置为0。

1、登录页面(模糊登录背景)

如何模糊背景 ：opacity: 0.9;。设置的越小越透明

在这里插入图片描述

2、首页（美化部分排版对比效果ul|li）

如何设置div内容居中:margin:auto

在这里插入图片描述

.el-main {
  background-color: #e6e6fa;
  width: 80%;
  margin: auto;
}

如何消除li、ul之间的空隙：ul，li{padding:0;margin:0}。

未改进前
在这里插入图片描述

改进后效果
在这里插入图片描述

文章标签：
前端开发
热爱技术的小郑
目录
相关文章
你挚爱的强哥
|
6月前
【奇技淫巧】实现flex布局中，单独某个元素挪到右侧、底部，与其他元素排列不同，就像是个另类。（主要是用到margin-left和align-self）
【奇技淫巧】实现flex布局中，单独某个元素挪到右侧、底部，与其他元素排列不同，就像是个另类。（主要是用到margin-left和align-self）
你挚爱的强哥
61 0
你都不懂
|
3天前
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
你都不懂
7 1
Li370234940
|
22天前
多个p标签，并让div“flex”布局，且单行溢出隐藏
多个p标签，并让div“flex”布局，且单行溢出隐藏
Li370234940
27 0
秋刀鱼不做梦
|
5月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
秋刀鱼不做梦
57 5
C哩C哩li
|
6月前
|
前端开发 JavaScript UED
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
C哩C哩li
124 0
前端每日三省
|
前端开发 JavaScript SEO
b标签和strong标签的区别？css单行或多行溢出隐藏如何实现？浅谈this？
b标签只是文本加粗，而strong除了加粗还有强调的语义。
前端每日三省
130 1
Boale_H
|
前端开发
解决鼠标经过覆盖于低层级div的高层级div，依旧会触发低层级的hover属性的问题
解决鼠标经过覆盖于低层级div的高层级div，依旧会触发低层级的hover属性的问题
Boale_H
235 0
解决鼠标经过覆盖于低层级div的高层级div，依旧会触发低层级的hover属性的问题
chaorenzeng
关于去掉Li标签前面的小圆点和距离/显示下划线
解决方法 去掉Li标签前面的距离：     设置ul   padding:0px; 去掉Li标签前面的小圆点： 设置li      list-style-type:none; 显示下划线：    text-decoration:underline;
chaorenzeng
3222 0
一乐乐
|
前端开发
页面文本之间间隔等长~~巧用css中的text-align：justify；
页面文本之间间隔等长~~巧用css中的text-align：justify；
一乐乐
231 0
页面文本之间间隔等长~~巧用css中的text-align：justify；
草帽lufei
|
前端开发 容器
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题。
草帽lufei
180 0
div水平布局两边对齐