前端开发学习笔记（1）图片和文字的布局问题

最新推荐文章于 2023-10-29 17:31:59 发布

原创最新推荐文章于 2023-10-29 17:31:59 发布 · 868 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

前端开发学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文主要探讨前端开发中的布局问题，包括解决页面ul标签默认40px padding-left，图片作为背景时文字垂直居中放置，以及处理ul之间空隙的方法。通过CSS样式调整，实现更精确的页面布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、解决页面中默认padding-left:40px问题

在编写页面的时候总是发现在ul标签总是出现位40px的空隙，所以在网上查了一下，除了IE之外的浏览器都有设置默认值。
可以看到上图的默认设置里出现了padding-left被设为40的情况
解决方法：
使用以下*选择器重置默认值

*{
    margin: 0;
    padding: 0;
}

解决后样式：

2、图片作为背景，文字在图片背景上的放置

（1）只有一个标签放置时，将文字在背景图片上垂直居中放置

首先是背景设置：
设置背景background-img:url()后，还需要将设置以下内容：

    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;

其中：
1、background-position:center top
将背景图片的中心放置在块的中心（这样能够让最中间的块展示出来）

2、background-repeat
斜体样式背景图片不重复

3background-size:cover
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

在设置完背景图片后设置文字位置，将text-align设置为center，使得文字水平居中，然后将line-height设置为height的值，使得文字垂直居中（若不止一个标签则该方法无效）

（2）有多个标签在同一个背景图片中存在时

用div标签（其他类似标签也可以）将相同布局的标签包起来，在背景图块中使用margin设置相对应的距离，设置完整个标签的样式以后在设置标签中的样式

实例展示：
html代码：

<ul class="discount_div_ul discount_div_ul-ul1">
     <div class="discount_div_ul_div">
         <div class="discount_div_ul_div-dollar">￥</div><div class="discount_div_ul_div-title">100</div>
         <div class="discount_div_ul_div-discountText">满1000元减100元</div>
     </div>
 </ul >

css代码：

.discount_div_ul_div{
    height: 90px;
    width: 160px;
    margin: 40px 0px 0px 27px;
    /* background-color: black; */
    top: 20%;
    /* background-position: 120px 80px; */
    color: white;
}
.discount_div_ul_div-dollar{
    font-size: 25px;
    padding-left: 15px;
    /* left: 100px; */
    float: left;
    position: absolute;
}
.discount_div_ul_div-discountText{
    font-size: 15px;
    text-align: center;
}

运行结果：