前端练习静态网页（二）：图片排列

最新推荐文章于 2024-07-27 23:01:21 发布

Wby_Nju

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量1.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wby_Nju/article/details/105284669

版权

本文继续探讨前端静态网页制作，聚焦于图片排列问题。文章详细介绍了顶部图片因定位导致的重叠问题及解决方法，以及主体部分中文字和图片的布局调整。在主体部分的图片排列上，通过调整元素的排列方式实现预期效果，帮助读者理解行内元素与块级元素的区别。

摘要由CSDN通过智能技术生成

前文：前端练习静态网页（一）：导航栏

一顶部图片

当添加下方的图片资源时，出现了资源重叠的问题
在这里插入图片描述

    <div>
        <a href="#"><img src="images/top.png"/></a>
    </div>

注意到，这里问题的产生原因是：我在上方导航栏div中设置的定位方式是fix。把这个定位方式删除掉，即可。

.nav {
   
/*略*/
    position: fixed;
}

然后将图片拉伸，将页面宽度填满

.top img{
   
    width: 100%;
}

在这里插入图片描述

二主体部分

2.1 主体文字内容

注意点1：文字右移
注意点2：主体部分变窄

/* 主体内容部分 */

div.body {
   
    margin-left: var(--body_lineMargin);
    margin-right: var(--body_lineMargin);
    /* 字体 */
    font-family: var(--body_fontTypeface);
    font-size: var(--body_fontSize);
    font-weight: var(--body_fontWeight);
}

p.subtitle {
   
    width: 100%;
    text-align: right;
}

.left {
   
    float: left;
}

.right {
   
    float: right;
}

    <div class="body">
        <p class="subtitle right">The infrastructure 基础架构</p>

        <div>
            <a href="#"><img class="nogap" src="images/FWQ.png" /></a>
        </div>

        <div>
            <a href="#"><img class="nogap" src="images/LYJH.png" /></a>
        </div>
    </div>

在这里插入图片描述

2.2 图片部分

容易的发现的，图片没法按照我们预期的方式排列，同时图片有缝隙
解决方案：用排列方式解决，左边图片靠左排列，右边图片向右排列即可

        <!-- 基础架构部分  -->
        <div class="infrastructure">
            <p class="subtitle right">The infrastructure 基础架构</p>

            <div>
                <a href="#"><img class="left" src="images/FWQ.png" /></a>
                <a href="#"><img class="right" src="images/LYJH.png" /></a>
                
                <a href="#"><img class="left" src="images/XNH.png" /></a>