css基础11

85 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情

背景附着

语法: 

background-attachment : scroll | fixed 

参数:

scroll : 背景图像是随对象内容滚动fixed :  背景图像固定

说明: 

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

导航栏案例

使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。

        <meta charset="utf-8">  
        <style>  
        body {  
              
        }  
        a {  
            width: 200px;  
            height: 50px;  
            /* background-color: orange; */  
            display: inline-block;  /* 把a 行内元素转换为行内块元素 */  
            text-align: center;  /* 文字水平居中 */  
            line-height: 50px;  /* 我们设定行高等于盒子的高度,就可以使文字垂直居中 */  
            color: #fff;  
            font-size: 22px;  
            text-decoration: none;  /* 取消下划线 文本装饰 */  
        }  
        a:hover {  /* 鼠标经过 给我们的链接添加背景图片*/  
            background: url(images/h.png) no-repeat;  
        }  
        </style>  
    </head>  
    <body>  
    <a href="#">专区说明</a>  
    <a href="#">申请资格</a>  
    <a href="#">兑换奖励</a>  
    <a href="#">下载游戏</a>  
    </body>
    
    
# **盒子模型(CSS重点)**

其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

看透网页布局的本质

网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?

盒子边框(border)

边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。

语法: 

border : border-width || border-style || border-color 

边框属性—设置边框样式(border-style)

边框样式用于定义页面中边框的风格,常用属性值如下: