Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > WebMatrix Advanced Tutorial (3): How to implement a certain style

WebMatrix Advanced Tutorial (3): How to implement a certain style

黄舟
Release： 2016-12-26 16:25:27
Original
1314 people have browsed it

Csdn.NET will soon release an advanced tutorial on Microsoft's new Web development tool WebMatrix to help developers understand this, which is known as the most powerful Web development tool in Microsoft's history. Following the last post on how to install and use Microsoft's new development tool WebMatrix and teaching you how to use WebMatrix to create your first web page. This issue will continue to introduce you to the following tutorials.

Introduction: Microsoft WebMatrix is ​​a free tool that can be used to create, customize, and publish websites on the Internet.

WebMatrix enables you to create websites easily. You can start with an open source application (such as WordPress, Joomla, DotNetNuke or Orchard) and WebMatrix handles the task of downloading, installing and configuring the application for you. Or you can write the code yourself using the many built-in templates that will help you get started quickly. Whatever you choose, WebMatrix provides everything your website needs to run, including web servers, databases, and frameworks. By using the same stack on your development desktop that you would use on your web host, the process of bringing your website online is easy and smooth.

You can download it from http://web.ms/webmatrix.

Now you can learn to use WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, databases, and how to write simple web applications in just a few hours. It reads:

In Part 2, you saw how to use WebMatrix to create a very simple web page, and how this page ran in a number of different browsers. In this section, you'll learn how to change the visual style of a web page using Cascading Style Sheets (CSS) technology.
Here is a simple list of movies you can build into your web page:

WebMatrix Advanced Tutorial (3): How to implement a certain style

Prepare to style your web page using cascading style sheets

In the next few days In this step, you will see more HTML tags that can be used to implement functions such as hyperlinks, web page sections, and script tags. You will also learn how to use cascading style sheets (CSS) to edit this web page and set its appearance. Finally, layouts will be used to get the same content between this page and other pages on the site, making it easier to edit the same content.

Using Separators

In HTML, you can use the

tag to logically divide a web page into pieces. This is especially useful when you look at styles later in this article, where you can specify the style of a certain part of a web page by setting the corresponding div.

Here is the HTML for your page in the first part: 

<!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>
Copy after login

The first thing to do is wrap the list containing the movies into it's own

as follows Show 

<!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>
Copy after login

You can now see that the

  1. list containing the movies is now contained within a
    tag. If you look at the page now, you'll see that it's not much different than before. This is because the
    tag is a logical separator. It has no physical appearance.

    Using Hyperlinks

    You may already be familiar with hyperlinks – clickable areas on one page that link to another page. Although these areas are called hyperlinks, in HTML they were originally called anchor tags, so you use the tag whenever you wish to create a hyperlink.

    (or positioning) tag makes the content between and clickable. When a user clicks on this content, the browser will redirect to a HREF (hyperreference) indicated using the href attribute in the tag.

    Attributes are defined on the tag itself, rather than within the tag, similar to:

    content

    So, to create a hyperlink, you would use syntax like this:

    Click Here

    The href doesn't have to be a website like the one above, it can be a JavaScript function that performs an operation used by programmers. A special href can be used as a placeholder during development so that you can test whether the style of the hyperlink works. To do this, use the "#" character as href.

    So, in order to convert all

  2. items containing movies into hyperlinks, we wrap the movie's text in an tag, setting the HREF to #, similar to the following: 

    <!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>
    Copy after login

    If you run the web page, you will see that the elements on the list will use the familiar hyperlink style, also known as a blue underline:

    WebMatrix Advanced Tutorial (3): How to implement a certain style

    Add header and footer

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

    和