练习18

最新推荐文章于 2024-07-18 15:09:36 发布

D0MINIC123

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量71

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/D0MINIC123/article/details/114954384

版权

前端学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

2021/3/17 练习布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>聊天对话框</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            /*将无序列表的默认样式去掉*/
            width: 300px;
            height: 400px;
            margin: auto;
            /*对话框居中*/
            border: 1px dotted black;
            /*合并写法*/
        }

        .all{
            clear: both;
        }

        .left{
            float: left;
            margin-left: 6px;
            background: whitesmoke;

        }
        .right{
            color: white;
            float: right;
            margin-right: 6px;
            background: green;
        }

    </style>
</head>

<body>
    <ul>
        <li class="all left">天王盖地虎!</li>
        <li class="all right">宝塔镇河妖!</li>
        <li class="all left">脸红什么?</li>
        <li class="all right">精神焕发</li>
        <li class="all left">咋的又黄了?</li>
        <li class="all right">嘿嘿,防冷涂的蜡</li>
    </ul>
</body>

</html>

效果图
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

D0MINIC123

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习18

2021/3/17 练习布局<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>聊天对话框</title> <style type="text/css"> * { padding: 0; margin: 0; } ul {
复制链接

扫一扫