<!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. UNIX环境高级编程--1

    前期准备: 下载apue3源文件(从apuebook.com上),然后编译(make)之后,得到libapue.a动态链接文件(.o 就相当于windows里的obj文件 .a 是好多个.o合在一起, ...

  2. semantic、vue 使用分页组件和日历插件

    最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...

  3. H5 标签属性、input属性

    高亮文字: 全部商品只要<mark>6.18</mark> 结果:     加拼音文字: <ruby>變<rt>bian</rt></ ...

  4. servlet的多线程并发问题

    package gz.itcast.e_thread; import java.io.IOException; import javax.servlet.ServletException; impor ...

  5. linux下tomcat启动正常,但是外部浏览器无法访问

    这种情况一般是由于系统防火墙设置问题导致的,这次遇到的系统是centos 7.2,防火墙由iptables改成了firewall,因此停止防火墙的命令应该是: systemctl disable fi ...

  6. Python常用的标准库及第三方库

    标准库Python拥有一个强大的标准库.Python语言的核心只包含数字.字符串.列表.字典.文件等常见类型和函数,而由Python标准库提供了系统管理.网络通信.文本处理.数据库接口.图形系统.XM ...

  7. 【sqli-labs】 less46 GET -Error based -Numeric -Order By Clause(GET型基于错误的数字型Order By从句注入)

    http://192.168.136.128/sqli-labs-master/Less-46/?sort=1 sort=4时出现报错 说明参数是添加在order by 之后 错误信息没有屏蔽,直接使 ...

  8. 预处理、const、static、sizeof

    1.预处理和宏定义 #define xxxx #ifdef xxxx ; #elseif xxxx; #endif 2.c++求随机数 rand(),rand()会返回一随机数值, 范围在0至RAND ...

  9. Python 之__slots__的作用

    # 注意:__slots__ 用来限制当前类的实例属性的,如:name.age才可被使用,添加其他的属性则报错 # 不会限制继承类的属性 class Person(): __slots__ = (&q ...

  10. javascript模块化编程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）

    Javascript模块化编程(一):模块的写法   随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个 ...