zoukankan      html  css  js  c++  java
  • CSS 多列布局

    多列是网站必不可少的布局方式。

    多列布局技术主要以下3个属性为基础:

    • 用于设置列宽
    • float:用于将多个列并排
    • margin:该属性用于在列之间创建空隙

    两列布局

    下面的代码演示两列布局,左宽右列窄

    <!DOCTYPE html>
    <html>
        <head>
            <title>两列布局</title>
            <style type="text/css">
                body {
                     960px;
                    color: #665544;
                    margin:0 auto;}
                .column1of2 {
                    float: left;
                     620px;
                    margin: 10px;}
                .column2of2 {
                    float: left;
                     300px;
                    margin: 10px;}
            </style>
        </head>
        <body>
            <h1 style="color:#706fd3">软件开发,成就梦想</h1>
            <h2><a href="https://www.liyongzhen.com/">学编程,上利永贞网</a></h2>
            <div class="column1of2">
                <h3>第一段</h3>
                <p>Buffer Pool 缓冲池是主存储器中的一个区域,用于在访问时缓存表和索引数据。 缓冲池允许直接从内存处理常用数据,从而加快处理速度。
                 在专用服务器上,通常会将最多80%的物理内存分配给缓冲池。</p>
                <p>为了提高大容量读取操作的效率,缓冲池被分成可以容纳多行的page。为了提高缓存管理的效率,缓冲池被实现为链接的page list。</p>
                <h3>第二段</h3>
                <p>Log Buffer 日志缓冲区是保存要写入磁盘上日志文件的数据的内存区域。 日志缓冲区大小由innodb_log_buffer_size变量定义。
                 默认大小为16MB。 日志缓冲区的内容会定期刷新到磁盘。</p>
                <p>大型日志缓冲区使大型事务能够运行,而无需在事务提交之前将重做日志数据写入磁盘。</p>
                <p>System Tablespace InnoDB系统表空间是doublewrite缓冲区和更改缓冲区的存储区域。 系统表空间还包含在系统表空间中创建的用户
                创建表的表和索引数据。 在以前的版本中,系统表空间包含InnoDB数据字典。 在MySQL 8.0中, InnoDB将元数据存储在MySQL数据字典中。</p>
            </div>
            <div class="column2of2">
                <h3>最新文章</h3>
                <ul>
                    <li>CSS 颜色术语</li>
                    <li>CSS 背景颜色</li>
                    <li>CSS 字体风格</li>
                    <li>CSS 盒子大小</li>
                    <li>CSS 边框</li>
                    <li>CSS 内外边距</li>
                </ul>
            </div>
        </body>
    </html>
  • 相关阅读:
    JavaScript实现继承机制(4)——构造函数+原型链混合方式
    NodeJS”热部署“代码,实现动态调试
    初识NodeJS,一个基于GoogleV8引擎的Javascript运行环境
    那些你不得不知道的JavaScript 变量命名规则
    JavaScript声明全局变量的三种方式
    JavaScript实现继承机制(3)——通过原型链(prototype chaining)方式
    JavaScript实现继承机制(1)—— 构造函数方法对象冒充
    C# readonly和const
    C# winform增加界面动态加载的流畅性
    C# 正确操作字符串,规避字符串转换所带来的额外开销
  • 原文地址:https://www.cnblogs.com/lsyw/p/10839072.html
Copyright © 2011-2022 走看看