CSS webpage layout tutorial 1: fixed width of a column

Source: Internet
Author: User

This series of tutorials is an entry-level tutorial, suitable for beginners to learn, from the simplest knowledge point 1.1 advanced. It is mainly based on examples and has very few theories, so it is more suitable for beginners to master quickly. As I am also learning, there are some mistakes or omissions. I hope you can correct them. In this tutorial, I would like to express my gratitude to the author for referring to "CSS website layout recording.
To learn about Div + CSS, you must first have a certain degree of HTML and CSS knowledge. If you do not know about this, we recommend that you first take this tutorial and study this tutorial again. In addition, we need to abandon the traditional thinking mode of table layout. As for why, I will understand it later in this tutorial. If you have prepared all these items, let's get started!

Fixed width of a column
The fixed width of a column is the basis of the base, so this section is the first section of the entry.
Layout is used as the ID name for div. For ease of viewing, background-color: # e8f5fe is used. The background color of div is set to light blue and border: 2px solid # a9c9e2 is used; set the border to the sky blue. The background color and border attributes will be explained in future tutorials.
Because the layout is fixed width, we directly set the width attribute width: 300px; and the height attribute Height: 200px. For the final effect, click "run thisCode"Button to view.Xmlns = "http://www.w3.org/1999/xhtml">


Fixed width of a column (aa25.cn)

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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