zoukankan      html  css  js  c++  java
  • 如何用CSS进行网页布局学习总结 殷的博客

    页面布局:对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距

    页面布局分为4种:

    一栏布局

    两栏布局

    三栏布局

    混合布局

    灵活利用float、position对页面进行布局

    清除浮动

    方法一:

    针对受到浮动影响的元素操作   clear:both;

    方法二:

    针对受到浮动影响的元素操作    width:100%;overflow:hidden;

    混合布局代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>混合布局编程挑战</title>
        <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 30px;
            color: #fff
        }
        
        .top {
            height: 200px;
            background-color: #ccc;
        }
        
        .main {
            height: 500px;
            background-color: red;
        }
        
        .left {
            width: 200px;
            height: 500px;
            float: left;
            background-color: #0000FE;
        }
        
        .right {
            width: 300px;
            height: 500px;
            float: right;
            background-color: #350C0C;
        }
        
        .foot {
            height: 100px;
            background-color: #E59018;
        }
        </style>
    </head>
    
    <body>
        <div class="top">top</div>
        <div class="main">
            <div class="right">right</div>
            <div class="left">left</div>
        </div>
        <div class="foot">foot</div>
    </body>
    
    </html>
  • 相关阅读:
    oracle客户端plsql设置字符集
    命令导入导出oracle库
    java初级开发一系列的工具安装配置
    docker学习笔记-5.数据共享
    docker学习笔记-4.harbor
    flask学习笔记2
    socket编程学习
    docker学习笔记-3.docker镜像制作
    docker学习笔记-2.docker镜像制作
    docker学习笔记-1.docker基础
  • 原文地址:https://www.cnblogs.com/yinzf/p/5310662.html
Copyright © 2011-2022 走看看