优化版 京东静态登录页面

废话不多说  习惯之一,先上笔记:

上午:

框模型

定义元素框处理元素内容,

width

height

margin://边距

两个边距重叠的时候以最大的为主(外边距的合并)

padding://内边距

背景:

颜色:

background-color:颜色;

图像:

background-image:url(图片地址) ;

背景平铺:

background-repeat: ;

background-repeat: no-repeat;//没有重复,只有一张图片

background-repeat: repeat-x;//沿着X轴重复

background-repeat: repeat-y;//沿着Y轴重复

background-repeat: ;//默认满屏

背景尺寸设置:

background-size:30% 20%;//设置当前背景图宽度 高度     可以使用像素  亦可以使用百分比

background-size: cover;//cover 按照最大图像最大显示 将背景覆盖完全,但是有些图片不能完全显示

background-size: contain;// contain 按照图像等比例放大

background-attachment: fixed;//不跟着滚动条移动

background-attachment: scroll;//默认值滚动

居中显示:

background-position:50% 50%// 显示在那个范围,第一个值是水平位置,第二个是垂直位置,表示沿着X轴Y轴的百分比

background-position: x,y//第一个值是水平位置,第二个是垂直位置,表示沿着X轴Y轴的绝对位置

background-position: left

background-position: center

background-position: right

background-position: top

background-position: bottom

剪切:

background-clip: border-box;//背景被裁减到边框合  为默认值

background-clip: padding-box;//背景被裁减到内编剧框

background-clip: content-box;//背景被裁减到内容框

定位区域:

background-origin: padding-box;//背景图像相对边框来定位

background-origin: border-box;//背景相对内编剧来定位

background-origin: content-box;//背景相对于内容框来定位

总的结合

background:yellow  url(图像地址) no-repest(没有重复) fixed(不滚动) padding-box(定位)

一言不合咱先上图:


html

css




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容