前端开发 - CSS - 下 / 憋错料

CSS:    12.display    13.浮动效果    14.浮动特性    15.浮动产生的问题和解决方法    16.float京东导航栏    17.position    18.z-index    19.京东案例

12.display

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;

            /* 控制元素隐藏 不占位置 */
            /*display: none;*/

            /*控制元素隐藏 占位置 影响后面盒子的布局*/
            /*visibility: hidden;*/

            /*转为 行内块元素*/
            /*display: inline-block;*/

            /*将 块级元素转换为 行内元素 不能设置宽高*/
            display: inline;
        }
        a{
            /*display: block;*/
            /*display: inline-block;*/
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        img{
            /* 行内块元素 一般转化块级元素 */
            /*display: block;*/
            display: inline;  /*转为行内元素 依然可设置宽高 没必要转换  */
            width: 100px;
            height: 100px;

        }
    </style>
</head>
<body>
    <div>123</div>
    <div>987</div>
    <a href="#">百度一下</a>
    <img src="./images/homesmall1.png" alt="python">
</body>
</html>

13.浮动效果

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .wrap div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid black;

            /*
            文档流：可见元素在文档中的显示位置；
            浮动产生的效果：
                浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止
            */

            /* left 左浮动 左侧为起始，从左往右依次排列*/
            float: left;

            /* right 右浮动 右侧为起始，从右往左依次排列  */
            /*float: right;*/

            /*float: none;*/

        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

14.浮动特性

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浮动特性</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .wrap div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box1{
            background-color: red;
            float: left;
        }
        .box2{
            background-color: yellow;
            margin-left: 20px;
        }
        .box3{
            background-color: green;
        }
        .container{
            /*width: 300px;*/
            /*height: 300px;*/
            background-color: chartreuse;
            float: left;
        }
        span{
            float: left;
            background-color: blue;
            width: 100px;
            height: 100px;
        }

        /*
        文档流：可见元素在文档中的排列位置
        浮动效果：
            1.浮动可以使元素脱离文档流，不占位置
            2.浮动会使元素提升层级
            3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容
            4.浮动可以使行内元素支持宽高
        */

    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="container">哈哈</div>
    <div class="container">我们</div>

    <span>嘿嘿</span>

</body>
</html>

15.浮动产生的问题和解决方法

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浮动产生的问题和解决方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        /* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/
        .wrap{
            width: 800px;
            /*height: 500px;*/
            background-color: red;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrap div{
            float: left;
        }
        .wrap1{
            width:200px;
            height: 400px;
            background-color: yellow;
        }
        .wrap2{
            width:350px;
            height: 400px;
            background-color: green;
            margin-left: 25px;
        }
        .wrap3{
            width:200px;
            height: 400px;
            background-color: blue;
            margin-left: 25px;
        }
        #clearfix{
            float: none;
            clear: both;
        }

        /* 官方推荐的解决办法 最长使用的解决办法*/
        /*
        .wrap:after{
            visibility: hidden;
            clear: both;
            display: block;
            content: ‘.‘;
            height: 0;
        }*/

        /*
        浮动产生的问题：
            父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，因为子元素不占位置了！
        解决办法：
            1.给父盒子设定固定高度；缺点：不灵活；
            2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。
                缺点：结构冗余
            3.官方推荐：推荐使用：
                .wrap:after{
                    visibility: hidden;
                    clear: both;
                    content: ‘.‘;
                    display: block;
                    height: 0;
                }
           4.推荐使用：给父元素添加overflow:hidden  eg: .warp{overflow: hidden;}
        */

    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap1"></div>
        <div class="wrap2"></div>
        <div class="wrap3"></div>
        <!--<div id="clearfix"></div>-->
    </div>
</body>
</html>

