DIV+CSS Layout-Fixed page opening layout

Source: Internet
Author: User

The main CSS properties in the Div+css layout are described in:


The Float property is the most basic and most commonly used property in the DIV+CSS layout for implementing multi-column functionality, and we know that the <div> tag can only display one line in the default row, whereas using the Float property allows you to display multiple div functions in a row. The most straightforward way to explain this is to implement the multi-column function of table layout.


The margin property is used to set the distance between two elements.


The Padding property is used to set the distance between the border of an element and its contents.


Using the Float property to set a row with multiple div (multiple columns), it is best to use the clear property to clearly float before the next line starts, otherwise the above layout will affect the following.

Examples: Use examples below if you make a simple and basic layout, the effect is as follows:


1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>DIV+CSS布局教程</title><style type="text/css">#Container{    width:1000px;    margin:0auto;/*设置整个容器在浏览器中水平居中*/    background:#CF3;}#Header{    height:80px;    background:#093;}#logo{    padding-left:50px;    padding-top:20px;    padding-bottom:50px;}#Content{    height:600px;    /*此处对容器设置了高度,一般不建议对容器设置高度,一般使用overflow:auto;属性设置容器根据内容自适应高度,如果不指定高度或不设置自适应高度,容器将默认为1个字符高度,容器下方的布局元素(footer)设置margin-top:属性将无效*/    margin-top:20px;/*此处讲解margin的用法,设置content与上面header元素之间的距离*/    background:#0FF;    }#Content-Left{    height:400px;    width:200px;    margin:20px;/*设置元素跟其他元素的距离为20像素*/    float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/    background:#90C;}#Content-Main{    height:400px;    width:720px;    margin:20px;/*设置元素跟其他元素的距离为20像素*/    float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/    background:#90C;}/*注:Content-Left和Content-Main元素是Content元素的子元素,两个元素使用了float:left;设置成两列,这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度,否则设置列将失败*/#Footer{    height:40px;    background:#90C;    margin-top:20px;}.Clear{    clear:both;}</style><body><div id="Container">    <div id="Header">        <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>    </div>    <div id="Content">        <div id="Content-Left">Content-Left</div>        <div id="Content-Main">Content-Main</div>    </div>    <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>    <div id="Footer">Footer</div></div></body>

Note: As a container for the entire page, container controls the location of the entire page in the browser, where margin:0 auto is used, the control container container is horizontally centered in the browser, and the general fixed-width layout uses this code.

This article only describes the most basic layout, in the specific development practice may encounter browser compatibility and other issues, encounter the details of the problem please Baidu to solve, the solution of more experience on the accumulation up.

Reprinted from: http://www.kwstu.com/ArticleView/divcss_2013929173533658

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.