Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to lay out the front-end pages in the asp.net foundation, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The front end is the interface for people to see, and the background staff should know not only the writing of the background code, but also the layout of the front end.

CSS (Cascading Style

Sheet), translated into cascading style sheets, is a markup language that controls the style of a web page and allows the separation of style information from the content of a web page. In terms of grammar

CSS is an easy language to learn. Its "grammar" consists of only a few concepts, making it quite easy to get started. The difficulty with CSS is the way all major browsers render pages. Although virtually every browser can understand CSS, they all have their own "quirks" when displaying pages according to the CSS standard.

CSS specifies two ways to define styles, inline and cascading.

Style control is placed directly within a single HTML element, called inline or inline style. This style controls the appearance of each element through the style attribute, which is intuitive but tedious. Unless there are fewer elements of the same style, they are rarely used.

Styles that are defined or imported in the head section of a web page are called cascading styles. This style can separate the structure and presentation of the web page, so that when you modify the style of some elements, you only need to modify the style defined or introduced by head, and all elements with the same style in the page will automatically apply the new style.

Cascading styles can be divided into two ways: embedded and linked.

The CSS style that is directly implemented in the head section is called embedded. This CSS is usually located in the header of the HTML file, that is, within the and tag, and ends with.

It is much more convenient to use embedded than inline, and the code in body is relatively concise. When you change the style of an element, you only need to modify the code in head.

In the head section, the CSS style is implemented by importing files with a .css extension, which is called chained. Using this method, we can call the defined stylesheet in the web page to realize the application of the stylesheet, and the defined stylesheet is usually stored in the site directory as a file. This method realizes the complete separation of web page structure and performance, and is most suitable for the CSS style definition of large websites.

If an element references a style defined in the linked style file, defines a new style in the head section, or defines a new style within the element through the style attribute, what will the markup element end up looking like? This is the conflict problem in style nesting. The way for browsers to solve this problem is to use the principle of "use nearby" once the style conflict is found, while the non-conflicting styles are displayed through sequential combination to form the final style.

In general, the style that is common to most web pages is defined in the style sheet (.css) file, and the page-specific style is defined embedded within the page.

An attribute is part of an element and can be modified through a style sheet. The CSS specification defines a long list of properties, but not all items are used in most Web sites.

Here are several different ways to set up:

CSS style H2 {color:red} # H2 {color:gray} CSS style .h2 {color:gray} CSS style / / can be referenced by direct insertion

Html tags, "id" corresponds to "#", "class" corresponds to "." .id is the only flag, can not have the same value in the same page, class does not have this constraint. Such as:

Css

H2 {.}

# div1 {.}

/ / when referencing, use the id attribute declaration to id= "div1"

.div2 {.}

/ / when referencing, use the class attribute declaration to class= "div2"

Association selector:

An associative selector is a string of two or more single tag selectors separated by spaces. The general format is as follows: selector 1 selector 2. {attribute: value;. }

These selectors are hierarchical and have a higher priority than a single tag selector. For example: PH3 {color:red}

This definition only works on the h3 elements contained in the p element, and the style cannot be applied to either p or h3 elements alone.

Juxtaposition selector

If there are many different elements that define the same style, you can use side-by-side selectors to simplify the definition. For example: h _ 2, h _ 3, h _ 4 {color:blue}

Each element is separated by a comma, indicating that the contents of all H2, h3, and h4 tags will be displayed in blue.

Pseudo class:

Pseudo-classes are very special classes in CSS and can be automatically recognized by browsers that support CSS. Pseudo-classes can specify that elements in XHTML display links (links) and visited links (visited) in different ways

Links) and activable link (active links). Even different font sizes and styles.

Four pseudo classes are used in CSS to define the style of the link, namely: a:link, a:visited, a:hover, and a:active, for example:

A:link {font-weight: bold; text-decoration: none; color: # C00000;} a:visited {font-weight: bold; text-decoration: none; color: # C30000;}

two。 Page layout:

DIV and CSS layout

1. Center the page horizontally

The way to center the page horizontally is to set the value of the text-align property to center in the style style of body. If you also want the width of the page to be fixed, you can do so by setting the width property of the div.

two。 Full width display of the page

The way to set the full width of the page is to set the fixed width of the div to a percentage.

3. Page element

The positioning of positioning page elements is divided into flow layout and coordinate positioning layout. Among them, coordinate positioning layout is divided into absolute positioning and relative positioning. Here, only flow layout and coordinate absolute positioning are introduced.

If you use this layout, the elements in the page will be displayed in the order from left to right and from top to bottom, and the elements cannot overlap. If you do not set the positioning of the element, the default is the streaming layout.

Before using coordinate absolute positioning, the position attribute of the style element must be set to absolute, and then the absolute position of the element in the page can be determined by the left, top, right, bottom, and z-index attributes of the style element. The left attribute represents the x-coordinate of the element, and the top attribute represents the y-coordinate of the element, whose location is referenced by its nearest parent container with the position attribute.

4. Table layout

Coordinate positioning layout is divided into absolute positioning and relative positioning, here only introduces the use of the flow table can reasonably place the content of the web page in the corresponding area, each region does not interfere with each other.

5. Box model

Since the introduction of CSS1 in 1996, the W3C organization has recommended that all the objects on a web page be placed in a box. Designers can control the properties of this box by creating definitions, including paragraphs, lists, headings, pictures, and layers. The box model mainly defines four areas: content (content), border distance (padding), boundary (border) and margin (margin).

6. Location of layer

The float floating property is a very important property in DIV and CSS layouts. Most DIV layouts are implemented through the control of float. The specific parameters are as follows.

Float:none is used to set whether to float or not

Float:left is used to indicate that the object floats to the left

Float:right is used to indicate that the object floats to the right

3. Theme

A theme is a collection of files that define the appearance of pages and controls. It usually contains a combination of skin files (extension .skin), cascading style sheet files (extension .css), pictures, and other resources, but a theme contains at least one skin file.

4. Master page

What is a master page:

Master page is a template used to set the appearance of the page, is a special ASP.NET web page file, and also has the functions of other ASP.NET files, such as adding controls, setting styles, etc., but its extension is .master.

An .aspx page that references a master page is called a content page, in which the editable area reserved by the ContentPlaceHolder control of the master page is automatically replaced with the Content control, as long as the content is populated in the Content control area, and other tags defined in the master page automatically appear in the content page that references the master page.

When you create a new Web site, always add the master page that serves as the basis for all other pages. Even if there are only a few pages in the site, master pages can still help ensure that the entire site has a consistent appearance.

In a way, the master page looks like a normal ASPX page. The method of creating a master page is also very similar to the method of creating a general page, except that the master page cannot be viewed separately in the browser and must be browsed by creating a content page.

Create a master page:

This placeholder is automatically added whenever a new master page is created, and can be used in the content page to add page-specific content between the page's tags, such as CSS (including embedded and external style sheets) and JavaScript.

If the ContentPlaceHolder in the master page has content, it can be used as the default new item of the content page. When you create a new page based on the master page, the content page can rewrite this part of the content or not.

Nested master page

Master pages can also be nested. A nested master page is a master page based on another master page. Content pages can be based on nested master pages. If you have a Web site that still needs to share the same appearance in different areas, it is useful to use nested master pages.

The creation of a nested master page is simple: select the Select Master Page check box when adding a master page, just like the add content page described later. Then, add the control to the control where you want to override it on the content page.

Create a content page

A master page is of no use if there is no content page to use it. To base a content page on a master page, you usually specify a master page when you add a new page to your site. To do this, simply select the Select Master Page check box at the bottom of the add New item dialog box. Of course, you can also set the MasterPageFile property directly in the @ Page directive on the page.

The content page can only contain controls that map to controls in the master page. These controls can in turn contain standard tags, such as HTML elements and server control declarations

Access members of the master page on the content page

In the content page, you can programmatically access members of the master page, including any public properties or methods and any controls on the master page. To enable a content page to access a property or method defined in the master page, the property or method must be declared as a public member (public), or it can be accessed dynamically.

Here is an example of using a master page to create a content page:

The master page includes one or more controls in which you can define the content to replace.

Content is created in the content page by adding Content controls and mapping them to ContentPlaceHolder controls on the master page.

Add New item > Master Page > >

MasterPage.master

Master page tests the part of the left navigation asp.net CSS HTML JQuery that can be overridden

Rewrite the previous style:

Content page:

Add New item > > web form

Check the master page:

Just select the master page:

Rewrite the contents of the master page in the middle of the code:

Here is another content page (AnotherTestPage.aspx) Master Page that gives you the ability to create a consistent look and behavior for all pages (or page groups) in a web application. Master Page provides templates for other pages with shared layouts and features. Master Page defines placeholders for content that can be overridden by content pages. The output is a combination of Master Page and content pages. The content page contains what you want to display. When a user requests a content page, ASP.NET merges the page to generate output, which merges the layout of the Master Page with the content of the content page.

On the basis of asp.net on how to layout front-end pages to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.