16.float京东导航栏

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>float京东导航栏</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 100%;
            margin: 0 auto;
            background-color: rgba(240,243,239,0.73)
        }
        .wrap .header{
            width: 1245px;
            height: 40px;
            margin: 0 auto;
            background-color: rgba(227,228,229,0.73)
        }
        .header_l,.header_r{
           float: left;
        }
        .header_l img{
            width: 20px;
            height: 20px;
        }
        .header_l span{
            color: rgba(126,126,126,0.98);
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .header_l{
            margin: 5px 0 0 30px;
        }
        .header_r{
            margin-left: 250px;
            width: 915px;
        }
        .header_r ul li{
            list-style: none;
            height: 40px;
            line-height: 40px;
            float: left;
            padding: 0 10px;

        }
        .header_r ul li a{
            text-decoration: none;
            color: rgba(126,126,126,0.98);
        }
        .header_r ul li a:hover{
            color: red;
        }

    </style>
</head>
<body>
    <!--最外层的父盒子-->
    <div class="wrap">
        <!--导航-->
        <div class="header">
            <div class="header_l">
                <img src="./images/fav.ico" alt="一个logo">
                <span>北京</span>
            </div>

            <div class="header_r">
                <ul>
                    <li><a href="">你好，请登录&nbsp;<span>免费注册</span></a></li>
                    <li class="spacer"></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">我的京东</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">京东会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">手机京东</a></li>
                </ul>
            </div>
        </div>

        <!--中心内容-->
        <div class="content"></div>

        <!--底部-->
        <div class="footer"></div>
    </div>

</body>
</html>

17.position

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
            position:relative;
            top: 50px;
            left: 30px;
        }
        .box2{
            background-color: yellow;
            position:absolute;
            top:150px;
        }
        .box3{
            background-color: green;
            position:absolute;
            left: 100px;
            top:10px;
        }

        .father{
            width: 300px;
            height: 300px;
            background-color: gray;
            margin-top: 50px;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:20px;
            left: 20px;
        }
        .aside_logo{
            width: 100px;
            height: 100px;
            background-color: yellow;

            /* 固定定位*/
            position: fixed;
            bottom: 20px;
            right:20px;
        ;
        }

        /*
         static ： 默认值

         relative : 相对定位
            1. 不设置偏移量的时候，对元素没有任何影响
            2. 相对定位可以提升层级关系。
            3. 相对定位是相对于自身定位。

        absolute : 绝对定位
            1. 可以提升层级关系
            2. 脱离文档流
            3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。
            4. 有父级的情况下，父级设置相对定位（绝对位置），子集设置绝对定位，是以父盒子进行定位的。
                （父相子绝） 来设置位置的调整

        fixed : 固定定位
        */

    </style>
</head>
<body>
    <!--<div class="box1"></div>-->
    <!--<div class="box2"></div>-->
    <!--<div class="box3"></div>-->

    <div class="father">
        <div class="child">

        </div>
    </div>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <div class="aside_logo"></div>

</body>
</html>

18.z-index

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box1{
            background-color: red;
            top: 50px;
            z-index: 1;
        }
        .box2{
            background-color: green;
            /*border-radius: 5px 10px 15px 20px;*/
            border-radius: 50%;
            z-index: 20;
        }
        .box3{
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

19.京东案例

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>京东案例</title>
    <!--
     网页布局：
        上下 结构
        上中下 结构
        上左右下 结构： 1-2-1 结构
        上左中右下 结构： 1-3-1 结构
    -->
    <style type="text/css">
        *{padding: 0;margin: 0}
        ul>li {list-style: none;}
        a{text-decoration: none;}
        .wrap{width: 100%;background-color: rgba(240,243,239,0.98)}
        .container{width: 1300px;overflow: hidden;margin: 0 auto}  /*overflow:hidden 用在float:left 可以撑开背景*/
        .container div{float: left}
        .c_l{width: 200px;height: 500px;background-color: green;}
        .c_c{width: 800px;height: 500px;background-color: red;
            margin-left: 5px}
        .c_r{width: 200px;height: 500px;background-color: yellow;
            margin-left: 5px;}
        .c_l ul li{
            padding: 5px 0 5px 10px;
        }
        .c_l ul li a{
            color: #868686;
        }
        .c_l ul li a:hover{
            color: red;
        }
        .c_l ul li:hover {
            background-color: gray;
        }
        .center_image{
            width: 600px;
            height: 500px;
            float: left;
        }
        .c_c ul li{
            float: right;
            position: relative;
            right: 2px;
            top: 5px;
        }
        .c_c ul li img{
            width: 200px;
            height: 165px;
        }
        .c_r{
            position: relative;
        }
        .c_r p{
            color: green;
            background-color: gray;
            width: 90px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            position: absolute;
        }
        .c_r .p1{
            left: 95px;
            top: 30px;
        }
        .c_r .p2{

        }

    </style>

</head>
<body>

    <div class="wrap">
        <div class="container">
            <div class="c_l">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">家用电器</a></li>
                </ul>
            </div>
            <div class="c_c">
                <img src="./images/homesmall1.png" alt="" class="center_image">
                <ul>
                    <li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
                    <li><a href=""><img src="./images/homesmall1.png" alt=""></a></li>
                    <li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
                </ul>
            </div>
            <div class="c_r">
                <div>
                    <p class="p1">哈哈哈</p>
                    <p class="p2">嘿嘿嘿</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

原文地址：https://www.cnblogs.com/alice-bj/p/8972260.html

时间： 2024-10-10 21:17:44

前端开发 - CSS - 下

前端开发 - CSS - 下的相关文章

前端开发css实战：使用css制作网页中的多级菜单

1+x 证书 Web 前端开发 css 专项练习

web前端开发——css

前端开发 css、less编写规范

前端开发 - CSS - 总结

Mobile Web 前端开发 CSS动画经验分享

前端开发-CSS介绍

前端开发css样式基础篇

Web前端开发css基础样式总结