首页 > 其他分享 >HTML5+CSS3集训（16）

HTML5+CSS3集训（16）

时间：2024-07-01 17:30:12浏览次数：21  
标签：CSS3 vertical 16 align 2024.7 立花 名字 HTML5 宫水

图片布局案例实践 

<!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）。这个“假基线”将确保其他内联元素相对于它垂直居中对齐。
  • 但是请注意，这种方法可能不是最优雅或最可靠的解决方案，并且可能受到字体、字体大小和行高等因素的影响。

 

标签：CSS3,vertical,16,align,2024.7,立花,名字,HTML5,宫水
From： https://blog.csdn.net/2301_78986604/article/details/140105309

相关文章

  • HTML5+CSS3集训（15）
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;}.q1{border:1pxsolidblack;bac......
  • HTML5+CSS3集训（14）
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>p180</title></head><body><divclass="container"><divclass="top"......
  • [刷题笔记] Luogu P1612 [yLOI2018] 树上的链
    ProblemDescriptionDescription给定一棵有\(n\)个节点的树。每个节点有一个点权和一个参数。节点\(i\)的权值为\(w_i\)，参数为\(c_i\)。\(1\)是这棵树的根。现在，对每个节点\(u\)（\(1\lequ\leqn\)），请在树上你找到最长的一条链\(v_1,v_2,\dotsv_m\)，满足如下条件：......
  • css3动画实现数字动态增加
    要实现数字的动态增加效果，可以使用CSS3的@keyframes规则来创建动画，并使用JavaScript来更新数字。以下是一个简单的实现示例：HTML:<divid="counter"class="counter">0</div>CSS:.counter{/*初始样式*/}@keyframesincreaseNumber{from{opacity:0;transfo......
  • HTML5+CSS3+JS小实例：图片九宫格
    实例：图片九宫格技术栈：HTML+CSS+JS效果：源码：【HTML】<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • DH11温湿度检测模块、lcd1602、HC-08蓝牙构成温湿度数据管理系统
    目录温湿度通过串口上传PC: 温湿度数据管理系统：温湿度通过串口上传PC:sendByte(datas[0]/10+0x30)；sendByte(datas[0]%10+0x30);这两行代码用于将一个字节（是DHT11传感器读取的湿度或温度的整数部分）转换为两个ASCII字符，并通过UART串口发送出去。+0x30:在ASCII......
  • [淘宝/天猫/1688/京东]API接口数据采集分享
    在当今时代，从数据中挖掘价值的重要性愈发凸显，远超以往任何时期。随着新冠疫情的席卷，所有B2B公司都迎来了前所未有的挑战，它们不得不迅速将业务转移到线上的电子商务平台，以加速数字化转型的步伐。而随着疫情的逐渐缓解，这种线上线下的融合趋势非但没有减弱，反而得到了进一步的强化。......
  • 在Linux中，如何按照该要求抓包：只过滤出访问http服务的，目标ip为192.168.0.111，一共抓1000
    在Linux中，可以使用tcpdump工具来抓取网络包。根据你的需求，我们需要过滤出只访问HTTP服务的包，目标IP为192.168.0.111，并且只抓取1000个包，最后将这些包保存到1.cap文件中。以下是具体的步骤和命令：打开终端：首先，你需要打开Linux系统的终端。使用tcpdump命令：tcpdump是一个常用的......
  • 3169 找出最大公约数
    解法一：循环倒叙一个个找#include<bits/stdc++.h>#definef(i,s,e)for(inti=s;i<=e;i++)#definelllonglongusingnamespacestd;constintN=1e3+10,inf=0x3f3f3f3f;intmain(){intn,m;cin>>n>>m;for(inti=n;i>=1......
  • IIC驱动-基于EEPROM存储芯片AT24C02模块和三合一环境传感器AP3216C
    本文将基于IIC协议编写EEPROM芯片AT24C02存储芯片的IIC驱动程序，本文内容将分为三个部分：imx6ull的IIC控制器介绍，AT24C02存储芯片介绍，IIC的Linux驱动程序编写。关于IIC协议的内容与介绍这里不展开，相关资料很多，可以自行去查阅，但是这里需要注意的是，IIC协议本身就是一个协议，只是一些基......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99