asp.net basic Learning Pre-end Page Layout _ Practical Tips

Front end is to give people look at the interface, backstage staff not only to know the background code, but also to know the layout of the front end. Sometimes it's more than the front end people know, because it's possible that the front end is a 21-day master of Photoshop. At this point you can write your own front end.

1.CSS
css (cascading Style
Sheet), a cascading style sheet, is a markup language used to control the style of a Web page and allow the separation of style information from the content of the Web page. As far as grammar is concerned,
CSS is an easy language to learn。 Its "syntax" consists of only a few concepts, making it fairly easy to get started. The difficulty with CSS is the way all major browsers render the page. Although virtually every browser can understand CSS, they have their own quirks when displaying pages according to CSS standards.
The CSS prescribes two types ofDefining StylesMethods, respectively, are inline type and cascade type.
• Directly place style control within a single HTML element, called inline or inline style. This style controls the appearance of each element by using the style property, but it's very tedious. It is rarely used unless there are fewer elements with the same style.
A style defined or imported in the Head section of a Web page, called a cascading style. This style enables you to detach the structure and performance of the Web page so that when you modify the style of some elements, you only need to modify the style defined or introduced in the Head section, where all elements with the same style will automatically apply the new style.
• Cascading StyleIt can be divided into two ways: inline and link-type.
• CSS styles directly implemented in the head section, calledInline Type。 This CSS is generally located in the head of the HTML file, which is inside the tag and ends.
The use of inline is more convenient than inline, the body of the code is relatively concise, modify the style of an element only need to modify the head within the code can be.
• CSS styles are implemented in the head section by importing files with a. css extension namedLINK Type。 By using this method, you can invoke a defined style sheet in a Web page to implement the application of the stylesheet, which is usually stored separately as a file in the site directory. This approach enables a complete separation of the structure and performance of the Web page, which is best suited to the CSS style definitions of large web sites.
• If an element references both a style defined in a linked style file, a new style is defined in the Head section, or a new style is defined within an element through the style property, what is the effect of the markup element's eventual rendering? This is the conflict in style nesting, and the way the browser solves this problem is if you find a style conflict, the "use the nearest" principle, and the not-conflicting style is displayed by the sequential combination of the resulting style.
• Typically, in a style sheet (. css) file, you define styles that fit the common style of most Web pages, with inline definitions within a page that uniquely define the style of the page.
• Attributes are part of an element and can be modified by a stylesheet. The CSS specification defines a long list of attributes, but not all items are used in most Web sites.
Here are a few different ways to set up:

HTML tags, "id" corresponding to "#", "class" corresponding to ".". ID is unique, cannot have the same value on the same page, class does not have this constraint. Such as:

Css
H1{...}
#div1 {...}
Reference, you can id= "Div1" by using the ID attribute declaration
. div2{...}
Reference, you can class= "Div2" Using the class attribute declaration

Association selector:
• An association selector is a string consisting of two or more single tag selectors separated by a space. The general format is as follows: Selector 1 Selector 2 ... {properties: value; ...}
• These selectors have hierarchical relationships, and their precedence is larger than a single tag selector. For example: P h2{color:red}
• This definition works only on the H2 elements that are contained by P elements, and the style cannot be applied by either a separate p or a separate H2 element.

Parallel selector
• If there are multiple different elements defined with the same style, you can use a side-by-side selector to simplify the definition. Example: h1,h2,h3{Color:blue}
• Each element is separated by commas, indicating that all the contents of the H1, H2, H3 tags are displayed in a blue style.

Pseudo class:
• Pseudo class is a very special class in CSS, it can be automatically recognized by browsers that support CSS. Pseudo-classes can specify that <a> elements in XHTML display links in different ways, visited links (visited
Links) and an active link (active links). Even different font sizes and styles.
CSS uses 4 pseudo classes to define the style of the links, respectively: 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;}

2. Page layout:

Div and CSS Layouts
1. Page Horizontal Center
The way to center the page horizontally is to set the value of the Text-align property to center in the body's style style. If you also want the width of the page to be fixed, you can do so by setting a div's Width property.

2. Page Full width display
the way to set the page full width is to set the div's fixed width to a percentage

