div用处很大，你需要知道，今天就来教教大家

可以在pycharm软件中新建一个HTML文件

 用右键点击pythonproject1选择New，选择HTML files后点击，出现输入框，输入你需要的自定义名称（在此我使用HTML菜鸟教程为名）点击Enter即可创建

结果

 

开始正式教学：

首先按Ctrl+A全选，再按下Backspace删除所有

然后复制并粘贴以下内容

（为考虑某些未登录的用户我分为了两类）

---------------------------------------------------------------------------------------------------------------------------------

已登录用户：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML菜鸟教程</title>
    <style>
        
    </style>
</head>
<body>
<div>
    <div>
        <div>
            
        </div>
    </div>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------

未登录用户：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML菜鸟教程</title>
    <style>
        
    </style>
</head>
<body>
<div>
    <div>
        <div>

        </div>
    </div>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------

自行通过以下代码中的注释理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML菜鸟教程</title>
    <style>
         .urls{ 
            width:130px;
            height: 80px;
            background: #dcb712;
            margin: 200px auto;
            }
        #url{       
            float:left;
            background-size: 25px 25px;
            background-position: 10px -2px;
            background-repeat: no-repeat;
            border-right:1px grey solid;
            padding:0px 40px;
            margin-top: 30px;
    </style>
</head>
<body>
<div class="urls">
    <div>
        <div id="url"><a href="https://bbs.csdn/?spm=1001.2101.3001.6068">CSDN</a></div> <!--class/di（两者有所不同，class对应.，id对应#，在名称前面点上对应的符号即可）="这中间可自定义名称"主要用于分类-->
    </div>
</div>
</body>
</html>

background后是图层的背景颜色

可在这里拾色http://tools.jb51/static/colorpicker/（rgb颜色在线）可选择3个0到255之间的数或非全为数字的字符

运行结果如下：

---------------------------------------------------------------------------------------------------------------------------------

点击CSDN可跳转至社区首页哦！ 

---------------------------------------------------------------------------------------------------------------------------------

其他有不懂的可至百度查询

https://www.baidu/

点击可直接跳转

注：以下的图片对于div图层知识有巨大的用处（针对于HTML，此作品或其他作品都有用处）

以上为作者自行制作，如需转载，请务必私信告知，且声明原作者。各位用户，如发现未按要求进行转载，请及时举报并告知，谢谢！

更多推荐

HTML div设置菜鸟教程