今天完成的事情:
1、第一个页面底部hover效果的圆点完成。
就是在用纯css写圆点,然后通过给hover设置样式达到效果。我今天查资料的时候查错了,我以为写圆点很复杂,然后就一直找资料看,其实很简单就只用width和height和border-radius就能解决,所以说看是不行的,还是要动手操作你才知道是什么样的效果。
这里我用的是任务6中的方法来写的hover,发现在写任务七的时候,很多知识点都是前面任务中学到的,这里相当于是重新温习一遍前面的知识,可以运用自己熟悉的知识来写,也有很多不熟悉但是很好写的方法还需要加强学习。
2、开始第二个页面的制作。
在写header头部的时候,我是用flex中的justify-content和绝对定位写的,虽然我知道用flex就可以解决,但是对于flex的运用还不是很清楚,我是给每一个样式就用div嵌套,然后用justify-content居中,在用绝对定位的值达到想要的位置。
html代码如下:
<header>
<button class="line">
<h1 class="one"></h1>
<h1 class="two"></h1>
<h1 class="three"></h1>
</button>
<div class="vote" >
<button class="voteword">投票</button>
</div>
<div class="picture">
<button class="x"></button>
</div>
<div class="voice">
<p class="text">发言讨论结束,大家请投票</p>
</div>
css部分代码如下:
.vote {
display: flex;
justify-content: space-around;
position: relative;
top: 6px;
}
.voteword {
font-size: 18px;
color: #fff;
background: #29bde0;
border: none;
}
.picture {
display: flex;
justify-content: flex-end;
}
.x {
background: url(images/X.png) no-repeat;
background-size: 20px;
width: 30px;
height: 25px;
border: none;
position: absolute;
top: 9px;
相当于我在同一个类名中用flex和position的定位,我也不知道这样写规不规范,所以提交提交上来让师兄给点建议,虽然知道用绝对定位很麻烦,需要自己去计算数值,但是为了加快任务进度,还是先用自己比较熟悉的属性来写吧,我也知道flex后面任务还是要用到的。。。
3、学习新的知识点。
<adiuo>定义声音,比如音乐或其他音频流。 可以在开始标签和结束标签之间放置文本内容。
属性:
(1)autoplay:如果出现该属性,则音频在就绪后马上播放。
(2)controls:如果出现该属性,则向用户显示控件,比如播放按钮。
(3)loop:如果出现该属性,则每当音频结束时重新开始播放。
(4)muted:规定视频输出应该被静音。
(5)preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用autoplay可以忽略该属性。
(6)src:值url:要播放的音频的url。
对于这个属性怎么运用明天还需要去着重了解下,这个部分我先放着,先写主体main部分的小方块,并且要有hover效果。
明天的计划:
1、完成第二个人页面的制作。
2、开始第三个页面的编写。
问题:
1、

我给子级设置absolute或者给子级p设margin0,就会变成上图,这里设relative就能通过top值让字体显示在中间,但是不完全居中。
2、

我在写三角形的时候加了margin:10px,所以就把三角形挤过来了,如图:
后来才发现不应该加margin值。解决方案去掉margin值就行。
3、每次写代码有的数值或者它本身就有很多样式,然后我再给其加上其他属性的时候就不知道会出现什么样的效果,只能通过在网页上调试才能发现问题。
评论