Getting started with front-end production

Original link: http://caibaojian.com/frontend-base.html

Getting started with front-end productionA-A+ Front-end Blogs2015-08-18• Front-end development CSS | front-end Basics •2020View1 Article Directory

• I. Noun interpretation
• Two. Formatting of text
• Three. Form form
• Four. Formatting of text
• Five. CSS layout
• Six. HTML5 Video audio
• Seven. Some agreements
• Eight. Namespaces
• Nine. Basic Setup-public.css
• 10. Frame Settings

From Baidu Library: Web front-End Learning Summary (essence version), which speaks a lot of knowledge, is very suitable for just into the front of the children's shoes, even if some basic will also benefit from, through this article, you will understand the production of those elements of interpretation, naming, layout,CSS Reset, Choose a range of front-end basics such as frames and settings. Learn what I think good notes are key, usually encountered problems to record.

I. Noun interpretation

1. Crosscutting

The width of the fixed page (as rasterized) and the container with no restrictions on height is called a standard crosscutting

2. Stay White

Two space between the top, bottom, left, and right of a container or fragment

3. Inherited

Elements can get some properties or values that can be used for themselves from their parent elements.

4. Image positioning

Place the picture element in a static, relative, absolute, or fixed position, using CSS to mask the image, and use it for the decorations in the page.

5. Bottom chart

Background map used in labels on the page

6. Zidi (graph) line

A line or diagram used to distinguish between a crosscutting or a fragment end.

7. Page structure

The underlying framework of the page, consisting of crosscutting, layout elements

8. Focus area (figure)

Areas of greatest attention

9. Navigation

A set of links in a page that has a guiding nature

10. Head Chart

Page Theme Pictures

11. Spacing

The distance between fragments or text

12. Row height

The distance between rows and lines in a text paragraph

13. First Line Indent

Indent the first line of a text paragraph

14. Floating

Detach the defined area from the normal page document flow

15. Fragments

A content area composed of text and pictures

16. Banner ads

Ad area with width of page content area

17. Function button

Buttons with interactive properties

18. Private style

The current page is used independently of the style, not the common

19. Horizontal (vertical) Center

An element in the page is at the same distance from the top or left of the parent

20. Standard Head (tail)

Define the same page header or tail element collection

Two. Formatting of text

1. Paragraph: P
2. Italic: Address (Contact information) em (accent) I (highlight different) cite (citation) DFN (first definition term)
3. Bold: Strong (important) B (reminder)
4. Picture block: Figure
5. Quote paragraph, paragraph indent: blockquote
6. Background color: Mark
7. Dashed underline: abbr
8. Superscript subscript: Sub/sup
9. Underline: INS
10. Strikethrough: Del (Mark deleted content) s (Mark inaccurate content)
11. Equal width font: code
12. Preformatted: Pre
13. Font size decrease, table comment: Small
14. Time:
15. Line break: BR
16. HTML5 definition Block: Header Nav article section aside Footer Div span

Three. Form form

1. <form method= "POST" action= "show. PHP "enctype=" Multipart/form-data ">...</form>
2. The organization of form elements:<fieldset>...</fieldset><fieldset>...</fieldset>
3. Create various boxes: <input type= "text" id= "name" name= "name" class= "Zky" required= "required" placeholder= "Please enter" value= "http://" autofocus= "Autofocus" size= "maxlength=" "pattern="/>

Note: Text→password/url/tel/email

Id: To make the corresponding tag recognition, add CSS

Name: For server and script recognition, usually with ID set to the same

Size: Text Box sizes

Maxlength: Maximum number of characters that can be entered

Pattern: Regular Expression

4. Add tag: <label for= "Idname" >...</label>
5. Single (multiple) Select button:

<input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" /><label for="aaa">北京</label><input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" /><label for="bbb">上海</label>注：id各自唯一，name必须相同。checked：默认选择

6. Drop-down box:

<select id="zky" name="zky" size="12" multiple="multiple"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="chengdu">成都</option></select>

