HTML+CSS编写静态网站-32 为关于页面添加样式

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

现在，我们来到CSS中添加样式，这里，我在COLORS的多行注释上创建一个新的注释，因为我们要为新的页面添加样式。所以说：PAGE：ABOUT：

 
 
/* **************************************

PAGE ABOUT

************************************** */

 

 

/* **************************************

COLORS

************************************** */
然后，我们为网站logo添加样式，所以指定.profile-photo。我要设置display为block。Max-width设置为150px，margin顶部为0，左侧和右侧为auto，底部为30px，border-radius设为100％：

 
 
/* **************************************

PAGE ABOUT

************************************** */

 

.profile-photo{

       display:block;

       max-width:150px;

       margin:0 auto 30px;

       border-radius:100%;

}
将display设置为block，将允许我们使用自动边距将元素在页面上居中，默认情况下，图像显示在一行，但我们不希望此图像与其余文本在一行显示。所以，我们设置它是block。然后，我们设置图像的最大宽度为150个像素，它可以变小，但我不希望它超过150像素。最后，我们使用了一个名为Border Radius的新属性。也就是：边框半径属性，它允许您向元素添加圆角。您可以以像素为单位对它进行赋值，但这里我使用百分比。我把它设置为100％。这将使我们的圆角最大，实际上我们的照片将是一个圆圈，而不是一个正方形。

所以我们来保存它。切换到我们的浏览器，并刷新页面。

你看，图片现在是一个圆圈。你可能对圆角设为100％不理解，我们不妨把它设置为20像素：

 
 
.profile-photo{

display:block;

max-width:150px;

margin:0 auto 30px;

border-radius:20px;

}
保存和刷新：

你看，这里就是一个漂亮的小圆角，而不是刚刚的一个完整的圆，好像这个效果更好一些，就用这个设置了。

现在，我们为这个页面中添加最后一个样式。我想对第三极标题应用样式，但我不打算把它放在PAGE ABOUT多行注释下。我实际上会把它放在GENERAL下，因为这个h3元素将会在以后应用到其他页面上。

所以，设置margin为0，0，1em和0。所以，顶部是0，右边是0，底部是1em，然后左边是0。这将清除h3元素的边距，并在底部添加一些边距，以便将它与其他文本分开一点。

 
 
img{

max-width:100%;

}

 

h3{

       margin:0 0 1em 0;

}
所以，如果我们在这里切换回浏览器并刷新，你可以看到间距只是略有不同，但是，当我们进入桌面网站布局时，这一点也会更加明显。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/page-style/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/page-style/