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

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

2024-08-16 147
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何美化网页元素，包括设置登录页面的模糊背景效果，使用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}。

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

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

文章标签：
前端开发
热爱技术的小郑
目录
相关文章
游客y3obldvnqeb54
使用markdown-it对markdown进行一个实时解析
# 引言 大家应该都接触过markdown笔记吧，我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法，右边能够实时解析，并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用，那么这是如何实现的呢？今天我们来一起探究一下。 # 开始 首先，我们这个演示学习在Vue3+TypeScript下使用的，所以我们预先建议准备一个Vue3+Typescript工程。 对于markdown的解析，我们可以使用`markdown-it`来进行解析。 比如，我们在左侧设置一个输入框，接收用户markdown输入，我们通过`ma
游客y3obldvnqeb54
1639 0
ckssyq7lf2sju
|
开发工具 iOS开发 MacOS
解决VScode文件无法编辑(删除键 换行键失去作用)
解决VScode文件无法编辑(删除键 换行键失去作用)
ckssyq7lf2sju
3424 0
石小石Orz
|
存储 开发框架 JavaScript
Threejs中三维物体和HTML的爱恨情仇：CSS2DRenderer
【8月更文挑战第7天】Threejs中三维物体和HTML的爱恨情仇：CSS2DRenderer
石小石Orz
1345 4
Threejs中三维物体和HTML的爱恨情仇：CSS2DRenderer
那年春天
|
缓存 UED
keep-alive 组件的 include 和 exclude 属性有什么作用？
【10月更文挑战第6天】
那年春天
1613 3
最好zzz
|
存储 前端开发 NoSQL
如何优雅地实现在线人数统计功能：技术干货分享
在现代Web开发中，实时在线人数统计是一个常见且重要的功能，它不仅提升了用户体验，还能为网站运营者提供宝贵的数据支持。今天，我们将深入探讨如何优雅地实现这一功能，结合前端展示、后端处理及数据存储等多个方面，为您呈现一套完整的技术解决方案。
最好zzz
1441 5
wait_
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件，旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性，提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台，不仅限于 C/C++ 接口，还支持多种语言。CEF 功能强大，性能优异，广泛应用于桌面端开发，如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权，商业友好，装机量已超 1 亿。此外，GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
wait_
2596 3
程序边界
|
资源调度
【已解决】‘export‘ 不是内部或外部命令，也不是可运行的程序或批处理文件
‘export‘ 不是内部或外部命令，也不是可运行的程序或批处理文件
程序边界
2999 0
1560195324766884
|
Shell Linux Windows
忘掉Iterm2，试试这款跨平台终端工具
Mac用户最多的用的就是Iterm2了，windows之前因为丑陋的终端也开发了新的终端工具，很神奇的是，很长一段时间里，都没有一款真正好用的能跨平台的终端工具，直到我发现了hyper。无论Windows、Mac、Debian、Fedora还是其他Linux系统，hyper都能支持。
1560195324766884
1229 0
忘掉Iterm2，试试这款跨平台终端工具
gswnlrt2j7wj6
|
缓存 资源调度 JavaScript
yarn安装和使用及与npm的区别
yarn安装和使用及与npm的区别
gswnlrt2j7wj6
408 0
jcLee95
|
Web App开发 监控 网络协议
笔记：WebRTC 网络技术理论与实战（二）
笔记：WebRTC 网络技术理论与实战（二）
jcLee95
1205 0
笔记：WebRTC 网络技术理论与实战（二）

热门文章

最新文章

  • 1
    linux下ffmpeg安装
  • 2
    overleaf 插入图片，引用图片，图标标题Fig与文章引用Figure不一致解决
  • 3
    364 页 PyTorch 版《动手学深度学习》PDF 开源了（全中文，支持 Jupyter 运行）
  • 4
    阿里云上的几种数据备份方式
  • 5
    用深度神经网络修复H漫：看完这篇你就能眼中无码
  • 6
    MySQL · 引擎特性 · 像NOSQL那样使用MySQL
  • 7
    解决GitHub文件无法下载的问题
  • 8
    OpenSearch大模型实践之Havenask篇
  • 9
    SpringBoot整合Java Mail实现Outlook / Office365发送邮件
  • 10
    2019阿里云双11来袭,价格非常重要,但是懂得上云攻略更重要
  • 1
    Spring Boot中使用Swagger3.0.0注解
    22
  • 2
    别用"战术勤奋"掩盖"战略懒惰"：AI时代的降维竞品分析
    46
  • 3
    《Unity原生融合：体验生态构建与玩法裂变的实战指南》
    28
  • 4
    《Unity小程序开发的实战技术教程》
    43
  • 5
    阿里云优惠券免费领取汇总：2088元代金券、学生300元无门槛、企业算力补贴领取说明
    40
  • 6
    企业上云为啥纠结？混合云 VS 多云，到底怎么选？——一篇写给技术人也写给老板看的真心话指南
    33
  • 7
    从“攒一锅再算”到“来一条就干一条”：大数据批处理到流处理的进化之路
    29
  • 8
    阿里云2核2G服务器够用吗？能支持多少人在线访问？
    156
  • 9
    一个可用于企业开发及通用跨平台的Makefile文件
    238
  • 10
    阿里云8核16g服务器能容纳多少人？性能配置够用吗？
    44

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云弹性公网IP线路类型【BGP(多线)_精品】是什么意思？