HTML+CSS编写静态网站-18 开发手机网站

这节课，我们将首先构建我们移动版本的网站。这可能看起来有点不合理，但现在做网站基本上从一开始就必须考虑到移动设备。有两个原因。首先，建立一个手机网站要加容易，因为它简单得多。你不必担心复杂的功能，比如广告以及复杂的布局等。然后，当您从手机平台移动到更强大的平台（如平板电脑和桌面）时，您可以逐步增强您的网站。这比从一开始就在在桌面上创建一个非常复杂的网站更容易。 其次是因为移动平台非常重要，我们知道，移动网络不是一个小平台。事实上，现在，大家在手机上花的时间要远远多于电脑。 因此，我们必须从一开始就为移动平台而设计，然后再考虑桌面平台。 现在，让我们跳回到代码中，让我们删除包装器上的橙色背景，因为我们实际上不需要它。这只是为了把讲解点讲解清楚：

#wrapper{
max-width:940px;margin:0 auto;background:orange;padding:0 5%}

接下来，我们来为网页的标题进行样式改造。为了做到这一点，我们需要切换到我们的HTML，在这个header元素的内部，因为我们的标题被包含在header中，所以，我们在anchor元素中键入ID，我们将其称为logo。我们保存，然后回到我们的CSS中:

<header>
<a href = "index.html" id="logo">
<h1>I Love www.oxox.work</h1><h2>Easy and happy to learn</h2></a>

在我们的wrapper之后。我们创建ID选择器，使用井号，然后是logo选择器，然后在选择器内部，我做一些声明。首先我使用属性：text-align，它的值为center。然后我将margin设置为0：

#logo {       text-align:center;       margin::0;}

现在让我们解释一下这段声明的意思。text-align属性用于对齐文本，因此就像在word中，我们可以将文本对齐到左边，右边或中心。我想让我的文本居中，所以我们把它赋值为center。 接下来，我在这里的margin值为0。我不想让这个元素在存在边距，所以，它将应用于我们的元素的所有的上下左右四边。现在，保存文件，切换到我们的浏览器，你会看到，首先，橙色背景已被删除，其次，我们的标题元素已在页面中间。 更多精彩内容尽在视频中！