<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        .top,
        .banner,
        .main,
        .footer{
            width: 960px;
            margin: 0 auto;
            border: 1px dashed #ccc;
            text-align: center;
            background-color: #eee;
        }
        .top{
            height: 80px;

        }
        .banner{
            height: 120px;
        }
        .main{
            height: 500px;
        }
        .left{
            width: 360px;
            height: 500px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 592px;
            height: 500px;
            background-color: #0a2ffe;
            float: right;
        /*   左浮动有浮动是根据浏览器来浮动的  float 一定得要父亲来*/
        }
        .footer{
            height: 120px;
        }
    </style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

css练习——两列左窄右kuan型的更多相关文章

  1. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  2. CSS实现两列布局，一列固定宽度，一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  3. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  4. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  5. 如何用纯CSS布局两列，一列固定宽度，另一列自适应？

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

  6. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  7. div+css 左右两列自适应高度 ，以及父级div也跟着自适应子级的高度（兼容各大浏览器）

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  8. css渐变写法 从左到右渐变三种颜色示例；

    background:linear-gradient(to right,#7f06a8,#a02bc2,#7f06a8)

  9. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. java架构之路-（NoSql专题）MongoDB快速上手

    NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".在现代的计算系统上每天网络上都会产生庞大的数据量.这些数据有很大一部分是由关系数据库管理系统(RD ...

  2. python基础-函数作用域

    函数 函数对象 函数是第一类对象 函数名可以被引用 函数名可以当作参数使用 函数名可以当作返回值使用 函数名可以当作容器类型的元素 函数嵌套 嵌套调用:在函数内部中调用函数 嵌套定义:在函数内部中定义 ...

  3. NOIP模拟测试11

    这次考试T1想到了正解没有去实现,然后就死了,不过我估计就算想到正解也会挂(26^2和暴力一个分),肝了两个小时T2屁都没蹦出来,T3没有搞清那个式子的含义. (不过一分没挂) T1:string 开 ...

  4. P3097 [USACO13DEC]最优挤奶（线段树优化dp）

    盲猜dp系列... 题意:给定序列,选了i就不能选与i相邻的两个,求最大值,带修改 蒟蒻在考场上10min打完以为只有两种情况的错解...居然能骗一点分... 先讲下当时的思路吧. f[i][0/1] ...

  5. tomcat日志（1）

    tomcat日志配置之一自带log 2014-03-19 09:58 33737人阅读 评论(2) 收藏 举报 分类: java(49) 问题 tomcat每次启动时,自动在logs目录下生产以下日志 ...

  6. Jetpack Compse 实战 —— 全新的开发体验

    公众号回复 Compose 获取安装包 项目地址: Wanandroid-Compose 经过前段时间的 Android Dev Summit ,相信你已经大概了解了 Jetpack Compose ...

  7. 修改 Django Administration

    只需要在django项目下的APP下的admin.py重写以下几个变量即可,不需要改django源码 from django.contrib import adminadmin.site.site_t ...

  8. [剑指offer] 二叉搜索树的后序遍历序列 （由1个后续遍历的数组判断它是不是BST）

    ①题目 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. ②思路 1.后续遍历的数组里,最后一个元素是根. 2 ...

  9. Spring Bean的定义及作用域

    目录: 了解Spring的基本概念 Spring简单的示例 Bean的定义 简单地说Bean是被Spring容器管理的Java对象,Spring容器会自动完成对Bean的实例化. 那么什么是容器呢?如 ...

  10. logback日志回顾整理--2018年8月8日

    几年前使用过logback作为项目的日志框架. 当时觉得这个框架比log4j更加好用. 所以系统的学习了一遍. 后来换了公司, 不再使用logback. 如今, 又有机会使用logback了, 所以, ...