Design Layout - Website Layout in CSS

Design Layout - Website Layout in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

 .header { 
  background-color: #e9d8f4; 
  color: #58257b; 
  text-align: center; 
  padding: 20px; 
 } 

 Thi?t k? Layout - B? c?c website trong CSS 
 

Navigation bar

Navigation Bar - Navigation Bar , also known as menu bar, helps navigate main items on the website.

 /* class thanh ?i?u h??ng */ 
 .topnav { 
  overflow: hidden; 
  background-color: #333; 
 } 
 
 /* link ?i?u h??ng */ 
 .topnav a { 
  float: left; 
  display: block; 
  color: #f2f2f2; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
 } 
 
 /* Thay ??i màu liên k?t khi di chu?t qua */ 
 .topnav a:hover { 
  background-color: #ddd; 
  color: black; 
 } 

Full code:

 Thi?t k? Layout - B? c?c website trong CSS 
 

Website TipsMake.com

  Làng Công ngh? 
  Công ngh? 
  Khoa h?c 
 

content

The layout in this section typically depends on the user object. The common layout is one or a combination of the following:

• 1 column: typically used for mobile browsers.
• 2 columns: often used for laptops and tablets.
• 3 columns: often used for desktop browsers.

You can create a 3-column layout and change it to a 1-column layout on a smaller screen like this:

 /* T?o ba c?t b?ng nhau, float c?nh nhau */ 
 .column { 
  float: left; 
  width: 33.33%; 
 } 
 
 /* Clear float khác sau các c?t */ 
 .row:after { 
  content: ""; 
  display: table; 
  clear: both; 
 } 
 
 /* B? c?c linh ho?t: ba c?t x?p ch?ng lên nhau thay vì c?nh nhau khi màn hình 
 có chi?u r?ng d??i 600px */ 
 @media screen and (max-width: 600px) { 
  .column { 
  width: 100%; 
  } 
 } 

Full code:

 Thi?t k? Layout - B? c?c website trong CSS 
 

Website TipsMake.com

  Làng Công ngh? 
  Công ngh? 
  Cu?c s?ng 
 

Technology Village

Stay up to date with the latest trends, discoveries, and research on science technology.

Technology

including tips, instructions for using software, hardware, fixing errors network, fix computer errors on many operating systems such as Windows, macOS, Linux, Android, iOS.

Life

Life skills, job skills, leadership skills, life tips, things you may not know, good sayings about life, sayings famous of Jack Ma, Bill Gate, Steve Jobs.

Try changing the browser size, when the screen is less than 600px wide, the columns will overlap instead of lying side by side:

Tip: If you want to create a web layout with only 2 columns, set the width attribute to 50%, similar to 4 columns, then 25%.

Create unequal columns

Content is the largest and most important part of your website.

Most of a website, the layout of columns will not be equally divided, the content is the largest and most important part of the site, so it will occupy the most space. Secondary content (if any) is often used to switch to another link or specify information related to the main content.

By using CSS, you can change the column width as you like. Note that the sum of columns should be 100% valid.

 .column { 
  float: left; 
 } 
 
 /* C?t bên trái và ph?i */ 
 .column.side { 
  width: 25%; 
 } 
 
 /* C?t chính gi?a */ 
 .column.middle { 
  width: 50%; 
 } 
 
 /* B? c?c linh ho?t: ba c?t x?p ch?ng lên nhau thay vì c?nh nhau khi màn hình 
 có chi?u r?ng d??i 600px */ 
 @media screen and (max-width: 600px) { 
  .column.side, .column.middle { 
  width: 100%; 
  } 
 } 

Full code:

 Thi?t k? Layout - B? c?c website trong CSS 
 

Website TipsMake.com

  Làng Công ngh? 
  Công ngh? 
  Cu?c s?ng 
 

Guide

You can share your article on the page if you have an account, you You can view posted articles, view other members' posts and find Find the article you care about on the page.

Introduce

TipsMake.com is a social network about science and technology, expanding content to meet the needs of members in more technology areas such as phone, smart device, electronics, computer security.

You can become a part of TipsMake.com by posting write, experience your technology for the content management team of Social network via email info@tipsmake.com

Contact

Try changing the browser size, when the screen is less than 600px wide, the columns will overlap instead of lying side by side:

Footer

Footer is located at the bottom of the page, typically contains information such as copyright, contact information.

 .footer { 
  background-color: #e9d8f4; 
  color: #58257b; 
  padding: 5px; 
  text-align: center; 
 } 

Full code:

 Thi?t k? Layout - B? c?c website trong CSS 
 

Website TipsMake.com

  Làng Công ngh? 
  Công ngh? 
  Cu?c s?ng 
 

Guide

You can share your posts on the page if you have an account.

Introduce

TipsMake.com is a social network about science and technology, expanding content to meet the needs of members in more technology areas such as phone, smart device, electronics, computer security.

Contact

Phone: 024 2242 6188.

Email: info@tipsmake.com.

License No. 362 / GP-BTTTT. Ministry of Information and Communications issued on June 30, 2016.

Sample layout

Website TipsMake.com

Knowledge - Experience - FAQ

  Làng Công ngh? 
  Công ngh? 
  Cu?c s?ng 
  ??ng ký 
 

Form - Form in CSS

Quách T?nh, February 14, 2019

Forms are an integral part of any kind of website.

This guide, TipsMake.com will show you how to build the section display interface of a basic form. This interface can be done Pretty nice with CSS

Attribute Selector in CSS

Quách T?nh, 12/02/2019

Attribute selector is the way to select the elements you want to type in HTML documents are based on the attributes of one or more HTML tags.

Attribute selector can select objects without having to declare adding Classes or IDs into HTML tags and still be able to navigate get to those components, make the code more neat and coherent.

Introduce

TipsMake.com is a social network about science and technology.

Highlights

Follow Me

Facebook

YouTube

License No. 362 / GP-BTTTT. Ministry of Information and Communications issued on June 30, 2016.

Previous post: Counter - CSS counter

Next lesson: Unit - Unit of measurement in CSS