3. Page elements
Positioning page element positioning is divided into flow layout and coordinate positioning layout, of which, the coordinate positioning layout is divided into absolute positioning and relative positioning, here only to introduce flow layout and coordinate absolute positioning
If this layout is used, the elements in the page are displayed in order from left to right, top to bottom, and the elements cannot overlap. If you do not set the positioning of an element, the default is a streaming layout.
Before using coordinate absolute positioning, you must set the Position property of the style element to absolute, and then you can determine the absolute position of the element in the page by the left, top, right, bottom, and Z-index properties of the style element. The Left property represents the x-coordinate of the element, the top property represents the y-coordinate of the element, and the coordinates are based on its closest parent container with the position attribute.
4. Table layout
coordinate positioning layout is divided into absolute positioning and relative positioning, here only the spread of the use of the table can be the content of the Web page reasonably placed in the corresponding region, each area without interference.
5. Box model
Since the launch of the CSS1 in 1996, the consortium has recommended that all objects on the Web page be placed in a box, and that designers can control the properties of the box by creating a definition that includes paragraphs, lists, titles, pictures, and layers. The box model mainly defines 4 areas: content, Border distance (padding), Boundary (border), and margin (margin),
6. Positioning of the layer
Float float properties are a very important attribute in Div and CSS layouts. Most of the div layouts are implemented by float control. The specific parameters are as follows.
Float:none is used to set whether floating
Float:left used to indicate that an object floats to the left
Float:right used to indicate that an object floats to the right

3. Theme

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

--------------------------------------------------------------------------------

4. master Page

What is a master page:
• A master page is a template for setting the appearance of a page, a special asp.net Web page file, and also features other asp.net files, such as adding controls, setting styles, and so on, except that its extension is. master.
• References to master pages. The ASPX page is called the content page, and in the content page, the editable area reserved by the ContentPlaceHolder control of the master page is automatically replaced with the content control, and the other markup that is defined in the master page automatically appears when the master page is referenced. Content page.
• When you create a new Web site, you always add a master page that is the basis for all other pages. Even if there are only a few pages in the site, the master page can still help ensure that the entire site has a consistent look.
• In a way, the master page looks like a normal ASPX page. The method of creating a master page is also very similar to creating a generic page, except that the master page cannot be viewed separately in the browser and must be created by creating a content page.

To Create a master page:
• This placeholder is automatically added whenever a new master page is created, and it can be used in a content page to add content between pages that are unique to the page, such as CSS (including inline style sheets and external style sheets) and JavaScript.
• ContentPlaceHolder in master pages if you have content, you can be the default new item for content pages, which can be overridden or not overridden when you create a new page based on that master page.

Nesting master Pages

• Master pages can also be nested. A nested master page is a master page that is based on another master page. Content pages can be based on nested master pages. Nested master pages are useful if you have a Web site with a target that still needs to share the same appearance for different regions.
• The creation of a nested master page is simple: When you add a master page, the Select master page check box is selected, just as the Add Content page is described later. Then, add the control to the control where you want to rewrite it in the content page.

Create a content page
• Master pages do not have any use if they do not have a content page. In order to base a content page on a master page, you typically specify a master page when you add a new page to the site, so you 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 instruction of the page.
• Content pages can contain only controls that map to controls in the master page. These controls can also contain standard tags, such as HTML elements and server control declarations

To access a member of a master page in a content page

• You can programmatically access members of a master page in a content page, including any public properties or methods on the master page, and any controls. To implement a content page that accesses a property or method that is defined in a master page, the property or method must be declared as public, or it can be accessed dynamically on the master page.

Here's an example of using a master page to create a content page:
• Master pages include one or more <asp:contentplaceholder id= "Testcontentplaceholder"
runat= the "server"/> Control, where you can define what to replace in the content page.

• Content pages to create content by adding and mapping these controls to ContentPlaceHolder controls on the master page.

Add New Item >> master Page >>

Masterpage.master

<form id= "Form1" runat= "Server" >
  <div id= "main" >
  <div id= "Head" >
   
 
 

Rewrite the previous style:

Content page:
Add New Item >>web form
Tick master page:

Select the master page you just made:
To rewrite the contents of a master page in the middle of code:

<asp:content id= "Content1" contentplaceholderid= "Testcontentplaceholder" runat= "Server" >

</asp: content>

<asp:content id= "Content1" contentplaceholderid= "Testcontentplaceholder" runat= "Server" >

 <div style= "width:100% height:100% background-color: #666666" > <div style=
  "margin:10px 0 0 10px" >