发表于： 2019-01-03 20:02:39
1 712
今天完成的事情：
一、今天上午完善了任务8-1的细节，基本达到了自己想要的效果，也基本实现了响应式，图片如下
二、温习了一遍之前学习的表格标签：
1、<tr>行标签 <td>一格的标签 即使只有一行只有一格，也必须包裹在<td>标签里面，不然内容在会跑到表格外面
2、表格水平方向上的合并单元格 <td colspan=“2”> 代表这个格子占之前两个格子的空间，也就是水平方向上两个格子合并成一格
3、表格水平方向上的合并单元格 <td rowspan=“2”> 代表这个格子占之前两个格子的空间，也就是纵向方向上两个格子合并成一格
明天计划的事情：
尽量做完任务八九，然后总结。
遇到的问题：
速度有点慢，争取这个星期做到任务10。
收获：
学习了：锚点和过渡效果
1.锚点设置
1.使用 id 定位
先和大家说说最常用的 ID定位 ，这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位
使用说明：设置一个锚点 id,然后用 href 属性点位到该锚点id
<body> <li> <a href="#a">定位到A</a> </li>
<li id=“a”> 定位到A</li>
</body>
2.使用 name 定位
第二种定位的方式就有所限制了，使用 name 定位只用于 <a> 标签,其他的标签就不管用了。
<body> <li> <a href="#a">定位到A</a> </li>
<li> <a name="a">定位到A</a> </li>
</body>
3.使用js定位（暂时还没学到）
2.过渡属性
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果，必须规定以下两点内容：
1.规定您希望把效果添加到哪个 CSS 属性上
2.规定效果的时长
写法：
div{transition: width 2s;} 改变宽度，时间两秒
div{transition: width 2s, height 2s, transform 2s;} 改变宽地、高度、旋转，时间两秒
transition 简写属性，用于在一个属性中设置四个过渡属性。
div{transition: width 1s linear 2s;}
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。
transition-timing-function 规定过渡效果的时间曲线。
transition-delay 规定过渡效果何时开始。
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
返回列表
评论