HTML5+CSS3集训（16）

于 2024-07-01 17:26:46 发布
阅读量519 收藏 3
点赞数 10
分类专栏： html基础 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78986604/article/details/140105309
版权

图片布局案例实践 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p155</title>
</head>
<body>
    <ul>
        <li>
            <img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div>
        </li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p155</title>
    <style>
    body,ul,li,h3{
        margin: 0;padding: 0;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div>
        </li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p155</title>
    <style>
    img{
        width:125px;
        height:70px;
    }
    body,ul,li,h3{
        margin: 0;padding: 0;
    }
    ul{
        list-style-type:none;
        margin:50px auto;
        width:860px;
    }
    li{
        height:130px;
        padding:20px 0;
        border-top:2px solid #ccc;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div>
        </li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p155</title>
    <style>
    img{
        width:195px;
        height:130px;
        display:inline-block;
        vertical-align:center;
        margin-right:20px;
    }
    body,ul,li,h3{
        margin: 0;padding: 0;
    }
    ul{
        list-style-type:none;
        margin:50px auto;
        width:860px; 
    }
    li{
        height:130px;
        padding:20px 0;
        border-top:2px solid #ccc;
    }
    li:hover{
        background-color:#f8f8f8;
    }
    .content{
        display:inline-block;
        vertical-align:middle;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div>
        </li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p155</title>
    <style>
    img{
        width:195px;
        height:130px;
        display:inline-block;
        vertical-align:middle;
        margin-right:20px;
    }
    body,ul,li,h3{
        margin: 0;padding: 0;
    }
    ul{
        list-style-type:none;
        margin:50px auto;
        width:860px; 
    }
    li{
        height:130px;
        padding:20px 0;
        border-top:2px solid #ccc;
    }
    li:hover{
        background-color:#f8f8f8;
    }
    .content{
        display:inline-block;
        vertical-align:middle;
    }
    .content h3{
        margin-bottom:25px;
        font-weight:normal;
        font-family:"黑体";
        font-size:20px;
    }
    .mid{
        margin-bottom:20px;
    }
    .mid span{
        color:#cccc00;
        font-size:16px;
    }
    .mid a{
        display:inline-block;
        background-color:#eee;
        padding:2px 5px;
        color:#999;
        font-size:14px;
        text-decoration:none;
    }
    .bottom{
        margin-bottom:10px;
        color:#999;
        font-size:14px;
    }
    .bottom span{
        border:1px solid #eee;
        padding:3px 10px;
        border-radius:25px;
    }
    .bottom i{
        font-style:normal;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div>
        </li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
        <li><img src="巧克力.jpg" alt="">
            <div class="content">
                <h3>你的名字——经典之作</h3>
                <div class="mid">
                    <span>标签</span>
                    <a href="">立花泷</a>
                    <a href="">宫水三叶</a>
                    <a href="">你的名字</a>
                    <a href="">流星雨</a>
                    <a href="">夜空</a>
                </div>
                <div class="bottom">
                    <span>时光</span>
                    <i>2024.7.1</i>
                </div>
            </div></li>
    </ul>
</body>
</html>

 

vertical-align 是一个 CSS 属性，它主要用于设置内联元素（比如 <span>、<img>、<button>、<input> 等）或表格单元格（<td>、<th>）的垂直对齐方式。然而，vertical-align: middle; 的使用有一些特定的场景和注意事项。

1. 应用于内联元素

当 vertical-align 应用于内联元素时，它会影响元素相对于其行内基线（baseline）的垂直对齐方式。但是，直接在一个块级元素（如 <div>）上使用 vertical-align: middle; 通常不会有任何效果，因为块级元素默认会占据其父元素的整个宽度，并且不会与其他内联元素在同一行内。

2. 应用于表格单元格

在表格中，vertical-align 可以用来控制单元格内容的垂直对齐方式。例如，vertical-align: middle; 会使单元格内容在其单元格内垂直居中对齐。

3. 实现文本与行内块级元素的垂直居中

一个常见的使用场景是，当你想让一个行内块级元素（如 display: inline-block; 的 <div>）与文本垂直居中对齐时。但是，由于 vertical-align 只对内联元素和表格单元格有效，所以你需要一些额外的技巧来实现这个效果。

一种常见的方法是使用 flexbox 布局，因为 flexbox 提供了更强大和灵活的垂直对齐控制。但是，如果你仍然想使用 vertical-align，你可以尝试以下技巧：

  • 将文本和行内块级元素都设置为 display: inline-block; 或 display: inline;（对于文本来说，这是默认值）。
  • 使用一个额外的内联元素（如一个空的 <span>）作为“假基线”，并为其设置 vertical-align: middle; 和一个与行高相等的字体大小（例如 font-size: 20px;，如果行高是 20px）。这个“假基线”将确保其他内联元素相对于它垂直居中对齐。
  • 但是请注意，这种方法可能不是最优雅或最可靠的解决方案，并且可能受到字体、字体大小和行高等因素的影响。

 

超越～and me
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值