现在,我们来到CSS中添加样式,这里,我在COLORS的多行注释上创建一个新的注释,因为我们要为新的页面添加样式。所以说:PAGE:ABOUT:
|
然后,我们为网站logo添加样式,所以指定.profile-photo。我要设置display为block。Max-width设置为150px,margin顶部为0,左侧和右侧为auto,底部为30px,border-radius设为100%:
|
将display设置为block,将允许我们使用自动边距将元素在页面上居中,默认情况下,图像显示在一行,但我们不希望此图像与其余文本在一行显示。所以,我们设置它是block。然后,我们设置图像的最大宽度为150个像素,它可以变小,但我不希望它超过150像素。最后,我们使用了一个名为Border Radius的新属性。也就是:边框半径属性,它允许您向元素添加圆角。您可以以像素为单位对它进行赋值,但这里我使用百分比。我把它设置为100%。这将使我们的圆角最大,实际上我们的照片将是一个圆圈,而不是一个正方形。
所以我们来保存它。切换到我们的浏览器,并刷新页面。
你看,图片现在是一个圆圈。你可能对圆角设为100%不理解,我们不妨把它设置为20像素:
|
|