浮动布局小练习

最新推荐文章于 2022-01-11 15:50:17 发布

终究是黄粱一梦

最新推荐文章于 2022-01-11 15:50:17 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/paccaq/article/details/121784715

版权

话不多说，先上代码

<!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>Document</title>
</head>
<style>
    .a1{ height: 430px; width: 390px; float: left;}
    .a1>.t1{ float: left; margin-left: 20px; margin-top: 20px; margin-right: 10px; margin-bottom: 10px;}
    .a1>.t2{ float: left; margin-right: 20px; margin-top: 20px; margin-bottom: 10px;}
    .a1>.t3{ float: left; margin-left: 20px; margin-right: 10px; margin-bottom: 20px;}
    .a1>.t4{ float: left; margin-right: 20px; margin-bottom: 20px;}
    .a2{ height: 430px; width: 390px; float: left;}
    .a2>img{ margin-left: 20px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px;}
    .a3{ height: 430px; width: 390px; float: left;}
    .a3>.t1{ float: left; margin-left: 20px; margin-top: 20px; margin-bottom: 10px; margin-right: 10px;}
    .a3>.t2{ float: left; margin-top: 20px; margin-bottom: 10px; margin-right: 20px;}
    .a3>.t3{ float: left; margin-left: 20px; margin-bottom: 20px; margin-right: 10px;}
    .a3>.t4{ float: left; margin-bottom: 20px; margin-right: 20px;}
</style>
<body>
    <div class="a1">
        <img src="images/left01.png" class="t1">
        <img src="images/left02.png" class="t2">
        <img src="images/left03.png" class="t3">
        <img src="images/left04.png" class="t4">
    </div>
    <div class="a2">
        <img src="images/center.png">
    </div>
    <div class="a3">
        <img src="images/right01.png" class="t1">
        <img src="images/right02.png" class="t2">
        <img src="images/right03.png" class="t3">
        <img src="images/right04.png" class="t4">
    </div>
</body>
</html>

效果图

可能有做的不好的地方各位见谅

终究是黄粱一梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动布局小练习

话不多说，先上代码<!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"> <
复制链接

扫一扫