Html5 Web page content layout examples(div + css)

Generally speaking, the composition of a web page is mainly divided into three parts, namely: head, middle, and foot. The head and foot should be written in separate files; because they are public files on the one hand, and they are included by many front-end pages; on the other hand, their contents are all the same. Write them in a separate file, you only need to modify them once when you modify them, all pages including them are modified. Otherwise, each page will be rewritten with the same content. On the one hand, it is very troublesome to modify, every page must be modified. The head, middle, and foot are the three major components of the webpage as well as the three layout sections of webpage, of which the central section is the main one.

In the web design process, the header file mainly contains the logo, website name, website navigation menu, promotional theme pictures, etc., and can also contain login links, contact information, shopping information, and so on. The main part of webpage-the middle part, is used to place the main content, which varies from page to page. For example: the middle part of website homepage places some content that highlights the theme of website, such as product classification, product image and text list, characteristic product introduction, and product-related knowledge information, company profile, qualification honor, etc. The foot document mainly indicates the copyright, layout address, contact information, terms of service, disclaimer, etc.

Web page content layout examples(Html5 page layout examples)

Currently, web page layout mainly uses html5, namely div + css; div stands for html language and is mainly used for web page layout; css is the abbreviation of cascading style sheets, used to decorate the html elements, and it has been developed to 3.0. The general structure of web page layout is as follows:

<div class="page">
       <!--Page header-->
       <div class="header">
              <div class="logo_line"><img src="logo path" alt="logo" /></div>
              <ul class="navigate_menu"><li>Homepage</li><li>Product Center</li></ul>
       </div>
       <!--Main content of the page-->
       <div class="content">
              <div class="content_one_line">
                      <div class="product_class">
                             <h3 class="product_class_title">Product category title</h3>
                             <ul class="product_class_list"><li>Product category List</li></ul>
                      </div>
                      <div class="product_new">
                             <h3 class="product_new_title">New product title</h3>
                             <ul class="product_new_list">
                                          <li>
                                                 <img src="Product Url" alt="Product name" />
                                                 <span><a href="Product Url" target="_blank">Product name</a></span>
                                          </li>
                             </ul>
                      </div>
                      <div class="news">
                             <h3 class="news_title">Headlines</h3>
                             <ul class="news_list">
                                          <li><a href="News url" target="_blank">News list</a></li>
                             </ul>
                      </div>
              </div>
              <div class="product_list">
                      <h3 class="product_list_title">Product list title</h3>
                      <ul class="product_list_all">
                             <li>
                                          <img src="Product Url" alt="Product name" />
                                          <span><a href="Product Url" target="_blank">Product name</a></span>
                             </li>
                      </ul>
              </div>
       </div>
       <!--Page Footer-->
       <div class="footer">
              <div class="coperight">Copyright Information</div>
              <div class="contact"><span>Address</span><span>Phone</span><span>Email</span></div>
       </div >
</div>

Although the above code is only the approximate layout structure of web page, it has revealed the basic method of web page layout. As long as it is slightly extended, it can be made into a page like the homepage of website. The extension method can follow the above layout method.