The web pages we open in our daily lives are always orderly and comfortable to look at, but do you know how they do it? They are laid out using our HTML elements + some css styles, so let’s learn how to layout the page today.
##Website layout
Most websites arrange content into multiple columns (just like a magazine or newspaper).
Most websites can use the
or
elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Although we can use the HTML table tag to design a beautiful layout, the table tag isnot recommendedas a layout tool - tables are not layout tools.
Tips: Web page layout is very important to improve the appearance of the website,Please design your web page layout carefully.
##HTML layout - using the
element## The #div element is a block-level element used to group HTML elements.
Example
The following example uses five div elements to create a multi-column layout with some simple css styling:
php中文网(php.cn)
主要的网站标题
菜单 HTML CSS JavaScript
这里是内容
The above HTML code will Produces the following result:
HTML layout using table
Comments
: The
element is not designed as a layout tool.
The role of the element is to display tabular data.
Using the
element can achieve layout effects, because the table element can be styled through CSS:
Tip: The biggest advantage of using CSS is that if the CSS code is stored in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS,visit our CSS tutorial.
Tip: Since creating advanced layouts is time-consuming, using templates is a quick option . There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them).
For exampleUse Bootstrap
Bootstrapis to use a ready-made CSS framework.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive web.
Bootstrap helps you develop sites that look great at any size: monitor, laptop, tablet or mobile phone:
To learn about Bootstrap, read our Bootstrap tutorial.
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
