08-HTML元素可见性与网页布局-4

元素可见性与网页布局

display标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 100px;height: 100px;color: red;display: ;">
            可见与不可见
        </p>
        <!--display值为none是不可见，空值默认可见-->
        <p style="width: 100px;height: 100px;color: red;display: none;">
            可见与不可见
        </p>
        <!--display值为inline,则宽高属性不生效-->
        <p style="width: 100px;height: 100px;color: red;
                display: inline;
                border: 1px solid #008800;">
            可见与不可见
        </p>
        <p style="width: 100px;height: 100px;color: red;
                display: inline;
                border: 1px solid #008800;">
            可见与不可见
        </p>
        <!--a标签为行级元素，display值为block时，宽高属性生效，等价于p标签-->
        <a style="width: 100px;height: 100px;color: red;
                display: block;
                border: 1px solid #008800;">
            a-block
        </a>
        <a style="width: 100px;height: 100px;color: red;
                display: block;
                border: 1px solid #008800;">
            a-block
        </a>
        <!--display值为inline-block,则拥有行级和块级元素的特点-->
        <a style="width: 100px;height: 100px;color: red;
                display: inline-block;
                border: 1px solid #008800;">
            a-block
        </a>
        <a style="width: 100px;height: 100px;color: red;
                display: inline-block;
                border: 1px solid #008800;">
            a-block
        </a>
    </body>
</html>
  • visibility属性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 100px;height: 100px;background-color: red;">
        </p>
        <!--visibility: hidden-->
        <p style="width: 100px;height: 100px;
                background-color: green;
                display: none;
                visibility: ;">
                <!--display: none,则绿色方框被蓝色方框占用-->
        </p>
        <p style="width: 100px;height: 100px;background-color: blue;">
        </p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 100px;height: 100px;background-color: red;">
        </p>
        <!--visibility: hidden-->
        <p style="width: 100px;height: 100px;
                background-color: green;
                display: ;
                visibility: hidden;">
                <!--visibility: hidden,则绿色方框不显示-->
        </p>
        <p style="width: 100px;height: 100px;background-color: blue;">
        </p>
    </body>
</html>

 

  • overflow属性—子元素超过父元素可实现滚动

 

  •  代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li style="height: 100px;
                    border: 2px #0000FF solid;
                    overflow: hidden;
                ">
                <p style="width: 100px;height: 100px;
                    background-color: red;
                ">
                    访问<a href="https://python.org">Python官网</a>,下载Python安装包
                </p>
                <p style="width: 100px;height: 100px;
                    background-color: red;
                ">
                    Python应用领域：数据分析，开发爬虫，WEB开发，自动化运维
                </p>
            </li>
            <li style="height: 100px;
                    border: 2px #0000FF solid;
                    overflow: scroll;
                ">
                <p style="width: 100px;height: 100px;
                    background-color: red;
                ">
                    访问<a href="https://python.org">Python官网</a>,下载Python安装包
                </p>
                <p style="width: 100px;height: 100px;
                    background-color: red;
                ">
                    Python应用领域：数据分析，开发爬虫，WEB开发，自动化运维
                </p>
            </li>
        </ul>
    </body>
</html>

 

  • 作业习题

 

  •  代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 300px;height: 300px;border: 1px solid #F8F8FF;overflow: scroll;">
            <img src="./03a.jpg";width="350";height="350";style="position: absolute;
                 top: 0px;
                 left: 0px
                 ">
        </p>
        <p style="width: 200px;height: 200px;
            border: 1px solid #F8F8FF;
            border-radius: 100px;
            overflow: hidden;
            top: 150px;
            left: 50px;
            ">
            pycharm拥有两个大版本:
            社区版-community
            专业版-professional
            pycharm面向软件开发人员,专业版需要付费.在专业版中提供了flask/django等一些开发环境与调试能力,初学者使用社区版已经可以了
        </p>
        <p>
        <h3>为您推荐 只能使用a标签，不能使用ul、dl、table</h3>
            <a href="" style="display: block;height: auto;line-height:20px;">Python21天入门</a>
            <a href="" style="display: block;height: auto;line-height:20px;">Python30天精通</a>
            <a href="" style="display: block;height: auto;line-height:20px;">Python60天放弃</a>
        </p>
        <h3>导航 - 只能使用ul、li</h3>
        <ul>
            <li href="" style="display: block;height: auto;display: inline;">Python21天入门</li>&nbsp;
            <li href="" style="display: block;height: auto;display: inline;">Python30天精通</li>&nbsp;
            <li href="" style="display: block;height: auto;display: inline;">Python60天放弃</li>
        </ul>
    </body>
