潭州学院html学习（day06）

一.背景概述

背景的相关属性：

backageage（背景颜色）
backage-image（背景图片）
backage-repeat（是否平铺）
backage-position（背景的位置）
backage-size(背景的尺寸)
backage-attachment（背景的依附）

backage-repeat:

background-repeat: repeat;   默认值，平铺
            background-repeat: no-repeat;    不平铺
            background-repeat: repeat-x;    在x轴平铺
            background-repeat: repeat-y;    在y轴平铺

backage-position:

backage-position:100px 100px;

backage-position:10% 10%;

background-position: -100px -100px; (超出了背景的这个元素的位移，不会显示)

    关键字：center、top、right、bottom、left

             background-position: right top;
             background-position: left bottom;
             background-position: center center;

             注意：如果我们只写一个值的时候
                1. 如果使用的是px或者百分比，这个值默认为x轴的值，y默认为center
                2. 如果使用的是关键字，要看这个关键字是那一个轴的，另外一个轴的值默认为center

            background-position: top;
            background-position: right;
            background-position: bottom;
            background-position: left;

backage-size:

关键字：cover/contain
            background-size: cover;      等比缩放铺满整个元素，将x,y都铺满
            background-size: contain;      等比缩放到遇到第一条元素边缘停止缩放

             px %
            background-size: 200px 200px;
            background-size: 200px;      只给一个值，x轴的值
            background-size: 200px auto;

            background-size: 100%;   相对于盒子元素

            注意：当只写一个值时该值为x轴的值，y轴的值默认等比缩放

backage-attachment:

规定背景图像是否固定或者随着页面的其余部分滚动
         注意：当给了这个属性以后，图片会相对于窗口进行定位，此时，background-position: 0 0就不再是相对于盒子元素，就是相对于可视化窗口。
         background-attachment: scroll 默认的随界面的滚动而移动（默认值）
         background-attachment: fixed; 不会随界面的滚动而移动

复合属性：

        background: greenyellow;    /* 背景颜色 */
        background: greenyellow url("images/timg.jpg"); /* 背景颜色背景图片 */
        background: url("images/timg.jpg"); /* 背景图片 */
        background: greenyellow url("images/timg.jpg") no-repeat; /* 背景颜色背景图片是否平铺 */
        background: greenyellow url("images/timg.jpg") no-repeat center; /* 背景颜色背景图片是否平铺背景定位 */
        background: greenyellow url("images/timg.jpg") no-repeat center/cover; /* 背景颜色背景图片是否平铺背景定位/背景尺寸 */
        background: greenyellow url("images/timg.jpg") no-repeat center/cover fixed; /* 背景颜色背景图片是否平铺背景定位/背景尺寸背景依附 */

实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        body{
            height: 3000px;
        }
        .box1{
            width: 400px;
            height: 400px;
            margin-left: 100px;
            /*margin: 100px auto;      上下100px外边距，左右自适应居中 */
            /* background: green; */

            /* 背景颜色 */
            /* background-color: goldenrod;     */

            /* 背景图片 */
            /* background-image: url("images/timg.jpg");    */

            /****************background-repeat********************/    


            /*background-repeat: repeat;   默认值，平铺 */
            /*background-repeat: no-repeat;    不平铺 */
            /*background-repeat: repeat-x;    在x轴平铺 */
            /*background-repeat: repeat-y;    在y轴平铺 */
            

            /****************background-position********************/    

            /* 相对于给背景的这个元素的位移，如果不给默认是 0 0 */
            /* background-position: 100px 100px; */

            /* 背景超出了盒子，就不会再显示 */
            /* background-position: -100px -100px;     */


            /* background-position: 10% 10%;     */


            /* 关键字：center、top、right、bottom、left */
            
            /* background-position: right top;     */
            /* background-position: left bottom;     */
            /* background-position: center center;     */


            /* 注意：如果我们只写一个值的时候
                1. 如果使用的是px或者百分比，这个值默认为x轴的值，y默认为center
                2. 如果使用的是关键字，要看这个关键字是那一个轴的，另外一个轴的值默认为center
             */
            /* background-position: top;    
            background-position: right;    
            background-position: bottom;    
            background-position: left; */  

            /****************background-size********************/ 

            /* 关键字：cover/contain */   
            /*background-size: cover;      等比缩放铺满整个元素，将x,y都铺满 */
            /*background-size: contain;      等比缩放到遇到第一条元素边缘停止缩放 */

            /* px %*/
            /* background-size: 200px 200px; */
            /*background-size: 200px;      只给一个值，x轴的值 */
            /* background-size: 200px auto; */

            /*background-size: 100%;   相对于盒子元素 */
            
            /* 注意： 当只写一个值时该值为x轴的值，y轴的值默认等比缩放*/


            /****************background-attachment********************/ 
            /* 规定背景图像是否固定或者随着页面的其余部分滚动
            注意：当给了这个属性以后，图片会相对于窗口进行定位，此时，background-position: 0 0就不再是相对于盒子元素，就是相对于可视化窗口。
             */
            
            /* background-attachment: scroll  默认的 随界面的滚动而移动（默认值）*/
         /* background-attachment: fixed;  不会随界面的滚动而移动 
            background-repeat: no-repeat;
            background-size: 200px;
            background-position: 100px 100px; */


        /****************background复合属性********************/ 
        background: greenyellow;    /* 背景颜色 */
        background: greenyellow url("images/timg.jpg"); /* 背景颜色 背景图片 */
        background: url("images/timg.jpg"); /* 背景图片 */
        background: greenyellow url("images/timg.jpg") no-repeat; /* 背景颜色 背景图片 是否平铺 */
        background: greenyellow url("images/timg.jpg") no-repeat center; /* 背景颜色 背景图片 是否平铺 背景定位 */
        background: greenyellow url("images/timg.jpg") no-repeat center/cover; /* 背景颜色 背景图片 是否平铺 背景定位/背景尺寸 */
        background: greenyellow url("images/timg.jpg") no-repeat center/cover fixed; /* 背景颜色 背景图片 是否平铺 背景定位/背景尺寸 背景依附 */
        

             


        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

二.给body添加全屏背景

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        html,body{
            height: 100%;
        }
        body{
            background: url("images/flower.jpg") no-repeat center/cover;
        }
    </style>
</head>
<body>
    
</body>
</html>

三.行级的特征

行级（display: inline)
     排列特性：可以和其他标签在同一行排列，一排无法放下的元素将在下一行开始排列
     宽高特性：不支持设置宽高、宽高均由内容撑开。
     边距特性：左右外边距生效，上下外边距不生效。margin:auto失效。上下内可以设置生效，但是无法作用于其他元素。左右内边距正常生效，
     换行间距：标签之间的换行会被解析为空格  默认为：display: inline;
     常用的行级标签：<a>、 <span>、 <strong>、 <em>、 <i>、 <b>....

