登录  /  注册
首页 > web前端 > css教程 > 正文

WebMatrix进阶教程(3):如何实现某种样式

黄舟
发布: 2016-12-26 16:25:27
原创
1150人浏览过

csdn.net近期将发布微软全新web开发工具webmatrix的进阶教程,帮助开发人员人士认识这一号称微软史上最强的web开发工具。继上次发布的如何安装和使用微软全新开发工具webmatrix 和 教您如何使用webmatrix创建第一个网页 后。本期将继续为您介绍接下来的教程。

导读:Microsoft WebMatrix是一个免费的工具,可用于创建、自定义和在Internet上发布网站。

WebMatrix使您能够轻松创建网站。您可以从一个开源应用程序(比如WordPress、Joomla、 DotNetNuke或Orchard)开始,WebMatrix会为您处理下载、安装和配置这些应用程序的任务。或者您可以使用许多内置的模板自行编写代码,这些模板有助于您迅速上手。无论您做何选择,WebMatrix都提供了您的网站运行所需的一切内容,包括Web服务器、数据库和框架。通过在您的开发桌面使用与您将在Web主机上使用的相同堆栈,将网站上线的过程变得既轻松又顺利。

您可以从http://web.ms/webmatrix下载它。

现在您只需花几个小时便可学会使用WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、数据库等知识以及如何编写简单的Web应用程序。内容如下:

在第2部分,您看到了如何使用WebMatrix创建非常简单的网页,以及此页面如何在多种不同浏览器中运行。在这一部分中,您将了解如何更改网页的视觉样式,使用级联样式表(CSS)技术。
这里是您在网页上内置的简单电影列表:

320.png

使用级联样式表准备设置网页样式

在接下来的几步中,您将看到更多的HTML标记,它们可用于实现超链接、网页分区和脚本标记等功能,您还将了解如何使用级联样式表(CSS) 编辑此网页,设置它的外观。最后将使用布局获取此网页和网站上其他网页之间相同的内容,这样可以更轻松地编辑相同内容。

使用分隔线

在HTML中,可以使用

标记以逻辑方式将网页划分为几块。这在您在本文后面查看样式时尤其有用,您可以通过设置相应的div来指定网页某个部分的样式。

这里是第一部分中您的网页的HTML:

<!DOCTYPE html>  
   
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <title>My Favorite Movies</title>  
    </head>  
    <body>  
    <h1>A list of my Favorite Movies</h1>  
       <ol>  
            <li>Its a wonderful life</li>  
            <li>Lord of the Rings</li>  
            <li>The Fourth World</li>  
            <li>The Lion King</li>  
       </ol>  
    </body>  
</html>
登录后复制

要做的第一件事是将包含电影的列表包装到它自己的

中,如下所示

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
  <ul>  
    <li>Its a wonderful life</li>  
    <li>Lord of the Rings</li>  
    <li>The Fourth World</li>  
    <li>The Lion King</li>  
  </ul>  
</div>  
</body>  
</html>
登录后复制

现在可以看到,包含电影的

  1. 列表现在包含在
    标记中。如果现在查看该网页,会发现与之前没什么不同。这是因为
    标记是一个逻辑分隔线。它没有任何物理外观。

    使用超链接

    您可能已经熟悉超链接–一个页面上链接到另一个页面的可单击区域。尽管这些区域称为超链接,但在HTML中它们最初称为定位标记(anchor),因此只要您希望创建超链接,就可以使用标记。

    (或定位)标记使之间的内容可以单击。当用户单击此内容时,浏览器将重定向到标记中使用href属性指示的一个HREF(超引用)。

    属性在标记本身上定义,而不是在标记内定义,类似于:

    content

    因此,要创建超链接,您可以使用这样的语法:

    Click Here

    href不必是一个像上面这样的网站,也可以是一个执行编程人员所使用的操作的JavaScript函数。一种特殊的href可在开发期间用作占位符,这样您可以测试超链接的样式是否有效。为此,使用“#”字符作为href。

    所以,为了将所有包含电影的

  2. 项转换为超链接,我们将电影的文本包装在标记中,将HREF设置为#,类似于以下形式:

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
      <meta charset="utf-8" />  
      <title>My Favorite Movies</title>  
    </head>  
    <body>  
      <h1>A list of my Favorite Movies</h1>  
      <div id="movieslist">  
        <ol>  
          <li><a href="#">Its a wonderful life</a></li>  
          <li><a href="#">Lord of the Rings</a></li>  
          <li><a href="#">The Fourth World</a></li>  
          <li><a href="#">The Lion King</a></li>  
      </ol>  
      </div>  
    </html>
    登录后复制

    如果运行网页,您将看到列表上的元素将使用熟悉的超链接样式,也就是所谓的蓝色下划线:

    321.png

    添加页眉和页脚

    将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新