发表于： 2018-09-16 21:36:24
1 758
今天完成的事情：
完善职业推荐页面的效果：锚点，hover效果，过渡效果
锚点设置
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定位（暂时还没学到）
过渡属性
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;
}
本来设置的盒子display：none； 然后鼠标悬停的时候设置其显示出来。但是要加过渡效果的话没有生效。
换了另一种方式，利用透明属性，先设置盒子opacity：0； 为全透明，鼠标悬停时透明度为1，显示出来。
明天计划的事情：
回上海，做任务
遇到的问题
收获：
锚点，过渡
返回列表
评论