HTML+CSS编写静态网站-26 创建画册样式

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

到目前为止，我们已经编写了HTML，重构了CSS，添加了基础样式，比如，一些颜色和排版。这些所有的操作都是为了制作手机网站。这节课，让我们来构建我们的画册。

首先，我们来重新查看我们的index.html，我们的画册现在是由无序列表构建的。这里，我们有ul无序列表容器，其中有li列表项。每个列表项由一个链接组成，在链接内部是一个图像及它对应的描述。

在我们的页面上有多个无序列表，所以，现在，让我们为这个列表添加一个ID，以便我们在css中可以识别这个列表。我把id设为gallery。也就是画册的意思：

 
 
                     <ul id="gallery">

<li>

<a href="img/numbers-01.jpg">
现在，让我们在保存html文件，然后跳转到我们的CSS，让我们开始为我们的画册创建样式。

这个画册将在我们的手机网站上占据两列。后面的课程中，当我们创建桌面网站时，我们会将它扩展为三列。

所以，首先我们需要在我们的网站上添加一些特殊的样式。因为你看，我把Chrome缩小到只有手机一样的宽度，这里的文本都没有问题，但是我们的图像实在是太大了。所以，我们现在就来修改它。

为了修复我们的图片，我们将在CSS的GENERAL部分给他们最大宽度为100％。所以，我们来到GENERAL部分的a标签下面，输入img，max-width:100％，实际上，这是一个全局的图像宽度设置：

 
 
a {

text-decoration : none;

}

 

img{

       max-width: 100%;

}
实际上，这个最大100％的宽度指的是图像对应的父容器所能填充的最大宽度。如果容器尺寸缩小，那么图像也将随之缩小。如果没有这个设置，图像可能会超过它们父容器100%的宽度，就像我们之前的这样。

现在，我们保存，然后打开index.html：

你看这里图像的宽度，就根据它的父容器body的变化而变化了。

接下来，让我们对图库进行风格设计。我要创建一个新的CSS部分称为PAGE VEDIO。这样我们就知道在这个注释下面的样式是用于VEDIO页面，并不会被其他页面使用。

所以，我要复制我们的多行注释，然后，在COLORS的注释上方，粘贴，我把这个页面叫做PAGE VEDIO：

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

PAGE VEDIO

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

 

 

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

COLORS

************************************** */
现在，我们将选择gallery元素并应用一些样式。因此，我们将使用id选择器，margin设置为零。padding设置为零。并将list-style设置为none：

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

PAGE VEDIO

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

#gallery{

       margin:0;

       padding:0;

       list-style:none;

}
这里的新属性是list-style。这里我们将其设置为none，这就会删除列表中任何种类的项目符号。

现在，我们来对列表项应用样式。我们希望将列表项分为两列。

所以，我要选择gallery，然后选择gallery里面的li。往左浮动。我们将它的宽度为45％，边距为2.5％，背景颜色为f5f5f5，最后颜色为bdc3c7：

 
 
#gallery{

margin:0;

padding:0;

list-style:none;

}

 

#gallery li{

       float:left;

       width:45%;

       margin:2.5%;

       background-color:#f5f5f5;

       color:#bdc3c7;

}
我们先看下效果，保存，然后刷新页面：

你看，现在的画册形成了两列的布局。而且，如果我们拉宽页面，效果也非常好。

那么首先，这里的float是一个很重要的属性，它是一个允许我们以特殊方式定位元素的属性。如果没有这个浮动属性，那么这里的画册就只会显示一列，它不是浮动的。

接着，我把它们的宽度设置为45％。也就是说，无论浏览器窗口的大小是在桌面设备还是手机上的大小，每个图片只占用其父容器的总宽度的45％。所以，你看，无论浏览器窗口如何缩放，这些图像只占据45％的宽度。这里我们有2个45，总宽度为100，那么。余数为10.这意味着我们将有两个图像并排浮动，而且有10％的额外空间，我们可以把这10%用来创建我们的图像之间的空间。为了创建这个空间，我已经使用margin属性，并将其设置为2.5％。因此，如果我们回到浏览器窗口，您可以看到每个图像在它们的2边都有2.5％的边距，刚好4边*2.5%，也就是10%。这将填补额外的10％的空间。

最后，我将背景颜色设置为中灰色。如果你看我们的网站，你会发现列表项文本的后面都是灰色。最后，我在这里设置我们的文本的颜色为灰色。这在网站上不会显示出来，除非这里的C++，Github不是以链接的形式出现。

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

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

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