村上春树曾经说过:“如果一直想见谁,迟早肯定见得到。”
在周末,代码小白一起来学习如何准备520这一天的礼物吧,奥利给!!!
准备工作
首先,我们要有一个文件框架,
css存放我们的代码,img里面存放我们制作相册的素材,html文件点击可以查看我们的最终效果。
html怎么添加背景图片
如何给我们的网页增加一个背景图片呢,首先要选择一个合适大小的壁纸图片存在img里面。
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
background: url(../img/bj.jpeg) no-repeat 0 0;
}
我们在这里面更换背景。名字要和你所选择的文件名称对应。如果不想改代码的话,就和我起一样的名字用同一个格式就好啦。
background: url(../img/bj.jpeg) no-repeat 0 0;
html基础设置
li{
list-style: none;
}
.box{
width:200px;
height:200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: 42%;
margin-top: 22%;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(13deg);
-webkit-animation:move 5s linear infinite;
}
我们的li标签没有文字,html中list-style: none;表示我们的list标签前面没有任何修饰。
在HTML中
<li>
标签可以用来定义列表,
使用<li>
标签定义的列表可以是个无序列表(<ul>
)也可以是有序列表(<ol>
)。
<li>
标签定义列表项目(li是lists的缩写)
<li>
标签可用在有序列表 (<ol>
) 和无序列表 (<ul>
)
box里面是在设置我们的正方形边框,大小为 200 × 200 200\times200 200×200像素的,position位置设定。其他的,小白也不会了,不过这并不影响下一步。我们的相册是大立方体里面嵌套小立方体。所以我们代码有minbox,还有maxbox,在素材库中,不同像素尺寸的照片用最好用不同的命名规则创建。大概,最繁琐的环节就是素材库的准备。如何获得