发表于: 2018-12-03 16:05:52
2 785
今天完成的事情
按师姐说的把图片大小缩为原来的二分之一,重新导入了一下图片
插入图片方法1
设置图片为背景图片,并规定图片大小(由于ps图片为二倍图,所以宽高为切片的1/2)
html中
1. <div class="top"></div>
css中
1. .top{
2. height: 50px;
3. width: 100%;
4. background-image: url(../images/back.png);/*图片路径*/
5. background-size:30px 30px;/*图片大小*/
6. background-position: 15px center;/*图片位置,左边距15px,上下居中*/
7. background-repeat: no-repeat;/*图片不复制*/
8. }
如果想要背景图上下居中,且左右居中background-position: center, center;
注意图片路径是相对于css文件 ../是返回上一级目录
插入图片方法2
直接插入图片
html文件中写入
1. <img class="icon" src="images/icon1.png"/>
在css文件中设置图片大小等属性
1. .icon{
2. width: 43px;
3. height: 43px;
4. }
注意图片路径是相对于html文件
其它
为page-content设置height:100%,使背景色始终填满设备屏幕
背景图片语法
background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位,left代表靠左,top代表靠上
简写背景图片语法:
background:url(图片地址) no-repeat left top
明天计划的事情
再检查一下任务3,没什么问题就开始任务4
遇到的问题
从github上pull文件时报错
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: unpack-objects failed
解决办法:
用$ git config --add core.compression -1添加配置
收获
背景图片的设置,图片的定位
评论