<!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. [ CodeForces 865 D ] Buy Low Sell High

    \(\\​\) \(Description\) 给出\(N\)天股票的价钱\(A_1,...,A_N\),每天可以什么都不做,或者买入或卖出\(1\)支股票,分别花出或收入\(A_i\)元,求最大收益 ...

  2. node的api

    一. 1.url: 绝对URI http://user:pass@www.example.com:80/dir/index.html?uid=1#ch1 协议 登录信息 服务器地址 端口 文件路径 查 ...

  3. Json——转义符

    C#后台直接输出Json字符串需要反斜杠“\” context.Response.Write("[{\"Name\": \"wqx\", \" ...

  4. postfix 邮件中继配置

    Postfix 配置邮件中继 A 邮件发送服务器B 邮件中继服务器 A. 配置发件服务器 # 开启转发规则 [root@Postfix ~]# vi /etc/postfix/main.cf tran ...

  5. 扩增子图表解读3热图：差异菌、OTU及功能

    热图是使用颜色来展示数值矩阵的图形.通常还会结合行.列的聚类分析,以表达实验数据多方面的结果.  热图在生物学领域应用广泛,尤其在高通量测序的结果展示中很流行,如样品-基因表达,样品-OTU相对丰度矩 ...

  6. CAD保存高版本的dwg（com接口）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SaveDwgEx 保存DWG文件,可以设置保存的文件版本号和密码,详细说明如下: 参数 说明 IN CString sFile ...

  7. IntelliJ IDEA之windows下载安装、卸载

    系统要求 系统支持:Microsoft Windows 8 / 7 / Vista / 2003 / XP(每个系统版本的 32 位和 64 位都可以) JDK 版本:Oracle JDK 1.6 或 ...

  8. Sending Secret Messages LightOJ - 1404

    Sending Secret Messages LightOJ - 1404 Alice wants to send Bob some confidential messages. But their ...

  9. Linux之iptables(二、基本认识和组成)

    iptables的基本认识 Netfilter组件 内核空间,集成在linux内核中 扩展各种网络服务的结构化底层框架 内核中选取五个位置放了五个hook(勾子) function(INPUT.OUT ...

  10. 4.几个「不难但却很有用」的 Git 技能点

    阅读 Git 原理详解及实用指南 记录 tag:不可移动的 branch tag 是一个和 branch 非常相似的概念,它和 branch 最大的区别是:tag 不能移动.所以在很多团队中,tag ...