实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        span{ 
            width: 200px;
            height: 50px;
            background: deeppink;
            /* margin: 20px; */
            padding: 20px;
            margin:auto;
            text-align: center;  /* 只能让span的文本居中显示 */

        }
        a{
            background: green;
        }
        .box1{ 
            width: 300px;
            text-align:center;
            background: green;
        }
    </style>
</head>
<body>
  
    <div class="box1">
        <span>我是span标签</span>
    </div>
    <!-- <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <a href="">我是a标签</a>
    <a href="">我是a标签</a> -->

    

</body>
</html>

四.块级特征

排列特性：单独占据一行的位置
宽高特性：可以设置宽高，高度由内容或者字体行高撑开，宽度默认为auto（100%）
边距特性：支持设置内外边距，并且正常生效
默认为：display: block;
常见的块级标签：<div>、<p>、<ul>、<li>、<h>、<dl>、<dt>、<dd>....

实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        div{
            width: 200px;
            background: orange;
            color: #fff;
            text-align: center;
            text-align: left;
            text-align: right;
        }
        
    </style>
</head>
<body>
    <div>今天是2018年7月22日</div>
    

</body>
</html>

五.行块级

排列特性：可以和其他标签在同一行排列，一排无法放下的元素将在下一行开始排列
             宽高特性：可以设置宽高，宽高均默认由内容或者字体行高撑开
            边距特性：支持设置内外边距，并且正常生效，margin:auto失效
            换行间距：标签之间的换行会被解析为空格
             对其方式：行块元素的位置会受到text-align文本对其方式的影响
            默认值：display:inline-block;
             常见的行块级标签：<img>、<input>、<select>...

实例代码;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        div{
            width: 200px;
            background: orange;
            color: #fff;
            text-align: center;
            text-align: left;
            text-align: right;
        }
       
    </style>
</head>
<body>
    <div>今天是2018年7月22日</div>
    

</body>
</html>

六.元素类型转换

            行级，块级，行块级可以通过display进行互相转换
            display: none; 元素隐藏(在页面中完全消失，不占位置，但是在html里面还存在)
            display: block; 元素显示

七.text-align和vertical-align

text-align:
                        center 文本居中显示
                        left    默认值，文本居左显示
                        right   文本居右显示
         注意：text-align 除了可以控制文本以外，还可以控制行级，行块级的显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{ padding: 0; margin: 0;}
        a{ text-decoration: none; color: inherit; }
        span{
            font-size: 50px;
            vertical-align: bottom;
        }
        img{vertical-align: bottom; }
    </style>
</head>
<body>
    <img src="images/timg2.jpg" alt="">
    <span>我是span</span>
</body>
</html>

posted on 2018-07-22 22:33 王育奕阅读(174) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

王育奕

潭州学院html学习（day06）

导航

公告