web考试内容1

background-attachment：定义背景图片随滚动轴的移动方式

属性值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-repeat：设置是否及如何重复背景图像（默认背景图像在水平和垂直方向上重复）

属性值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-size：规定背景图像的尺寸

属性值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

flex-direction：决定主轴的方向（即项目的排列方向）

属性值

row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿

以上菜鸟皆有

栗子：

要求：弹性布局设置

设置页面背景图片自动适应屏幕大小。

    body {
            background-image: url("img/timg2.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
    }

设置3列DIV水平弹性布局效果，宽度比例为1：2：1。

            .div1,
            .div3 {
                flex: 1;
                position: relative;
            }
            
            .div2 {
                flex: 2;
                display: flex;　　//中间的3个div
                flex-direction: column;
                position: relative;
            }

中间一列添加3个DIV垂直方向显示，为这3个DIV添加阴影效果。

            .div21,.div23{
                flex: 1;
                border: 2px solid white; 
                height: 50px;
            }
            
            .div22 {
                flex: 2;
                position: relative;
                border: 2px solid white; 
                text-align: center;
                height: 50px;
            }

当浏览器窗口宽度改变时，按比例自动调整布局宽度。

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body {
                background-image: url("img/a1.jpg");
                /*background-position: center;*/
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: cover;
            }
            
            .bigdiv {
                display: flex;
                height: 800px;
                width: 100%;
                border: 2px solid white;
            }
            
            .div1,
            .div3 {
                flex: 1;
                position: relative;
                /*text-align: center;*/
                /*background-color: yellow;*/
            }
            
            .div2 {
                flex: 2;
                display: flex;
                flex-direction: column;
                position: relative;
                /*text-align: center;*/
                /*background-color: #CCCCCC;*/
            }
            
            .div21,.div23{
                flex: 1;
                border: 2px solid white; 
                height: 50px;
            }
            
            .div22 {
                flex: 2;
                position: relative;
                border: 2px solid white; 
                text-align: center;
                height: 50px;
            }
            
        </style>
    </head>

    <body>
        <div class="bigdiv">

            <div class="div1"></div>

            <div class="div2">
                <div class="div21"></div>
                <div class="div22"></div>
                <div class="div23"></div>
            </div>

            <div class="div3"></div>

        </div>
    </body>

</html>

posted @ 2019-11-29 16:41 糖分控阅读(195) 评论(0) 收藏举报

刷新页面返回顶部

糖分控

web考试内容1

公告