发表于： 2018-07-29 23:57:32
2 677
今天完成的事情：
1.任务6写完了,目前而言感觉bootstarp并不好用,想要得到自己想要的样式,有时候还是需要自己去重新设置覆盖样式,还不如直接自己写样式.
2.这个任务有几个新知识点是之前看过的,想要让溢出div的文本内容显示为省略号,需要三个属性一起使用:
white-space: nowrap;(长文本不自动换行)
overflow: hidden;(溢出框的文本被裁剪,裁剪内容隐藏)
text-overflow: ellipsis;(溢出的文本显示为省略号)
3.在网上看到一个很有意思的纯css手风琴折叠图代码,就去了解了一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{ /*设置整体div的大小*/
width: 1000px;
height: 450px;
margin:100px auto;
overflow: hidden; /*超出div部分的内容自动隐藏,不可见*/
}
.box div{
width: 25%; /*图片初始所展示出的大小(因为有四个图片所以设置的25%,可根据实际情况改)*/
float: left;
transition:all 2s; /*设置图片从25%的大小展开到div:hover设定大小(65%)时所用的时间*/
}
img{
width: 960px; /*图片大小设置*/
cursor: pointer; /*cursor鼠标放上时显示的样式;pointer显示为一个手*/
}
.box:hover div{ width: 5%; } /*当鼠标移动到.box上时.box>div的width=5% */
.box div:hover{ width: 65%; } /*当鼠标移到一个.box>div上时.box>div的width=65% */
</style>
</head>
<body>
<div class="box">
<div><img src="img/1.png" alt=""></div>
<div><img src="img/2.png" alt=""></div>
<div><img src="img/3.png" alt=""></div>
<div><img src="img/4.png" alt=""></div>
</div>
</body>
</html>
注意:因为css样式是从上到下依次实现的,所以当鼠标移动到一个图片(div)上时,第一个.box:hover div{ width: 5%; } 会被第二个.box div:hover{ width: 65%; }所覆盖,所以最终实现的是,鼠标移到的图片变成width=65%,而没有移到的div变成width:5%.
4.github的上传老是莫名其妙的会出点问题....很坑
5.发现一个很好用的雪碧图制作网站,省的自己用ps一个个贴https://www.toptal.com/developers/css/sprite-generator
明天计划的事情：
1.发现任务6的底部用的是a链接,但是刚发现还有点问题,等明天改一下再交
遇到的问题：
1.a标签内不能嵌套div,嵌套后的div会全部变成链接(content+padding+margin部分都会变成链接),所以计划是改成button,如果不行的话就用onclick="location='URL'"但是这个好像是和js有关的,所以想劲量避免.
2.此任务说是要用bootstrap,但是我却没怎么用,只是开头的两个按钮用了,而且样式我还修改了很多.现在感觉学习用bootstrap的难点就在于不知道哪些样式可以用bootstrap来实现,而且bootstrap的class名也不大清楚.
收获：
1.学会了使用雪碧图
2.学会了hover的使用,之前看的不能点击的假导航列表也是用的hover实现的
3.了解了transition标签的使用,transition一般要配合hover使用.感觉用处不是特别的大.
返回列表
评论