发表于: 2018-07-23 23:44:58
1 631
今天完成的事情:
1.把任务六的下拉框完善了,利用flex把main部分显示的小问题完善了,复习了flex的相关知识点。
2.完善了任务七的第一张页面(版本选择页面),利用了百分比实现不同宽度较好的适应性。
3.写了一点投票页面的内容,插了几个小图标。
明天计划的事情:
1.尝试用HTML <audio> 标签
2.继续做任务七的投票页面,争取完成,明后天开始第三张页面的准备
遇到的问题:
1.做任务六时,由于下拉框选择用的时select,option内文字的居中无法用常规的居中方法,只能用padding,但效果并不好,后来终于百度到了text-align-last:center;这个属性,生效了,具体原理我也不太清楚(遇到什么困难,怎么解决的)
2.版本选择页面由于限宽了,原先设想是超出的宽度内容和宽度内的内容弄个不一样的背景色,这样页面也好看点,所以在body上加了个背景色,结果没有如愿,背景色并没有分开来,后来一查,原因在于没有设置html颜色,直接操作body的话,body会被浏览器当做根结点来对待
收获:
1.使用flex容器内元素,即flex item的float,clear、vertical-align属性将失效。
flex-grow:定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例。
flex-shrink:定义了当容器空间不足时,item是否缩小。默认值为1,表示当空间不足时,item自动缩小,其可能的值为整数,表示不同item的缩小比例。
flex-basis:指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。
2.用display:none和:hover来实现下来菜单:
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
.tanchu{
display:none;
}
.xuanfu:hover .tanchu{
display:block;
}
</style>
</head>
<body>
<ul>
<li>登陆</li>
<li>注册</li>
<li>消息通知</li>
<li class = "xuanfu">购物车
<div class = "tanchu">购物车中还没有商品,赶紧选购吧!</div>
</li>
</ul>
</body>
</html>
3.border:1px solid rgba(0,0,0,0.1);意思是 设定元素的边框为1像素宽,实线,颜色使用rgba来表达。其中,rgba是CSS3中的属性,rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值。范围从0到1,越接近1,代表透明度越低。
评论