</html>

div标签—分块设置属性

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="border: 3px solid #ff00ff;
                    width: 210px;
                    color: #fff;
                    margin: 0;">
            <div style="width: 100%;background-color: #6c7d5f;">
                <h3 style="margin: 0;">猜你喜欢</h3>
                <ul>
                    <li>西游记</li>
                    <li>水浒传</li>
                    <li>三国志</li>
                    <li>红楼梦</li>
                </ul>
            </div>
        </div>
        <div style="border: 3px solid #ff00ff;
                    width: 210px;
                    color: #fff;
                    margin: 0;">
            <div style="width: 100%;background-color: #5F9BE3;">
                <h3 style="margin: 0;">猜你喜欢</h3>
                <ul>
                    <li>西游记</li>
                    <li>水浒传</li>
                    <li>三国志</li>
                    <li>红楼梦</li>
                </ul>
            </div>
        </div>
    </body>
</html>

span标签—分组设置属性

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>我的母亲有<span style="color:blue">蓝色</span>的眼睛;
        我的父亲有<span style="color:sandybrown">棕色</span>的眼睛。
        </p>
    </body>
</html>
  •  代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--p标签不适宜作为分块原始，p从语义上是paragraph，而且在p内部不能
        有ul这样的块级元素。
        div是divide的意思，表示划分区域，是一个块级元素，内部可以包含其他块级元素
        span是行内分组元素，比如同一行文字需要多种格式
        -->
        <div style="border: 3px solid #ff00ff;
                    width: 210px;
                    color: #fff;
                    margin: 0;">
            <div style="width: 100%;background-color: #5F9BE3;">
                <h3 style="margin: 0;">猜你喜欢</h3>
                <ul>
                    <li>西游记</li>
                    <li>水浒传</li>
                    <li>三国志</li>
                    <li>红楼梦</li>
                </ul>
            </div>
            <div style="width: 100%;background-color: #6e7f1c;">
                <h3 style="margin: 0;">推荐阅读</h3>
                <ul>
                    <li>躺赢人生</li>
                    <li>35岁的程序员</li>
                    <li>流浪在北京</li>
                    <li>颈椎病按摩治疗</li>
                </ul>
            </div>
        </div>
        <!--SPAN:可以分组设置颜色或其他格式-->
        <p style="color: red;">我爱北京，我更爱我自己故乡</p>
        <p>
            <span style="color: red;">我爱北京</span>
            <span style="color: yellowgreen;">
                我更爱自己故乡
            </span>
        </p>
    </body>
</html>

float浮动标签

  • float属性—应用场景

  • 浮动BUG
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 400px;height: 350px;
                    border: 2px solid #FF8800;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: left;">
                        box1
            </div>
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: left;">
                        box2
            </div>
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: right;">
                        box3
            </div>
        </div>
        <!--
        inline-block对比：
        1.inline-block不存在浮动bug(父元素高度丢失)
        2.float会在高度上填补空间
        -->
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 400px;height: 350px;
                    border: 2px solid #FF8800;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: left;">
                        box1
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box2
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box3
            </div>
        </div>
        <!--
        与inline-block对比：
        1.inline-block不存在浮动bug(父元素高度丢失)
        2.float会在高度上填补空间
        -->
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--
        inline-block对比：
        1.inline-block不存在浮动bug(父元素高度丢失)
        2.float会在高度上填补空间
        -->
        <div style="width: 250px;height: 150px;
                    border: 2px solid #FF8800;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box4
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box5
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box6
            </div>
        </div>
    </body>
</html>
    • bug代码演示及修复

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 250px;
                    border: 2px solid #FF0000;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: left;">
                        box1
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box2
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box3
            </div>
        </div>
        <!--
        inline-block对比：
        1.inline-block不存在浮动bug(父元素高度丢失)
        2.float会在高度上填补空间
        -->
        <div style="width: 250px;
                    border: 2px solid #FF8800;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box4
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box5
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box6
            </div>
        </div>
    </body>
</html>
    • 代码修复
      • 加回height属性值
      • 使用overflow: hidden浮动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 250px;overflow: hidden;
                    border: 2px solid #FF0000;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        float: left;">
                        box1
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box2
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        float: left;">
                        box3
            </div>
        </div>
        <!--
        inline-block对比：
        1.inline-block不存在浮动bug(父元素高度丢失)
        2.float会在高度上填补空间
        -->
        <div style="width: 250px;
                    border: 2px solid #FF8800;">
            <div style="width: 100px;height: 100px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box4
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box5
            </div>
            <div style="width: 100px;height: 40px;
                        border: 1px solid #008000;
                        display: inline-block;">
                        box6
            </div>
        </div>
    </body>
