<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <!--<link rel="stylesheet" href="main.css">-->
    <style>
    .layout .sidebar { float: left; width: 150px; background: #fce3c5; height: 300px; }
    .layout .primary { margin-left: 170px; background: #fce3c5; height: 300px; }
    
    </style>
</head>
<body>
    
    <div class="box bg layout clearfix">
        <div class="sidebar">AAA</div>
        <div class="primary">BBB</div>

</div>

</body>

</html>

经典左右布局demo的更多相关文章

  1. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  2. 【css】回想下经典的布局

    看到这张图相信大多数人都很熟悉,这曾经是一种经典的布局方式,一道经典的面试题,一般形如"实现一个布局,左右固定宽度,中间自适应".随着岁月的流转,时光的交替(颇有一种“天下风云出我 ...

  3. 前端切图:手机端自适应布局demo

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. css+html简单的布局demo

    于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...

  6. 响应式布局 —— Demo

    响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...

  7. 移动端布局Demo展示图文

    上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...

  8. flex布局demo

    flex布局 http://static.vgee.cn/static/index.html

  9. 浮动布局demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. ACM_最值差（线段树区间查询最值）

    最值差 Time Limit: 2000/1000ms (Java/Others) Problem Description: 给定N个数A1A2A3A4...AN.求任意区间Ai到Aj中的最大数与最小 ...

  2. Http协议详解（转）>>>写的很好

    声明:本片文章非原创,仅供自己学习并分享 内容来源于博客园作者MIN飞翔的HTTP协议详解地址http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html ...

  3. Mysql(三):多表查询和存储程序

    今天内容: ● 多表查询(内连接 外连接 子查询) ● 存储程序(存储过程 函数) 多表查询 ​ 同时从多张数据表中查取到需要的数据即是多表查询. 多表查询时,参与查询的表中每条数据进行组合,这种效果 ...

  4. crontab的使用

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  5. Linux文件系统inode、block解释权限(三)

    利用文件系统的inode和block来分析文件(目录)的权限问题. 为什么读取一个文件还要看该文件路径所有目录的权限? 为什么目录的w权限具有删除文件的能力,而文件w权限不行. inode:记录文件的 ...

  6. 关于用友 U8-UAP二开的一些事

    这是关于一个刚刚接触用友U8的二次开发的一些小心得. 首先就是用友二开的论坛,http://u8dev.yonyou.com/ 当然这个论坛做得不怎么样,提出了好几个问题,都没有回复的. 以下是关于二 ...

  7. 【译】x86程序员手册20-6.3.4门描述符守卫程序入口

    6.3.4 Gate Descriptors Guard Procedure Entry Points 门描述符守卫程序入口 To provide protection for control tra ...

  8. Python标准库os

    如果你希望自己的程序能够与平台无关的话,这个模块至关重要. os.name #'nt' for windows, 'posix' for linux/unix os.getcwd() #get cur ...

  9. Centos 修改源

    1首先备份原来的配置文件: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2下载对应版本r ...

  10. javascript的严格模式：use strict

    ECMAscript 5添加的运行模式,禁止一些非标准.不安全的操作. <script> "use strict"; console.log("这是严格模式. ...