Note: size: Select box height multiple: Allow multi-Select selected: Default selection with <optgroup label= "Tohoku" >...</label> Group selection box

7. Upload file: <input type= "file" id= "Zky" name= "Zky" size= "5"/>

Note: Size: Enter the width of the field for the path and file name

8. Disable form elements: <input ...disabled>
9. Create Submit button: <input type= "Submit" value= "point this submission"/>

Create a Submit button with an image: <button type= "image" > click here </button>

Create image button: <input type= "image" alt= "Submit" src= "1.jpg" alt= "frontend production Getting Started"/>

Submit→reset Reset

10. Text area: <textarea name= "Zky" maxlength= "5" rows= "5" > Please enter character here </textarea>
11. Form:

<table><caption></caption><thead><tr><th scope="rowgroup">..</th><th scope="col">..</th></tr></thead><tbody><tr><th scope="row">..</th><td rowspan="3">..</td><td>..</td></tr></tbody></table>

Four. Formatting of text

1. {font: (italic bold small capital letter) font size (must have) leading font set (must have);}
2. Text background: {background: #foc URL (1.jpg) repeat-x scroll 0 0;}
3. Word spacing: word-spacing:12px;
4. Kerning: letter-spacing:12px;
5. Indent Increase: text-indent:12px;
6. Small caps: font-variant:small-caps;
7. Text alignment: Text-align:left; for Block,inline-block
8. Word Case: text-transform:capitalize (word First Capital)/uppercase (uppercase)/lowercase (lowercase)
9. Lines on text: Text-decoraion:underline/overline/line-through;
10. Spaces: White-space:pre (Show all spaces Enter)/nowrap (non-breaking spaces);
11. h3-16px; h5-12px; Verdana,geneva,sans-serif;
12. List properties: Li{list-style:url (1.jpg) inside Square;}

Five. CSS layout

1. Width: Excludes padding,border,margin;max-width setting peripheral limits;
2. Floating: Float:left; Clear float: clear:both;
3. Set border: border:dotted 4px red; (dotted dotted, dashed dashed, solid solid line)
4. Align the elements: Vertical-align:baseline/middle/text-bottom.
5. Display: Display:black/inline/inline-block;
6. Display: Visibility:visible/hiddle;
7. Relative positioning: {position:relative; top:5px;} relative to the original position of the element
8. Absolute positioning: {position:absolute; top:5px;} relative to the body or the ancestor element closest to his position
9. Three-dimensional position: {z-index:50;} The bigger the top
10. Vendor prefix:-webkit-(Safari) –moz-(Firefox) –ms-(IE) –o-(opera)
11. To create a fillet:

{-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;} (左上角,角的半径是50px){border-radius:50px;}(所有角简写)

12. Create ellipse corner: {... border-radius:40px/20px;} (x radius/y radius)
13. Create a circle: {... border-radius:50px;} 50px is the element radius size
14. Text shaded: {text-shadow:2px 5px 5px #999;} x/y/Blur Radius
15. Element plus Shadow: {(-moz-/-webkit-) Box-shadow: (Inset inner shadow) 2px 5px 5px #999; 5px 10px 2px #555 (multiple Shadows);}
16. Multiple backgrounds: {background: #000 URL (1.png) 50% 102% no-repeat, #222 url (2.png) 12px-150px repeat-x;}
17. Transparency: {opacity:.5;} 0→1 transparent → opaque
18. Gradient background: {background:linear-gradient (left, #000, #999);} (Left: the angle at which the gradient line moves counterclockwise to the horizon)

Six. HTML5 Video audio

1. HTML5 supports 3 kinds of videos:. ogg/.ogv. mp4/.m4v. WEBM
2. Add Video: <video src= "1.WEBM" ></video>

Video properties: src AutoPlay controls muted loop poster width height preload

3. Add multiple sources to your video:

<video controls="controls"><source src="1.mp4" type="video/mp4"><source src="1.webm" type="video/webm"><object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true"><param name="movie" value="1.swf?videourl=1.mp4&control=true"></object>  //嵌入Flash动画<a href="1.mp4">下载该视频</a></video>

4. HTML5 supports 5 audio:. ogg. mp3. wav. AAC mp4

5. Add Audio: <audio src= "1.ogg" ></audio>

Audio properties: src AutoPlay controls muted loop preload. Multiple sources with video.

Seven. Some agreements

We combine some commonly used naming habits, and then combine the practical application of CSS to sort out some good naming habits.

1. The first letter of the style name is in lowercase letters and cannot be numbers, underscores and special characters;
2. Style names are as semantic or abbreviated as possible;
3. When a style name needs to be spelled together, it is spelled in all lowercase and connected with an underscore, i.e.: all_keyword;
4. Use PX (pixels) as the basic unit of measurement;
5. The use of hollow grid: Full-width: Chinese space half-width;
6. Project completion package, folder and file names are all lowercase letters, do not use Chinese file names;
7. Reduce the number of nested layers of div;
8. Add alt attribute to important picture, add title to important element and truncated element;
9. Use the correct annotation method (see the "Comments" section);
10. Special circumstances require performance and content separation, the code does not involve any expression of elements, such as: style, font, etc.;
11. Double sign to have the beginning and end of the label, the label must be added after the "/", for example: <br/>, and have the right level;
12. Other special symbols:

1) < (<)

2) > (>)

Eight. Namespaces

8.1 Plug-in style name

1. Global: Public.css (the global style is public for the whole station, which is the basis for the page style and must be included in the page.) ）
2. Structure: layout.css (used when the page structure type is complex and common types are large.) Used in the home page and product category pages. ）
3. Private: Style.css (the style file used by the standalone page must be included in the page.) ）
4. Module MODULE.CSS (Product category page application, after the reusable class module is stripped, can be used in conjunction with other styles. ）
5. Default Default.css
6. Article Article.css
7. Picture Photo.css
8. Download Soft.css
9. Theme Themes.css (apply when you implement skin-changing functions.) ）
10. Patch MEND.CSS (privatized patching based on the above style.) ）

8.2 Common names

(1) Page structure

1. Container: Container
2. Page Header: Header
3. Content: Content/container/content (A)
4. Page body: Main
5. Page End: Footer
6. Navigation: Nav
7. Sidebar: Sidebar
8. Column: Column
9. Page perimeter control overall layout width: Wrapper
10. Middle: Left Right center
11. Floating left floating right: FL fr
12. Clear the Floating clear

(2) Navigation

1. Navigation: Nav
2. Main navigation: MAINBAV
3. Sub-navigation: Subnav
4. Top Navigation: Topnav
5. Side navigation: Sidebar
6. Left navigation: Leftsidebar
7. Right navigation: Rightsidebar
8. Menus: Menu
9. Sub-menu: submenu
10. Caption: Title
11. Abstract: Summary
12. Paths: Path

(3) Modular naming

1. Module Head: HD
2. Module Content section: BD
3. Module bottom: FT

(4) Each content page corresponds

1. Caption: Title
2. Subtitle: Subtitle
3. Attributes: Properties
4. Introduction: Infor
5. Contents: Content
6. Paging: Page
7. Insert AD: Insert_ad
8. Emoticons: expression
9. Features: Options
10. Context: Up_down
11. Comments: Comments
12. Related content: Related
13. : Download
14. Play Address: Play_add

(5) function

1. Logo: Logo
2. Ad: Banner
3. Login: Login
4. Login Strip: Loginbar
5. Registration: Regsiter
6. Searches: Search
7. Date: Date
8. Functional area: Shop
9. Caption: Title
10. Join: Joinus
11. State: Status
12. Button: BTN
13. Scrolling: Scroll
14. Tabs page: Tab
15. Article List: List
16. Hint Message: MSG
17. Present: Current
18. Tip: Tips
19. Icons: Icon
20. Note: note
21. Guide: Guild
22. Services: Service
23. Hotspot: Hot
24. Press: News
25. Download: Download
26. Vote: Vote
27. PARTNER: Partner
28. Links: Link
29. Copyrights: Copyright

Nine. Basic Setup-public.css

9.1 Global Settings

1. Up/down margin (margin, padding): 0 (px)
2. Left margin (margin): Auto (Auto)
3. Background (background): #FFF (White)
4. Font (font-family), font size (Font-szie), Word color (color): "Arial" 12px #666

Code:

/* 全局CSS定义 */body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体‘; }div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}ul,ol,li{list-style:none}table,td,input,textarea{font-size:12px}

9.2 Page Label Initialization settings

1. Common Basic Standard Div,form,ul,ol,li,span,p,dl,dt,dd,img

Set the spacing for the base label, and the default value for the border is 0.

2. H1~h6 Title

The default title inside the font size 12px, the inside and outside spacing is 0px, the text is not bold.

3. Ul,ol,li List

Bullets are not displayed by default.

4. H2 column Title

Description: H2 label is defined as column title Special use, in the label non-title text default to the right display, the main title text using the span tag contains, left display.

5. Default link color

Normal does not display the text underline, the color is gray (#333), when the mouse hovers: The display text underline, the color becomes the dull red (#ccc).

6. Status: a:link{} a:visited{Point} a:focus{Keyboard selected} a:hover{pointer rest} a:active{in point}

9.3 Page Width

Default page width (naming specification): by rasterization

9.4. Clear

Ends the floating properties of elements within the container so that adjacent container or element nodes are displayed properly.

Here are a few ways to clear the float

Method One

.clear {clear:both;height:0;font-size:0;line-height:0}

Or

.clear {border-top: 1px solid transparent !important;margin-top: -1px !important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;}

Or

.clear{clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0}

How to use: <div class= "Clear" ></div>

<div class= "Clear" ></div>

Method Two

.clear{zoom:1;}.clear:after {clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:" .";}

Or

.claer {height:auto;_height:200px;min-height:200px;verflow:auto;zoom:1;_overflow:visible;}

How to use:

Code from http://caibaojian.com/frontend-base.html<div class=""><ul class="clear"><li><a href="#">送水送气</a></li><li><a href="#">送花服务</a></li><li><a href="#">宾馆住宿</a></li><li><a href="#">家电维修</a></li><li><a href="#">餐饮电话</a></li><li><a href="#">电脑网络</a></li></ul></div>

9.5 Custom Properties

1. Text list: (style name)

For a text list, the zone is divided into two fonts (12px/14px), with the default line spacing up and down 3px.

2. Picture list: (style name)

For group fragment, default with Claar attribute, container img, span tag as block level element, and clear outer space of picture

3. Graphic mix: (style name)

Fragments using <div>, <p> distinguish between pictures and text, the default shape is left-hand image, and the picture and text spacing is 10px.

4. Text class: Bold (b), Arial font (. fontarial)

Handling Local applications

5. Floating: (FL/FR)

Used to build the page frame

6. Left White: (BLANK5/BLANK8)

Set the white height of the page to 5px, 8px two kinds

9.6 Full Code

/* Global CSS Definition */

body{text-align:center;margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体‘;}div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}……

Need an example to explain

10. Frame Settings

10.1 conventions

1. Cross-cutting structure style is area, all horizontal with ID, name: CONTENTA,CONTENTB
2. Structural elements Use div tags, which are nested in the tag to pay attention to hierarchical relationships, such as:

10.2 description

6.2.1 The column between the white

Define the middle column when the column is three, and define it from the second column when the multi-column is defined.

6.2.2 cross-cutting leaves white

White between the crosscutting, defined at the next cross, such as: margin‐top:10px

Original link: Front-end production of the knowledge of the copyright, when reproduced, please indicate the source, offenders must investigate.
Annotated source format: front-end Development blog (http://caibaojian.com/frontend-base.html)

Getting started with front-end production