Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Example of webkit-box layout page in CSS3_html/css_WEB-ITnose

Example of webkit-box layout page in CSS3_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:48:27
Original
1239 people have browsed it

之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局；

接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例）

  • 三列自适应布局    

    •        

     

     

     

     

    1

     

    2

     

    3

     


    如图：

  • 三列布局，一列定宽，其余两列按1：2的比例自适应

    •  

     

     

     

    200px

     

    比例1

     

    比例2

     


    As shown in the picture:

  • A common web page The basic layout of

    • Header

    Fixed width 200

    Scale 3

    Scale 1

    Footer


    As shown in the picture:

    Related labels：
    CSS3中webkit-box布局页面实例
    source：php.cn
    Previous article：[Jsoup Learning Etiquette] Eliminate untrusted HTML (to prevent XSS attacks)_html/css_WEB-ITnose Next article：7 cool animation applications implemented in pure CSS3_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    3
    2204
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    11
    2348
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1967
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1854
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1915
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template