培训
岳学长讲的特别好,尤其是那个快捷键用的,让我跟不上学长的操作。羡慕,想学。有个地方不懂希望学长以后上课的时候可以补充补充,就是浏览器的F12功能,学长讲的再细一点就好了,感觉如果会用的话,写网页会更方便些。
作业
这次的作业也很难,但有了一些基础后感觉更得心应手了。 知道先把大概的框架构造好、把html写好,再加CSS样式,努力的一步一步让网页逼近样图的样子。
这次的作业有几个难点:
一:如何把导航栏固定在页面顶端
二:如何添加一条短的横线
三:如何在一个圆形图片的外面加一个圈,并使这个圈在一条线的中央
解决方法:
1.给导航栏添加样式:
#nav{
position:fixed;
top:0;
background-color:#fff;
}
这里的position:fixed;就是让导航栏固定,
但是但是固定后会发现导航栏上方会有空白部分,所以我们要加top:0;
且这个导航栏的背景是透明的,这样会显示下方元素,所以我们要加上background-color:#fff;使它的背景为白色,
但使用fixed后,导航栏脱离了文档流,不占据页面的空间,导致下方的元素会补上来,所以我们要在下一个元素加上margin-top样式,或者用JavaScript解决这个问题。
2.添加短横线分割内容,让页面美观:
<hr width="" color="">
#text{
border-top: solid #F5F5F5 2px;
}
这里我们使用hr标签,并给其加上宽度和颜色要求;或者给一个块添加border-top样式:solid表示添加的边框为实线,#F5F5F5表示其颜色为白烟色,2px表示他的宽度。这样就可以添加一个美观的短横线。
3.尝试一些骚操作:
#img{
border: solid #F5F5F5 2px;
border-radius:99px;
background-color: #fff;
padding:15px;
posittion:relative;
top:60px;
}
我们可以在圆形图片上加上边框,并使边框的弧度很大,变成一个圆,且给图片一个内间距,让边框与图片分开,再使用position:relative;把图片定位到一个hr标签上即可实现要求。