发表于： 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，代表透明度越低。
返回列表
评论