<!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: 大二上学期刚过完,平时成绩不错的小V参加了一个小型编程比赛,遇到一道题,虽 ...

  2. [转]通过Net Manager 配置Oracle 11g本地监听服务(listener service)

    本文转自:http://blog.csdn.net/mozart_cai/article/details/8596504 [Target] 通过ip address 监听orcl服务,而不是通过loc ...

  3. tomcat生成catalina.out文件

    生成catalina.out方法 导语:本文为Windows下生tomcat将控制台信息输出到catalina.out文件  且 保证能实时查看日志文件的方法. 一.创建catalina.out 1. ...

  4. MonoBehaviour简述

    Unity中的脚本都是继承自MonoBehaviour. 一.基础函数: 创建脚本就默认的update.start方法:(这些官方的文档都是有的) Start:Update函数第一次运行前调用,一般用 ...

  5. JS——动态添加事件和移除事件（有待补充...）

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...

  6. Postfix 故障记录

    1.postfix 目录/var/mail/USER文件大小限制报错 解决方式: 编辑 /etc/postfix/main.cf 文件添加以下内容 mailbox_size_limit = 51200 ...

  7. PHP 之ftp客户端类封装实现

    <?php /** * Class FtpClient */ class FtpClient { private $host = '';//远程服务器地址 private $user = ''; ...

  8. Java切换JDK版本的方法及技巧

    由于项目的不同安排,之前项目开发时,使用的jdk版本为1.8,现临时接手一以前项目,需要更换jdk版本. 安装 不再赘述,去Oracle网站(https://www.oracle.com/techne ...

  9. 记录--git命令行上传项目到github仓库

    由于公司一直使用的是的SVN,基本上都是内网,原来的git命令都快忘记了,当然也是自己太懒,平时都是直接拖到github上.今天打开idea后突然看到了原来自己写好的一个项目,就想将它上传到githu ...

  10. 源码安装apache脚本

    #!/bin/bash#By:zhaocheng#Date:2019-01-18 [ -d /media/cdrom ] || mkdir /media/cdrom[ -d /media/cdrom/ ...