</html>
    • 购物车状态栏

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--状态栏-->
        <div style="background-color: #68abfb;
                    width: 100%;height: 50px;">
            <div style="margin-left: 10px;
                    height: 50px;
                    line-height: 50px;
                    float: left;">
                    Python-XP手册
            </div>
            <div style="margin-right: 10px;
                    height: 50px;
                    line-height: 50px;
                    float: right;
                    ">
                <span style="vertical-align: baseline;">
                    <img src="./03a.jpg" style="width: 40px;
                        vertical-align: middle;
                        border: 2px solid #888484;
                    ">
                    luxp4588
                </span>
                <span>购物车</span>
                <span>客服</span>
            </div>
        </div>
    </body>
</html>
  • clear属性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--全部float-->
        <ul style="width: 90%;border: 1px solid red;overflow: hidden;">
            <li style="float: left;margin-left: 25px;">新闻第一条</li>
            <li style="float: left;margin-left: 25px;">新闻第二条</li>
            <li style="float: left;margin-left: 25px;clear: none;">新闻第三条</li>
            <li style="float: left;margin-left: 25px;">新闻第四条</li>
            <li style="float: left;margin-left: 25px;">新闻第五条</li>
        </ul>
        <ul style="width: 90%;border: 1px solid red;overflow: hidden;">
            <li style="float: left;margin-left: 25px;">新闻第一条</li>
            <li style="float: left;margin-left: 25px;">新闻第二条</li>
            <li style="float: left;margin-left: 25px;clear: left;">新闻第三条</li>
            <li style="float: left;margin-left: 25px;">新闻第四条</li>
            <li style="float: left;margin-left: 25px;">新闻第五条</li>
        </ul>
        <ul style="width: 90%;border: 1px solid red;overflow: hidden;">
            <li style="float: right;margin-left: 25px;">新闻第一条</li>
            <li style="float: right;margin-left: 25px;">新闻第二条</li>
            <li style="float: right;margin-left: 25px;clear: none;">新闻第三条</li>
            <li style="float: right;margin-left: 25px;">新闻第四条</li>
            <li style="float: right;margin-left: 25px;">新闻第五条</li>
        </ul>
        <ul style="width: 90%;border: 1px solid red;overflow: hidden;">
            <li style="float: right;margin-left: 25px;">新闻第一条</li>
            <li style="float: right;margin-left: 25px;">新闻第二条</li>
            <li style="float: right;margin-left: 25px;clear: right;">新闻第三条</li>
            <li style="float: right;margin-left: 25px;">新闻第四条</li>
            <li style="float: right;margin-left: 25px;">新闻第五条</li>
        </ul>
        
    </body>
</html>
    • 作业习题

 

    •  代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul style="width: 560px;height:150px;border: 2px solid black;overflow: hidden;">
            <p style="width: 100px;height: 100px;border: 2px solid black;
                    background-image: url(./python.png);
                    background-size: 100px 100px;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 25px;
                    left: 25px;">
            </p>
            <p style="float: left;margin-left: 105px;clear: left;">
                <h3>Python-XP是一个关于Python交流的公众号</h3>
            </p>
            <p style="float: left;margin-left: 105px;clear: left;
                    width: 80%;">
                Python-XP公众号是<a href="python-xp.com">python-xp.com</a>移动版，里面会提供很多有关于Python开发的文章
            </p>
        </ul>
        <ul style="width: 560px;height:150px;border: 2px solid black;overflow: hidden;">
            <p style="width: 100px;height: 100px;border: 2px solid black;
                    background-image: url(./python.png);
                    background-size: 100px 100px;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 195px;
                    left: 25px;">
            </p>
            <p style="float: left;margin-left: 105px;clear: left;">
                <h3>Python-XP是一个关于Python交流的公众号</h3>
            </p>
            <p style="float: left;margin-left: 105px;clear: left;
                    width: 80%;">
                Python-XP公众号是<a href="python-xp.com">python-xp.com</a>移动版，里面会提供很多有关于Python开发的文章
            </p>
        </ul>
    </body>
</html>

 

posted @ 2021-03-02 23:56  西瓜的春天  阅读(106)  评论(0)    收藏  举报