css-day05内容

day05内容
复习
背景
background-color 背景颜色
background-image:url(’’) 背景图片
background-repeat 背景图片重复方式
repeat-x x方向重复一行
repeat-y y方向重复一列
no-repeat 不重复
repeat 【默认】x方向y方向重复铺满
background-position 设置背景图片的位置
关键字
绝对单位 -200px -100px
可以用来实现CSS Sprites技术,图片精灵技术
图片精灵技术的好处?
减少网页访问服务器的次数,节约网络资源。
图片精灵技术怎么实现?
将所有使用背景图片的元素设置同一张背景图片
根据需要显示背景图片中的不同位置上的内容,使用background-position属性实现
background-origin 设置背景图片开始的区域
padding-box 【默认】从内间距区开始绘制
border-box 从边框区开始绘制
content-box 从内容区开始绘制
background-clip 背景图片的裁切
padding-box 从内间距区开始裁剪
border-box 【默认】从边框区开始裁剪
content-box 从内容区开始裁剪
background-attachment 设置背景图片的固定点
scroll 【默认】背景图片随着滚动条滚动
fixed 背景图片固定,即使内容滚动,背景图片不滚动
background 速写属性
[][][][][][]
background:fixed content-box red url(’’) center no-repeat;
哪个效率更高?
background-color:red; 效率高
background:red;
你给我个钳子 你给了我一个,我就当做钳子去使用
你给我个工具 你给了我一个,我再看这个东西是什么
与人沟通
做项目
三要素
时间 地点 人物

            前端与后台对接需要注意的事情    对接接口
                时间  什么接口    什么参数    发生了什么问题,响应是什么
            
边框
    border:1px  solid  red;
        border-width    边框线的宽度
        border-style    线的样式
        border-color    线的颜色
    border-top        上边框
        border-top-width
        ...
    border-bottom    下边框
        ....
    border-left    左边框
        ...
    border-right  有边框
        ...

    border-radius  设置圆角边框
        50%  圆
        border-top-left-radius    左上角的圆角边框
        border-top-right-radius    右上角的圆角边框
        border-bottom-left-radius    左下角的圆角边框
        border-bottom-right-radius    右下角的圆角边框
    实现一个三角形,要求其他方向都是没有颜色

浮动

定位
发布了24 篇原创文章 · 获赞 1 · 访问量 418

猜你喜欢

转载自blog.csdn.net/hanmiao12345/article/details/104745654
今日推荐