19-定义列表练习

最新推荐文章于 2021-12-25 00:32:19 发布

majiamin123

最新推荐文章于 2021-12-25 00:32:19 发布

阅读量417

点赞数

分类专栏： Html基础文章标签： Html定义列表定义列表图文混排

本文链接：https://blog.csdn.net/majiamin123/article/details/100813032

版权

Html基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-定义列表练习</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        dl{
            width: 400px;
            height: 200px;
            background: #ccc;
            margin: 100px auto;
        }
        dl dt{
            width: 150px;
            height: 200px;
            float: left;
        }
        dl dd{
            width: 250px;
            height: 200px;
            float: right;
        }
        dl dd h2{
            line-height: 50px;
            color: orange;
            margin: 0 10px;
            font-size: 16px;
        }
        dl dd p{
            line-height: 24px;
            color: #000;
            font-size: 12px;
            margin: 0 10px;
        }
    </style>

</head>
<body>
<dl>
    <dt>
        <img src="images/me.jfif" width="150px">
    </dt>
    <dd>
        <h2>MJM</h2>
        <p>MJM是一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发及教学经验, 对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术，</p>
    </dd>
</dl>
</body>
</html>

运行结果截图：

在这里插入图片描述

注意点：

webstore中快捷键，快速建立定义列表，如下：

dl>dt+dd

<dl>
    <dt></dt>
    <dd></dd>
</dl>

majiamin123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录