发表于： 2019-06-13 01:12:19
2 932
今天完成的事
1.提交了任务5
2.开始任务6
3.使用ps从素材上切图
4.学习
background-position和雪碧图(CSS Sprites)用法
5.编好基础结构
<body>
<header>
<h1></h1>
<h1></h1>
</header>
<p>
</p>
<footer>
<h2></h2><h2></h2>
<h2></h2>
</footer>
</body>
</html>
5.为header引入样式
<header class="h">
.h{
position:fixed; /*设置header为相对浏览器窗口定位*/
width:100%; /*设置宽度为窗口的100%*/
height: 50px; /*设置header高度为50px*/
background-color: rgb(95, 192, 205);/*设置header为蓝色*/
}
6.为footer引入样式
<footer class="h">
footer.h{
bottom: 0px; /*设置footer紧贴窗口下边*/
background-color: rgb(248, 250, 251);/*设置footer颜色为*/
}
7.给列表头引入样式
<p class="h">
p.h{
background-color: white; /*设置列表头颜色为白色*/
top: 50px; /*设置列表头距离窗口上边为50px 紧贴header*/
margin: 0px; /*消除产生的默认外边距*/
}
8.设置列表主体并引入样式
<p class="p">
</p>
.p{
display:flex; /*设置布局为flex弹性布局*/
flex-direction:column; /*设置列表主体主轴方向为从上往下*/
padding:100px 0px 50px 0px; /*设置上内边距为100px 下内边距为50px 只在中间界面显示*/
margin:0px; /*消除产生的默认边距*/
}
9.设置 BOOTSTRAP
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
10.下载解压bootstrap
11.设置单选按钮组
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active ">
<input type="radio" checked>找雇主
</label>
<label class="btn btn-default">
<input type="radio" > 找护工
</label>
</div>
12.设置header为横向inline-flez排列并设置子项目垂直居中
display: inline-flex; /*设置display属性为inline-flex排列*/
align-items: center; /*行列项目中垂直居中排列*/
明天计划的事
1.设置按钮在header居中 添加定位图标
2.添加三个按钮到footer并设置好样式
3.添加列表头
4尝试使用CSS雪碧图
5.完善列表主体
遇到的问题
1.使用
position: fixed;
定位列表头之后会产生margin：16px 不知道是什么原因
直接设置margin：0px；去掉了
收获
1.我的理解是：雪碧图的概念就是先计算好雪碧图上各个图标的位置
然后需要时就使用参数来选定雪碧图上特定位置的部分来呈现在页面上
一张图就可以载有很多图标 不需要分割很多小图 从而减少访问页面时的htts请求
返回列表
评论