<!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. 7.22 NOIP模拟7

    又是炸掉的一次考试 T1.方程的解 本次考试最容易骗分的一道题,但是由于T2花的时间太多,我竟然连a+b=c都没判..暴力掉了40分. 首先a+b=c,只有一组解. 然后是a=1,b=1,答案是c-1 ...

  2. DAY 5 搜索

    搜索 开篇: mayan游戏(noip2011 day1 T3) 这道题就是个码量题,老师讲题时淡淡的说写完前两题就花一个半小时了,最后一题不快点打会调不出来,对于一个三个半小时就写两题的蒟蒻来说这. ...

  3. 从Gartner IT Symposium，看RPA“一半是海水一半是火焰”

    2019年,艺赛旗和Gartner建立了咨询合作,并在企业发展策略中汲取了Gartner的部分建议.今年Gartner在全球召开了多场IT Symposium,并在Symposium发布2020的相关 ...

  4. Class文件结构全面解析（上）

    什么是Class文件? 在Java刚刚诞生的时候就提出了一个非常著名的口号:"一次编写,到处运行.(Write Once,Run Anywhere)".为了实现平台无关性,各种不同 ...

  5. 暑假CV-QKD的相关论文单词集（第一弹）

    CV-QKD  连续变量-量子秘钥分发 Quadrature  正交 Photon     光子 Coherent    连续的,连贯的 Reconciliation   调解 Cryptograph ...

  6. python的模块future用法实例解析

    计算机的知识太多了,很多东西就是一个使用过程中详细积累的过程.最近遇到了一个很久关于future的问题,踩了坑,这里就做个笔记,免得后续再犯类似错误.   future的作用:把下一个新版本的特性导入 ...

  7. lqb 基础练习 回文数

    基础练习 回文数 时间限制:1.0s   内存限制:512.0MB     问题描述 1221是一个非常特殊的数,它从左边读和从右边读是一样的,编程求所有这样的四位十进制数. 输出格式 按从小到大的顺 ...

  8. iOS核心动画高级技巧-2

    3. 图层几何学 图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何 ...

  9. 力扣（LeetCode）字符串中的第一个唯一字符 个人题解

    给定一个字符串,找到它的第一个不重复的字符,并返回它的索引.如果不存在,则返回 -1. 案例: s = "leetcode" 返回 0. s = "loveleetcod ...

  10. Python 之路 Day01 笔记-什么是变量,常量等

    变量 变量 是 为了存储 程序运算过程中的一些中间 结果,为了方便日后调用 变量的命名规则 1. 要具有描述性 2. 变量名只能'_','数字','字母'组成,不可以是空格或特殊字符(#?<., ...