0
点赞
收藏
分享

微信扫一扫

第四天_图文组合

陌岛 2022-04-15 阅读 90
htmlcss

一、实现居中

  • height = line-height 文本垂直居中
  • 使行元素居中:text-align:center 写在父级,子级内容的行元素,行块元素,文本内容水平居中
  • 使块元素居中:margin:0 auto: 写在块元素,相对于父级水平居中
  • img标签会默认下方产生间隔,当改成块元素时 间隔消失 display:block;

二、图文组合

1)垂直结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文组合1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        div img{
            width: 100px;
            background-color: gold;
        }
        div p{
            width: 200px;
            height: 40px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
       <img src="D:\001-HTML\作业\csdn.png" alt="">
       <p>CSDN欢迎你的到来</p>
    </div>
</body>
</html>

效果如下:

2)水平结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文组合1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 300px;
            height: 70px;
            background-color: cyan;
        }
        div img{
            width: 100px;
            background-color: gold;
            float: left;
        }
        div p{
            width: 170px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
       <img src="D:\001-HTML\作业\csdn.png" alt="">
       <p>CSDN欢迎你的到来</p>
    </div>
</body>
</html>
 

 效果如下:

 

举报

相关推荐

第四天 作业

Rhcsa第四天

第四天笔记

HCIP 第四天

第四天记录

DOM第四天

hcip第四天

0 条评论