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 右下角的圆角边框
实现一个三角形,要求其他方向都是没有颜色
浮动
定位