Home > Developer > Web Develop

Basic layout of front-end HTML documents

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The front-end part of the project is based on the work of the art, when the most important is to get a picture of the main part is the layout of the structure of the page, when the layout is completed after the front-end part of the majority, so according to the layout encountered in the project and some of the individual ideas will be a summary of the layout.
    The layout of the Web page is originally a table layout, which is the table layout, but the layout is said to be a multi-layered nesting performance problems, and the test I did not practice, so it has become the past, now the most layout way is the most mainstream layout is div+css layout. Of course, this kind of layout also has the problem, because cannot implement the semantic layout to make the SEO ineffective. With the publication of the HTML5 specification, the semantic layout becomes a more reasonable layout (personal opinion). So the layout based on the next summary is also based on the semantic layout of HTML5 and the DIV+CSS combination to meet the needs of the project.

The combination method mentioned above is to adopt the semantic layout on the body layout of the interface, adopt DIV+CSS in its interior, realize the whole semantics, the way of local box layout.

1234567891011121314151617181920212223242526272829303132 <!DOCTYPE html><html><head>    <title>文档的基本结构</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <link rel="stylesheet" type="text/css" href="css/normalize.css">    <link rel="stylesheet" type="text/css" href="css/base.css">    <script src="js/jquery-1.7.2.min.js"></script>    <script src="js/baseframe.js"></script>    <!--[if lt IE 9]>    <script src="js/html5shiv.js"></script>    <script src="js/json2.js"></script>    <![endif]--></head><body>    <div class="main">        <header class="grp_header"></header>        <nav class="grp_nav"></nav>        <section class="grp_section">            <aside class="grp_aside"></aside>            <article class="grp_article"></article>        </section>        <section class="grp_section">            <figure class="grp_figure">界面局部独立块使用</figure>            <article class="grp_article"></article>        </section>        <footer class="grp_footer clear"></footer>    </div></body></html></body></html>



Code Description:

0,normalize.css for CSS style reset, to solve the style of the default styles of various browsers,Base.css as a document style sheet file, can be understood as a common style, When you have a specific business, you can create new files again to save business styles, creating different business styles (personal insights) across different businesses. similarly to JS files, create a generic JS method file and create a business JS file (baseframe.js).

1, the layout code in order to be compatible with IE low version, has introduced the support HTML5 label the html5shiv.js file;

2, in order to support the low version of the Josn method, the introduction of the json2.js file;

3, in the body embedded in the main style, in order to achieve the overall document style adjustment, header represents the document header, header, nav means navigation is also a first-class menu, article represents the body of the document, aside represents the sidebar, section represents the document chunking, Footer represents the document footer.

4, wherein the article is divided into left and right layout, the left side is the aside, the side of the section, the floating layout, that is, float, left floating, the right side of the block formatting context, that is, BFC, the implementation will not cross, compatibility is not a problem. (Note: BFC Implementation method: Overflow:hidden;*zoom:1)




From for notes (Wiz)

Basic layout of front-end HTML documents

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html responsive layout html responsive layout layout of text basic html browser basic html coding tutorial basic html file basic html login
Related Article
Jwt+asp.net MVC timestamp prevents replay attacks

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More