dispaly和float

<doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>study</title>
    <link rel="stylesheet" href="study.css" type="text/css">
    <style>
        a{font-family: 华文行楷;font-size: 30px;color:lightblue;}
        a div{width: 100px;height: 100px;border: 1px solid red;}
        a span{width: 100px;height: 100px;border: 1px solid red;}
        .z{border: 1px red solid;}
        img{width: 400px;height: 300px;}
        .s{display: inline;margin: 20px;}
    </style>
</head>
<!-- 块级元素：独占一行
h1-h6 p div 列表 ...
行内元素：不独占一行
span a img strong ... -->
<!-- dispaly 也是行内样式排列的一种方式 -->
<!-- 加边框 border: 1px red solid;
浮动 float:left 左 -->
<body>
    <div class="z">
    <div class="s"><img src="images/2 (1).jpg"></div>
    <div class="s"><img src="images/2 (2).jpg"></div>
    <div class="s"><img src="images/2 (3).jpg"></div>
    </div>
</body>
</html>
posted @ 2023-03-16 09:27  小小的羊  阅读(19)  评论(0)    收藏  举报