<!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. 通过Oracle透明网关连接Sybase

    Oracle公司提出的透明网关技术可用于实现与其他多种类型的数据库的互联,实现不同类型数据之间建立连接,方便于使用者进行查询.近日,在公司的某项目的实施过程中,开发人员需要访问Sybase数据库中的某 ...

  2. Oracle 10g RAC的负载均衡配置[转载]

    Oracle 10g RAC的负载均衡配置 负载均衡是指连接的负载均衡.RAC的负载均衡主要是指新会话连接到RAC数据库时,如何判定这个新的连接要连到哪个节点进行工作.在RAC中,负载均衡分为两种,一 ...

  3. CF831C Jury Marks

    思路: 关键在于“插入”一个得分之后,其他所有得分也随之确定了. 实现: #include <iostream> #include <cstdio> #include < ...

  4. 《Java编程的逻辑》第三部分 泛型与容器

  5. html5——伸缩布局

    基本概念 1.主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 2.侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 3.方向:默认主轴从左向右,侧轴默认从上到下 4.主轴和侧轴并不是固 ...

  6. php入门学习笔记

    学习笔记[6.5-6.13] 1.常用命令 打开数据库格式: mysql -h主机地址 -u用户名 -p 重启nginx:sudo /etc/init.d/nginx restart或者service ...

  7. Lazarus 1.44升级到1.6 UTF8处理发生变化了

    首先这里真的要强调一下,由于Freepascal升级到3.0后,FPC的内部将整个代码处理由AnsiString改为了UTF8编码(RTL with default codepage UTF-8). ...

  8. （转） 基于Arcgis for Js的web GIS数据在线采集简介

    http://blog.csdn.net/gisshixisheng/article/details/44310765 在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了 ...

  9. switch方法中使用数字区间

    function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = ...

  10. 简述prototype, _proto_, constructor三者的关系

    1.prototype 感概:每个函数都有一个prototype这个属性,而这个属性指向一个对象,这个对象称为原型对象 作用: a.节约内存 b.扩展属性和方法 c.实现类与类的之间的继承 2._pr ...