<!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. JdbcTemplate:Jdbc模板和数据库元数据

    通过 Jdbc .C3P0 .Druid 的使用我们会发现即使我们做了工具的封装,但重复性的代码依旧很多.我们可以通过 JdbcTemplate 即 Jdbc 模板来使我们的代码更加简洁,逻辑更加清晰 ...

  2. Recyclerview点击事件，更新item的UI+更新Recyclerview外的控件

    项目中用到了Recyclerview,在第一行代码中学到了一种相对来说简单的点击事件方法,可是这种点击事件是在adapter中写的,没有教怎么更新item的ui和更新Recyclerview之外的控件 ...

  3. Android基础TOP2_1：输出系统时间

    Activity: <TextView android:id="@+id/tv" android:layout_width="wrap_content" ...

  4. 03-Servlet 体系结构知识梳理

    一.Servlet体系结构 Java Web应用是基于Servlet规范运行,Servlet顶层类的关联如下图: 从图可看出,Servlet规范基本围绕这几个类运行,其中,与Servlet主动关联的有 ...

  5. HashMap , TreeMap , TreeMap 默认排序

    Java代码  import java.util.HashMap; import java.util.LinkedHashMap; import java.util.Map; import java. ...

  6. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  7. 如何设置“用eclipse开发时自动在顶端产生import”？

    eclipse新版本中的默认设置可能导致自动在生成import时是在代码中,而大多数时间我们需要自动生成import在代码顶端,按照如下设置即可纠正

  8. 如何将工程推到github上

    首先,读一下这个 Git-Pro中文版 步骤: 在本地文件系统中 git init 在github中新建项目(光新建就行了) 然后,出现下面这张图,打开sourceTree,按照上面的操作进行就行了. ...

  9. 微信小程序——weui的使用

    使用在根目录中复制weui.wxss,app.wxss中引入 在weui.io中查看到自己想要的样式表后,到第二个网站复制代码,复制到自己的项目中即可 <!--pages/register/re ...

  10. 零基础学习Linux培训，应该选择哪个培训班？

    云计算早已不是什么稀奇的概念,它的火爆让Linux运维工程师这个职业越来越重要.在当今各类云平台提供的系统中,Linux系统几乎毫无争议的独占鳌头,市场份额进一步扩张. 这也让Linux运维工程师职位 ...